uikit-react-public 0.37.0 → 0.38.0

package/lib/components/HeaderDraft/HeaderBreadcrumb.tsx

@@ -19,7 +19,7 @@ const HeaderBreadcrumb = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     font-size: ${theme.font.size.f14};
   `;
 
@@ -32,14 +32,14 @@ const HeaderBreadcrumb = ({
       }
 
       &:hover {
-        color: ${theme.color.neutral.black};
+        color: ${theme.colour.text.default};
         text-decoration: underline;
       }
     }
   `;
 
   const nonLinkStyle = css`
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-weight: 700;
   `;
 
@@ -48,7 +48,7 @@ const HeaderBreadcrumb = ({
   const chevronIconStyle = css`
     margin-left: ${theme.margin.m8};
     vertical-align: middle;
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/HeaderDraft/HeaderDraft.tsx

@@ -56,7 +56,7 @@ const HeaderDraft = ({
   });
 
   const baseStyle = css`
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.surface.default};
     font-family: ${theme.font.family.primary};
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -88,8 +88,8 @@ const HeaderDraft = ({
   const topStyle = css`
     position: relative;
     height: ${HEADER_TOP_HEIGHT}px;
-    background-color: ${theme.color.neutral.grey90};
-    color: ${theme.color.text.inverted};
+    background-color: ${theme.colour.surface.inverseBrandPrimary};
+    color: ${theme.colour.text.brandInverse};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -115,8 +115,8 @@ const HeaderDraft = ({
     right: 60px;
     height: 40px;
     padding: 0 ${theme.padding.p16};
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.surface.default};
+    color: ${theme.colour.text.default};
     font-size: ${theme.font.size.f16};
     font-weight: 700;
     border: none;
@@ -128,8 +128,8 @@ const HeaderDraft = ({
       color 0.15s ease-out;
 
     &:hover {
-      color: ${theme.color.text.primary};
-      background-color: ${theme.color.neutral.grey5};
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
   `;
 

package/lib/components/HeaderDraft/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-16ajjjr"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="css-1gacr1v"
+    class="css-1w82olg"
   >
     <svg
       class="css-y3m4z0"
@@ -43,7 +43,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
       </h2>
     </div>
     <div
-      class="css-cgj2nd"
+      class="css-1ptdzcv"
     >
       <div
         class="css-se18zh"
@@ -93,11 +93,11 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-16ajjjr"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="css-1gacr1v"
+    class="css-1w82olg"
   >
     <svg
       class="css-y3m4z0"

package/lib/components/HeaderNew/Header.tsx

@@ -42,7 +42,7 @@ const Header = ({
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    color: ${theme.color.text.inverted};
+    color: ${theme.colour.text.brandPrimary};
     display: flex;
     align-items: center;
     height: ${HEADER_MOBILE_HEIGHT_PX}px;
@@ -52,7 +52,7 @@ const Header = ({
     @media (min-width: ${theme.breakpoints.desktop}px) {
       height: ${HEADER_TABLET_HEIGHT_PX}px;
       padding: 0 ${theme.padding.p48} 0 ${theme.padding.p64};
-      border-bottom: 1px solid ${theme.colour.border.default};
+      border-bottom: 1px solid ${theme.colour.border.subtle};
     }
   `;
 

package/lib/components/HeaderNew/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-11a9sn4"
+  class="ucl-uikit-header css-1nmwv3y"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -41,7 +41,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-11a9sn4"
+  class="ucl-uikit-header css-1nmwv3y"
   data-testid="ucl-uikit-header"
 >
   <div

package/lib/components/Input/Input.tsx

@@ -54,13 +54,13 @@ const Input = forwardRef<Ref, InputProps>(
       box-sizing: border-box;
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
-      color: ${theme.color.text.primary};
-      background-color: ${theme.color.neutral.white};
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.inverse};
+      border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
       outline: none;
 
       &::placeholder {
-        color: ${theme.color.text.muted};
+        color: ${theme.colour.text.tertiary};
       }
     `;
 
@@ -71,8 +71,8 @@ const Input = forwardRef<Ref, InputProps>(
     `;
 
     const disabledStyle = css`
-      color: ${theme.color.text.disabled};
-      border-color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
+      border-color: ${theme.colour.border.disabled};
       cursor: not-allowed;
     `;
 

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

@@ -5,7 +5,7 @@ exports[`Input > snapshot: no props 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
   />
@@ -17,7 +17,7 @@ exports[`Input > snapshot: placeholder prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
     placeholder="Type your value..."
@@ -30,7 +30,7 @@ exports[`Input > snapshot: testId prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="test123"
     id=""
   />
@@ -42,7 +42,7 @@ exports[`Input > snapshot: value prop 1`] = `
   class="ucl-uikit-input css-1bpb1dw"
 >
   <input
-    class="ucl-uikit-input__input css-1nizqet"
+    class="ucl-uikit-input__input css-1i2w3yn"
     data-testid="ucl-uikit-input"
     id=""
     value="abc"

package/lib/components/Label/Label.tsx

@@ -43,7 +43,7 @@ const Label = forwardRef<Ref, LabelProps>(
 
     const baseStyle = css`
       width: 100%;
-      color: ${theme.color.neutral.grey90};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
     `;
@@ -61,7 +61,7 @@ const Label = forwardRef<Ref, LabelProps>(
     `;
 
     const disabledStyle = css`
-      color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
     `;
 
     const style = cx(

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

@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-19nek55"
+  class="ucl-uikit-label css-h3b4e6"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Layout/Layout.stories.tsx

@@ -26,7 +26,7 @@ export const ThreeColumns: Story = {
     const sectionStyle = css`
       grid-column: span 4;
       height: 100%;
-      background-color: ${theme.color.display.blueMuted};
+      background-color: ${theme.primitiveColour.blue['06'].$value.hex};
     `;
 
     const numberMarkerStyle = css`
@@ -36,7 +36,7 @@ export const ThreeColumns: Story = {
       height: 8rem;
       font-size: ${theme.font.size.f20};
       font-weight: ${theme.font.weight.semiBold};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.fixed};
       font-size: ${theme.font.size.f20};
     `;
@@ -65,7 +65,7 @@ export const FourColumns: Story = {
     const sectionStyle = css`
       grid-column: span 4;
       height: 100%;
-      background-color: ${theme.color.display.pinkMuted};
+      background-color: ${theme.primitiveColour.red['03'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: span 2;
@@ -83,7 +83,7 @@ export const FourColumns: Story = {
       height: 8rem;
       font-size: ${theme.font.size.f20};
       font-weight: ${theme.font.weight.semiBold};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.fixed};
       font-size: ${theme.font.size.f20};
     `;
@@ -155,7 +155,7 @@ export const GenericScreen: Story = {
     `;
 
     const colourBlockStyle = css`
-      background-color: ${theme.color.display.yellowVibrant};
+      background-color: ${theme.primitiveColour.yellow['08'].$value.hex};
       height: 250px;
     `;
 
@@ -236,7 +236,7 @@ export const CreativeGrid: Story = {
 
     const block1Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.purpleVibrant};
+      background-color: ${theme.primitiveColour.brandPurple['10'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -264,7 +264,7 @@ export const CreativeGrid: Story = {
 
     const block2Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueVibrant};
+      background-color: ${theme.primitiveColour.blue['09'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -291,7 +291,7 @@ export const CreativeGrid: Story = {
 
     const block3Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.greenVibrant};
+      background-color: ${theme.primitiveColour.green['07'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -319,7 +319,7 @@ export const CreativeGrid: Story = {
 
     const block4Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueMuted};
+      background-color: ${theme.primitiveColour.blue['06'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -346,7 +346,7 @@ export const CreativeGrid: Story = {
 
     const block5Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.yellowVibrant};
+      background-color: ${theme.primitiveColour.yellow['08'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 8;
@@ -373,7 +373,7 @@ export const CreativeGrid: Story = {
 
     const block6Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.pinkVibrant};
+      background-color: ${theme.primitiveColour.red['11'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 8 / 13;
@@ -400,7 +400,7 @@ export const CreativeGrid: Story = {
 
     const block7Style = css`
       ${gridItemBaseStyle}
-      background-color: ${theme.color.display.blueVibrant};
+      background-color: ${theme.primitiveColour.blue['09'].$value.hex};
 
       ${theme.mq.mobile} {
         grid-column: 1 / 13;

package/lib/components/Link/Link.tsx

@@ -51,10 +51,10 @@ const Link = forwardRef(function LinkInner(
 
   // todo: deprecate secondary
   const secondaryStyle = css`
-    color: ${theme.color.link.secondaryDefault};
+    color: ${theme.colour.link.default};
 
     &:active {
-      color: ${theme.color.link.secondaryHover};
+      color: ${theme.colour.link.brandHover};
     }
   `;
 
@@ -72,7 +72,7 @@ const Link = forwardRef(function LinkInner(
 
   const secondaryNoVisitedStyle = css`
     &:visited {
-      color: ${theme.color.link.secondaryDefault};
+      color: ${theme.colour.link.default};
     }
   `;
 
@@ -84,7 +84,7 @@ const Link = forwardRef(function LinkInner(
 
   const secondaryHoverStyle = css`
     &:hover {
-      color: ${theme.color.link.secondaryHover};
+      color: ${theme.colour.link.brandHover};
     }
   `;
 

package/lib/components/Menu/MenuContent.tsx

@@ -38,8 +38,8 @@ const MenuContent: React.FC<MenuContentProps> = ({
     z-index: 100;
     ${position === 'left' ? 'left: 0;' : 'right: 0;'}
     white-space: nowrap;
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.surface.default};
+    color: ${theme.colour.text.default};
 
     position: fixed;
     height: 100vh;
@@ -58,7 +58,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
       position: absolute;
       height: auto;
       min-width: 600px;
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
       box-shadow: ${theme.boxShadow.y1};
     }
   `;

package/lib/components/Menu/MenuItem.tsx

@@ -32,19 +32,21 @@ const MenuItem: React.FC<MenuItemProps> = ({
     align-items: center;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    font-weight: ${secondary
-      ? `${theme.font.weight.medium}`
-      : `${theme.font.weight.bold}`};
-    color: ${theme.color.text.secondary};
+    font-weight: ${
+      secondary ? `${theme.font.weight.medium}` : `${theme.font.weight.bold}`
+    };
+    color: ${theme.colour.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${secondary
-      ? `${theme.color.text.secondary}`
-      : `${theme.color.text.primary}`};
+    color: ${
+      secondary
+        ? `${theme.colour.text.secondary}`
+        : `${theme.colour.text.default}`
+    };
     cursor: pointer;
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
     &:focus-visible {
       outline: none;

package/lib/components/Menu/MenuSection.tsx

@@ -21,7 +21,7 @@ const MenuSection: React.FC<MenuSectionProps> = ({
     margin-bottom: ${theme.margin.m32};
 
     &:not(:last-of-type) {
-      border-bottom: 1px solid ${theme.color.neutral.grey10};
+      border-bottom: 1px solid ${theme.colour.border.default};
     }
   `;
 

package/lib/components/Modal/Modal.tsx

@@ -1,17 +1,11 @@
-import {
-  HTMLAttributes,
-  forwardRef,
-  memo,
-  useCallback,
-} from 'react';
+import { HTMLAttributes, forwardRef, memo, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import Blanket from '../Blanket';
 
 export const NAME = 'ucl-modal';
 
-export interface ModalProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
   centered?: boolean;
   closeOnClickOutside?: boolean;
   onClose?: () => void;
@@ -40,7 +34,7 @@ const Modal = forwardRef<Ref, ModalProps>(
       max-width: 600px;
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
       pointer-events: none;
     `;
 
@@ -61,7 +55,7 @@ const Modal = forwardRef<Ref, ModalProps>(
     const dialogStyle = css`
       position: relative;
       background-clip: padding-box;
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.surface.default};
       box-shadow: ${theme.boxShadow.x2y4};
       outline: 0;
       pointer-events: auto;
@@ -79,11 +73,7 @@ const Modal = forwardRef<Ref, ModalProps>(
     return (
       <Blanket
         className={className}
-        onClick={
-          closeOnClickOutside
-            ? handleOutsideDialogClick
-            : undefined
-        }
+        onClick={closeOnClickOutside ? handleOutsideDialogClick : undefined}
       >
         <div
           className={positioningStyle}

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

@@ -4,7 +4,7 @@ exports[`Modal > snapshot: default 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"
 >
   <div
@@ -12,7 +12,7 @@ exports[`Modal > snapshot: default 1`] = `
   >
     <div
       aira-modal="true"
-      class="css-fjo1in"
+      class="css-1py9lz2"
       data-testid="ucl-modal"
       role="dialog"
     />

package/lib/components/NativeDatepicker/NativeDatepicker.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../theme';
+import { useTheme } from '../../theme';
 import { dateToLocaleISOString } from './utils';
 import type { NativeDatepickerProps } from './NativeDatepicker.types';
 
@@ -16,13 +16,15 @@ const NativeDatepicker = ({
   ref,
   ...props
 }: NativeDatepickerProps) => {
+  const [theme] = useTheme();
+
   const baseStyle = css`
     width: 196px;
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
-    border: 1px solid ${theme.color.neutral.grey60};
-    color: #1a1a1a;
+    border: 1px solid ${theme.colour.speciality.inputDefault};
+    color: ${theme.colour.text.default};
     font-size: 16px;
     font-family: sans-serif;
     text-transform: uppercase;
@@ -34,14 +36,14 @@ const NativeDatepicker = ({
     }
 
     &::placeholder {
-      color: #8c8c8c; // TODO: Needs a design token -- Figma says 'color/text/tertiary'
+      color: ${theme.colour.text.tertiary};
     }
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    background-color: ${theme.color.neutral.white};
-    border-color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    background-color: ${theme.colour.fill.inverse};
+    border-color: ${theme.colour.border.disabled};
     cursor: not-allowed;
   `;
 

package/lib/components/Pagination/Pagination.stories.tsx

@@ -44,6 +44,15 @@ export const FewPages: Story = {
   },
 };
 
+export const Compact: Story = {
+  args: {
+    offset: 0,
+    limit: 20,
+    total: 60,
+    children: <Pagination.Controls variant='compact' />,
+  },
+};
+
 export const ItemsInfo: Story = {
   args: {
     offset: 60,