uikit-react-public 0.37.2 → 0.38.1

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

@@ -44,27 +44,28 @@ const DatepickerInput = ({
     height: 100%;
     padding: 0 0 0 16px;
     border: none;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
+    background-color: ${theme.colour.fill.inverse};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
     letter-spacing: 1px;
-    caret-color: ${theme.color.text.primary};
+    caret-color: ${theme.colour.text.default};
 
     &:focus {
       outline: none;
     }
 
     &::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};
+    color: ${theme.colour.text.disabled};
+    background-color: ${theme.colour.fill.inverse};
 
     &::placeholder {
-      color: ${theme.color.text.disabled};
+      color: ${theme.colour.text.disabled};
     }
   `;
 

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

@@ -1,36 +1,18 @@
-import { css, cx } from '@emotion/css';
-
 interface PanelProps {
-  zIndex?: number;
   children: React.ReactNode;
 }
 
 const NAME = 'ucl-uikit-datepicker__panel';
 
-const Panel = ({
-  zIndex = 10,
-  children,
-}: PanelProps) => {
-
-  const datepickerHeight = 48;
-  const gapFromDatepicker = 8;
-
-  const baseStyle = css`
-    position: absolute;
-    top: ${datepickerHeight + gapFromDatepicker}px;
-    z-index: ${zIndex};
-  `;
-
-  const style = cx(NAME, baseStyle);
-
+const Panel = ({ children }: PanelProps) => {
   return (
     <div
       data-testid={NAME}
-      className={style}
+      className={NAME}
     >
       {children}
     </div>
   );
-}
+};
 
 export default Panel;

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

@@ -43,8 +43,8 @@ const VisibleField = ({
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    border: 1px solid ${theme.color.neutral.grey60};
-    background-color: ${theme.color.neutral.white};
+    border: 1px solid ${theme.colour.speciality.inputDefault};
+    background-color: ${theme.colour.fill.inverse};
 
     &:focus-within {
       box-shadow: ${theme.boxShadow.focus};
@@ -52,9 +52,9 @@ const VisibleField = ({
   `;
 
   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;
     // And child elements
@@ -88,9 +88,7 @@ const VisibleField = ({
   // TODO: This ought to be fixed in the <Icon> component itself.
   const iconStyle = css`
     min-width: 24px;
-    color: ${disabled
-      ? theme.color.text.disabled
-      : '#8C8C8C'}; // TODO: Needs a design token
+    color: ${disabled ? theme.colour.icon.disabled : theme.colour.icon.tertiary};
   `;
 
   // Determine which icon to show

package/lib/components/Dialog/BaseDialog.tsx

@@ -177,8 +177,8 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
     const baseStyle = css`
       padding: 0;
       border: none;
-      background: ${theme.color.neutral.white};
-      color: ${theme.color.text.primary};
+      background: ${theme.colour.surface.default};
+      color: ${theme.colour.text.default};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
       width: 100vw;
@@ -202,7 +202,7 @@ const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
       }
 
       &::backdrop {
-        background-color: ${theme.color.overlay.blanket};
+        background-color: ${theme.colour.surface.backdrop};
       }
     `;
 

package/lib/components/Divider/Divider.tsx

@@ -5,8 +5,10 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-divider';
 
-export interface DividerBaseProps
-  extends Omit<HTMLAttributes<HTMLHRElement>, 'children'> {
+export interface DividerBaseProps extends Omit<
+  HTMLAttributes<HTMLHRElement>,
+  'children'
+> {
   testId?: string;
 }
 
@@ -19,7 +21,7 @@ const Divider = ({ testId = NAME, className, ...props }: DividerProps) => {
     margin: 0;
     height: 1px;
     border: none;
-    background-color: ${theme.color.neutral.grey20};
+    background-color: ${theme.colour.border.default};
   `;
 
   const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);

package/lib/components/FileInput/FileInput.tsx

@@ -23,7 +23,7 @@ const FileInput = ({
   const baseStyle = css`
     font-size: ${theme.font.size.f16};
     font-family: ${theme.font.family.primary};
-    color: ${theme.color.link.default};
+    color: ${theme.colour.link.default};
   `;
 
   const hiddenInputContainerStyle = css`

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

@@ -2,7 +2,7 @@
 
 exports[`Input > snapshot: no props 1`] = `
 <div
-  class="ucl-uikit-fileinput css-r56yy"
+  class="ucl-uikit-fileinput css-1ubxuij"
 >
   <label
     class="css-1lc9iag"
@@ -39,7 +39,7 @@ exports[`Input > snapshot: no props 1`] = `
 
 exports[`Input > snapshot: value prop 1`] = `
 <div
-  class="ucl-uikit-fileinput css-r56yy"
+  class="ucl-uikit-fileinput css-1ubxuij"
 >
   <label
     class="css-1lc9iag"

package/lib/components/Footer/Footer.tsx

@@ -34,8 +34,8 @@ const Footer = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    background-color: ${theme.color.neutral.grey90};
-    color: ${theme.color.text.inverted};
+    background-color: ${theme.colour.surface.inverseBrandPrimary};
+    color: ${theme.colour.text.brandInverse};
     font-family: ${theme.font.family.primary};
     font-weight: 300;
     padding: ${theme.padding.p40} 0 ${theme.padding.p40};
@@ -70,7 +70,7 @@ const Footer = ({
 
   const uclLogoStyle = css`
     height: 32px;
-    color: ${theme.color.neutral.grey90};
+    color: ${theme.colour.icon.brandInverse};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       margin-right: auto;
@@ -91,7 +91,7 @@ const Footer = ({
 
   const contactInfoAndCopyrightStyle = css`
     padding: ${theme.padding.p12} 0;
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.brandInverseSecondary};
     display: flex;
     flex-direction: column;
     font-size: ${theme.font.size.f14};
@@ -151,7 +151,7 @@ const Footer = ({
     margin-bottom: ${theme.margin.m8};
     margin-right: ${theme.margin.m32};
     text-decoration: none;
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.link.inverseSecondary};
     transition: color 0.2s ease-out;
 
     &:focus-visible {
@@ -206,48 +206,48 @@ const Footer = ({
           <a
             className={legalLinkStyle}
             href={disclaimer}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Disclaimer
           </a>
           <a
             className={legalLinkStyle}
             href={freedomOfInformation}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Freedom of Information
           </a>
           <a
             className={legalLinkStyle}
             href={accessibility}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Accessibility
           </a>
           <a
             className={legalLinkStyle}
             href={cookies}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Cookies
           </a>
           <a
             className={legalLinkStyle}
             href={privacy}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Privacy
           </a>
           <a
             className={legalLinkStyle}
             href={slaveryStatement}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Slavery statement
           </a>

package/lib/components/Footer/FooterNavLink.tsx

@@ -21,7 +21,7 @@ const FooterNavLink = ({
   const baseStyle = css`
     margin: ${theme.margin.m8} 0;
     text-decoration: none;
-    color: ${theme.color.text.inverted};
+    color: ${theme.colour.text.brandInverse};
     transition: color 0.2s ease-out;
 
     &:focus-visible {
@@ -30,12 +30,12 @@ const FooterNavLink = ({
     }
 
     &:visited {
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.brandInverse};
     }
 
     &:hover {
       text-decoration: underline;
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.brandInverse};
     }
   `;
 

package/lib/components/Footer/SocialLink.tsx

@@ -49,7 +49,7 @@ const SocialLink = ({
     height: ${theme.height.h24};
     border-radius: ${theme.radius.r8};
     margin-left: ${theme.margin.m12};
-    color: ${theme.color.text.inverted};
+    color: ${theme.colour.icon.brandInverse};
     transition: color 0.2s ease-out;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
@@ -58,7 +58,7 @@ const SocialLink = ({
 
     &:visited,
     &:active {
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.icon.brandInverse};
     }
 
     &:focus-visible {
@@ -67,7 +67,7 @@ const SocialLink = ({
     }
 
     &:hover {
-      color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.icon.brandInverseSecondaryHover};
     }
   `;