uikit-react-public 0.14.21 → 0.21.8

package/lib/theme/original/defaultTheme.ts

@@ -0,0 +1,207 @@
+import { typography, primitiveColour } from '../common/themeCommon';
+import color, { blackAndWhite, displayColours } from './color';
+import originalColour from './originalColourNewStructure';
+
+// UCL Theme
+
+const baseSizes = {
+  s1: '1px',
+  s2: '2px',
+  s4: '4px',
+  s6: '6px',
+  s8: '8px',
+  s12: '12px',
+  s16: '16px',
+  s20: '20px',
+  s24: '24px',
+  s28: '28px',
+  s32: '32px',
+  s36: '36px',
+  s40: '40px',
+  s44: '44px',
+  s48: '48px',
+  s52: '52px',
+  s56: '56px',
+  s60: '60px',
+  s64: '64px',
+  s72: '72px',
+  s80: '80px',
+};
+
+const margin = {
+  m0: 0,
+  m2: baseSizes.s2,
+  m4: baseSizes.s4,
+  m6: baseSizes.s6,
+  m8: baseSizes.s8,
+  m12: baseSizes.s12,
+  m16: baseSizes.s16,
+  m20: baseSizes.s20,
+  m24: baseSizes.s24,
+  m32: baseSizes.s32,
+  m40: baseSizes.s40,
+  m48: baseSizes.s48,
+  m56: baseSizes.s56,
+  m64: baseSizes.s64,
+  m72: baseSizes.s72,
+  m80: baseSizes.s80,
+};
+
+const padding = {
+  p0: 0,
+  p2: baseSizes.s2,
+  p4: baseSizes.s4,
+  p6: baseSizes.s6,
+  p8: baseSizes.s8,
+  p12: baseSizes.s12,
+  p16: baseSizes.s16,
+  p20: baseSizes.s20,
+  p24: baseSizes.s24,
+  p32: baseSizes.s32,
+  p40: baseSizes.s40,
+  p48: baseSizes.s48,
+  p56: baseSizes.s56,
+  p64: baseSizes.s64,
+  p72: baseSizes.s72,
+  p80: baseSizes.s80,
+};
+
+const breakpoints = {
+  mobile: 320,
+  tablet: 672,
+  desktop: 1056,
+  desktopLarge: 1536,
+};
+
+const createMediaQuery = (breakpoint: number) =>
+  // Breakpoints apply at the specified width and above
+  `@media (min-width: ${breakpoint}px)`;
+
+const custom = (breakpoint: number) =>
+  // Fallback for edge cases
+  createMediaQuery(breakpoint);
+
+const mq = {
+  mobile: createMediaQuery(breakpoints.mobile),
+  tablet: createMediaQuery(breakpoints.tablet),
+  desktop: createMediaQuery(breakpoints.desktop),
+  desktopLarge: createMediaQuery(breakpoints.desktopLarge),
+  custom,
+};
+
+const theme = {
+  // new
+  primitiveColour,
+  colour: originalColour,
+  typography,
+
+  // to deprecate
+  color,
+
+  thickness: {
+    t1: baseSizes.s1,
+    t2: baseSizes.s2,
+  },
+
+  width: {
+    h16: baseSizes.s16,
+    h20: baseSizes.s20,
+    h24: baseSizes.s24,
+  },
+
+  height: {
+    h16: baseSizes.s16,
+    h20: baseSizes.s20,
+    h24: baseSizes.s24,
+    h32: baseSizes.s32,
+    h36: baseSizes.s36,
+    h40: baseSizes.s40,
+    h80: baseSizes.s80,
+  },
+
+  margin,
+
+  padding,
+
+  radius: {
+    r2: baseSizes.s2,
+    r4: baseSizes.s4,
+    r8: baseSizes.s8,
+    r12: baseSizes.s12,
+    r16: baseSizes.s16,
+  },
+
+  border: {
+    b1: baseSizes.s1,
+    b2: baseSizes.s2,
+  },
+
+  outline: {
+    o2: baseSizes.s2,
+    o4: baseSizes.s4,
+  },
+
+  font: {
+    family: {
+      primary: 'Helvetica, "Helvetica Neue", Arial, sans-serif',
+      secondary:
+        'Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif',
+      fixed: 'Courier, fixed',
+    },
+    size: {
+      f12: '12px',
+      f14: '14px', // Font should be at least 14px in most cases
+      f16: '16px', // Prefer 16px to 14px in most cases
+      f18: '18px',
+      f20: '20px',
+      f22: '22px',
+      f24: '24px',
+      f26: '26px',
+      f28: '28px',
+      f30: '30px',
+      f32: '32px',
+      f36: '36px',
+      f40: '40px',
+    },
+    weight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700,
+      extraBold: 800,
+    },
+    lineHeight: {
+      h100: '100%',
+      h110: '110%',
+      h120: '120%',
+      h130: '130%',
+      h140: '140%',
+      h150: '150%',
+    },
+  },
+
+  boxShadow: {
+    // offset-x | offset-y | blur-radius | spread-radius | color
+    y1: '0 1px 4px 1px rgba(0, 0, 0, 0.1)',
+    y2: '0 2px 4px 1px rgba(0, 0, 0, 0.1)',
+    x2y4: '2px 4px 8px 4px rgba(0, 0, 0, 0.1)',
+    focus: `0px 0px 0px 2px ${color.neutral.white}, 0px 0px 0px 4px ${color.neutral.black}, 0px 0px 0px 6px ${color.system.orange70}`,
+    active: `0px 6px 0px 0px ${color.interaction.blue80} inset`,
+    destructiveActive: `0px 6px 0px 0px ${color.system.red100} inset`,
+  },
+
+  breakpoints,
+  mq,
+
+  // For ease of use, margin and padding are added at the top level
+  // Usage: margin-top: ${theme.m16};
+  ...margin,
+  ...padding,
+};
+
+export type ThemeType = typeof theme;
+export type DisplayColoursType = typeof displayColours;
+export type BlackAndWhiteColoursType = typeof blackAndWhite;
+
+export default theme;

package/lib/theme/original/originalColourNewStructure.ts

@@ -0,0 +1,185 @@
+import { tokens } from 'design-system-foundations-public';
+import tokenToHex from '../../utils/addAlphaToHex';
+import color from './color';
+
+const { light: lightThemeTokens } = tokens;
+
+// UCL Original Theme Colours - in new format
+
+const bg = {
+  default: tokenToHex(lightThemeTokens.colour.bg.default.$value),
+  brand: tokenToHex(lightThemeTokens.colour.bg.brand.$value),
+  inverse: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.bg.inverse.$value),
+  inversePrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.bg['inverse-primary'].$value),
+};
+
+const border = {
+  default: tokenToHex(lightThemeTokens.colour.border.default.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.border.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border['brand-hover'].$value),
+  brandSubtle: color.base.blue20Alt, // tokenToHex(lightThemeTokens.colour.border['brand-subtle'].$value),
+  primary: tokenToHex(lightThemeTokens.colour.border.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.border.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.border.tertiary.$value),
+  subtle: tokenToHex(lightThemeTokens.colour.border.subtle.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.border.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.border.inverse.$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.border['brand-inverse-secondary'].$value),
+  focus: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border.focus.$value),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.border.success.$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.border.critical.$value),
+  warning: color.system.orange70, // tokenToHex(lightThemeTokens.colour.border.warning.$value),
+};
+
+const fill = {
+  default: tokenToHex(lightThemeTokens.colour.fill.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.fill.hover.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.fill.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-hover'].$value),
+  brandPressed: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-pressed'].$value),
+  brandSubtleSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle-selected'].$value),
+  brandSubtleHover: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle-hover'].$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.fill['brand-primary'].$value),
+  disabled: tokenToHex(lightThemeTokens.colour.fill.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.fill.inverse.$value),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.fill['brand-inverse-secondary'].$value),
+  inverseHover: color.base.blue20Alt, // tokenToHex(lightThemeTokens.colour.fill['inverse-hover'].$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.fill.critical.$value),
+  criticalHover: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-hover'].$value),
+  criticalSelected: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-selected'].$value),
+  criticalPressed: color.base.red90, // tokenToHex(lightThemeTokens.colour.fill['critical-pressed'].$value),
+  warning: tokenToHex(lightThemeTokens.colour.fill.warning.$value),
+  warningHover: tokenToHex(
+    lightThemeTokens.colour.fill['warning-hover'].$value
+  ),
+  warningSelected: tokenToHex(
+    lightThemeTokens.colour.fill['warning-selected'].$value
+  ),
+  warningPressed: tokenToHex(
+    lightThemeTokens.colour.fill['warning-pressed'].$value
+  ),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.fill.success.$value),
+};
+
+const icon = {
+  default: tokenToHex(lightThemeTokens.colour.icon.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.icon.hover.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.icon.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.icon.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.icon.disabled.$value),
+  disabledOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['disabled-on-bg-fill'].$value
+  ),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.icon.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-hover'].$value),
+  brandSelectedOnBgFill: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value),
+  visited: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon.visited.$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.icon['brand-primary'].$value),
+  brandInverted: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverted'].$value
+  ),
+  inverse: tokenToHex(lightThemeTokens.colour.icon.inverse.$value),
+  inverseHover: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-hover'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.icon['brand-inverse-secondary'].$value),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-tertiary'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-disabled'].$value
+  ),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.icon.critical.$value),
+  criticalOnBgFill: color.base.red80, // tokenToHex(lightThemeTokens.colour.icon['critical-on-bg-fill'].$value),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.icon.success.$value),
+  successOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['success-on-bg-fill'].$value
+  ),
+  warning: tokenToHex(lightThemeTokens.colour.icon.warning.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['warning-on-bg-fill'].$value
+  ),
+};
+
+const surface = {
+  default: tokenToHex(lightThemeTokens.colour.surface.default.$value),
+  primary: tokenToHex(lightThemeTokens.colour.surface.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.surface.secondary.$value),
+  brand: color.base.blue15, // tokenToHex(lightThemeTokens.colour.surface.brand.$value),
+  brandHover: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-hover'].$value),
+  brandSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-selected'].$value),
+  warning: color.system.orange10, // tokenToHex(lightThemeTokens.colour.surface.warning.$value),
+  success: color.system.green10, // tokenToHex(lightThemeTokens.colour.surface.success.$value),
+  critical: color.system.red10, // tokenToHex(lightThemeTokens.colour.surface.critical.$value),
+  hover: tokenToHex(lightThemeTokens.colour.surface.hover.$value),
+  selected: tokenToHex(lightThemeTokens.colour.surface.selected.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.surface.disabled.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.surface.tertiary.$value),
+  inverseBrand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand'].$value),
+  inverseBrandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand-primary'].$value),
+  backdrop: tokenToHex(lightThemeTokens.colour.surface.backdrop.$value),
+};
+
+const text = {
+  default: tokenToHex(lightThemeTokens.colour.text.default.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.text.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.text.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.text.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.text.inverse.$value),
+  onBgFillDisabled: tokenToHex(
+    lightThemeTokens.colour.text['on-bg-fill-disabled'].$value
+  ),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.text.brand.$value),
+  brandAccent: tokenToHex(lightThemeTokens.colour.text['brand-accent'].$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.text['brand-hover'].$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.text['brand-inverse-secondary'].$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.text['brand-primary'].$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.text.critical.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.text['warning-on-bg-fill'].$value
+  ),
+};
+
+const link = {
+  default: tokenToHex(lightThemeTokens.colour.link.default.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.link.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link['brand-hover'].$value),
+  visited: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link.visited.$value),
+  primary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.link.primary.$value),
+  primaryHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link['primary-hover'].$value),
+  disabled: tokenToHex(lightThemeTokens.colour.link.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.link.inverse.$value),
+  inverseVisited: color.base.blue15, // tokenToHex(lightThemeTokens.colour.link['inverse-visited'].$value),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.link['inverse-disabled'].$value
+  ),
+  inverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.link['inverse-secondary'].$value),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.link['inverse-tertiary'].$value
+  ),
+};
+
+const speciality = {
+  inputDefault: tokenToHex(
+    lightThemeTokens.colour.speciality['input-default'].$value
+  ),
+};
+
+const colour = {
+  bg,
+  border,
+  fill,
+  icon,
+  surface,
+  text,
+  link,
+  speciality,
+};
+
+export default colour;

package/lib/theme/useTheme.tsx

@@ -1,24 +1,81 @@
-// We will probably move away from context/provider to store/hook for accessing theme.
+import { createContext, useState, useContext, ReactNode } from 'react';
+import { Global, css } from '@emotion/react';
+import { ThemeType } from './original/defaultTheme';
+import theme from './original/defaultTheme';
+import { uikitFontUrls } from './fonts';
 
-import {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-} from 'react';
+const useThemeState = (initialTheme: ThemeType = theme as ThemeType) =>
+  useState(initialTheme);
 
-import theme, { ThemeType } from './defaultTheme';
-
-const useThemeState = () => useState(theme as ThemeType);
+const ThemeContext = createContext<ReturnType<typeof useThemeState> | null>(
+  null
+);
 
-const ThemeContext = createContext<ReturnType<
-  typeof useThemeState
-> | null>(null);
+const fontFaces = css`
+  @font-face {
+    font-family: 'DM Sans';
+    src: url(${uikitFontUrls.dmSansNormal}) format('woff2');
+    font-weight: 100 1000;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url(${uikitFontUrls.dmSansItalic}) format('woff2');
+    font-weight: 100 1000;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoItalic}) format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoLight}) format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoLightItalic}) format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoMedium}) format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoMediumItalic}) format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoRegular}) format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+`;
 
 export const ThemeContextProvider: React.FC<{
   children: ReactNode;
-}> = ({ children }) => (
-  <ThemeContext.Provider value={useThemeState()}>
+  initialTheme?: ThemeType;
+}> = ({ children, initialTheme }) => (
+  <ThemeContext.Provider value={useThemeState(initialTheme)}>
+    <Global styles={fontFaces} />
     {children}
   </ThemeContext.Provider>
 );

package/lib/types/assets.d.ts

@@ -0,0 +1,10 @@
+// lib/types/assets.d.ts
+declare module '*.woff2?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}

package/lib/utils/__tests__/announce.test.ts

@@ -0,0 +1,121 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import announce, { __resetForTesting } from '../announce';
+
+describe('announce (ARIA live region)', () => {
+  beforeEach(() => {
+    // Reset DOM before each test
+    document.body.innerHTML = '';
+    __resetForTesting();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('creates a live region on first announce', async () => {
+    announce('Hello world');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region).toBeTruthy();
+    expect(region.getAttribute('aria-live')).toBe('polite');
+    expect(region.getAttribute('aria-atomic')).toBe('true');
+  });
+
+  test('visually hides the live region but keeps it accessible', async () => {
+    announce('Hidden message');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region.style.position).toBe('absolute');
+    expect(region.style.left).toBe('-9999px');
+    expect(region.style.width).toBe('1px');
+    expect(region.style.height).toBe('1px');
+    expect(region.style.overflow).toBe('hidden');
+  });
+
+  test('clears text and sets message after timeout', async () => {
+    announce('This is an announcement');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    await waitFor(() => {
+      expect(region.textContent).toBe('This is an announcement');
+    });
+  });
+
+  test('reuses the same live region on multiple announcements', async () => {
+    announce('First message');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region).toBeTruthy();
+
+    announce('Second message');
+
+    // Query all instances
+    const allRegions = await screen.findAllByTestId('aria-live-region');
+
+    expect(allRegions.length).toBe(1);
+  });
+
+  test('queues multiple announcements and processes sequentially', async () => {
+    vi.useFakeTimers();
+
+    announce('First message');
+    announce('Second message');
+
+    // Query the live region
+    const region = document.querySelector(
+      '[data-testid="aria-live-region"]'
+    ) as HTMLElement;
+
+    // Initially empty
+    expect(region.textContent).toBe('');
+
+    // After 100ms, first message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('First message');
+
+    // Second message should NOT appear yet (need to wait 1000ms + 100ms more)
+    vi.advanceTimersByTime(500);
+    expect(region.textContent).toBe('First message');
+
+    // After remaining 500ms of the 1000ms delay, queue processes but text is cleared
+    vi.advanceTimersByTime(500);
+    expect(region.textContent).toBe('');
+
+    // After another 100ms, second message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Second message');
+  });
+
+  test('duplicate prevention while currently announcing', async () => {
+    vi.useFakeTimers();
+
+    announce('Processing');
+    announce('Processing'); // Duplicate - should be ignored
+    announce('Processing'); // Duplicate - should be ignored
+    announce('Done'); // Different message - should be queued
+
+    const region = document.querySelector(
+      '[data-testid="aria-live-region"]'
+    ) as HTMLElement;
+
+    // First message appears
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Processing');
+
+    // Complete first message, next should be "Done" (duplicates were ignored)
+    vi.advanceTimersByTime(1000);
+    vi.advanceTimersByTime(100);
+    expect(region.textContent).toBe('Done');
+
+    // No more messages in queue
+    vi.advanceTimersByTime(1000);
+    vi.advanceTimersByTime(100);
+    // Still "Done" - nothing else was queued
+    expect(region.textContent).toBe('Done');
+  });
+});

package/lib/utils/addAlphaToHex.ts

@@ -0,0 +1,29 @@
+const tokenToHex = (token: { hex: string; alpha?: number }) => {
+
+  const { hex, alpha } = token;
+
+  const effectiveAlpha = alpha ?? 1;
+
+  if (isNaN(effectiveAlpha) || effectiveAlpha === 1) {
+    return hex;
+  }
+
+  const clean = hex.replace('#', '');
+
+  // Convert #RGB to #RRGGBB
+  const normalized =
+    clean.length === 3
+      ? clean.split('').map((c) => c + c).join('')
+      : clean.slice(0, 6);
+
+  if (!effectiveAlpha || effectiveAlpha === 1) return `#${normalized}`;
+
+  const alphaHex = Math.round(effectiveAlpha * 255)
+    .toString(16)
+    .padStart(2, '0')
+    .toUpperCase();
+
+  return `#${normalized}${alphaHex}`;
+};
+
+export default tokenToHex;