Core

The <Core /> component provides some font-smoothing, applies the current theme via CSS variables and allows for a global link override.

<Core>
  <YourApp>
</Core>

All standard style tokens are available to import from the @eds/core package, and can then be used in your CSS:

import { backgroundColor, color } from '@eds/core';

const Component = () => {
  return (
    <Box className={css({ backgroundColor: backgroundColor.neutral, color: color.critical })}>
      Important information
    </Box>
  );
};

Components that expose props that match tokens – e.g. the backgroundColor prop on the <Box /> component – can use tokens by name rather than importing them:

const Component = () => {
  return (
    <Box backgroundColor="neutral" color="critical">
      Important information
    </Box>
  );
};

The following tokens are available:

• backgroundColor
• borderColor
• borderWidth
• color
• themePalette
• focusRing
• fontFamily
• fontSize
• fontWeight
• headingSize
• iconSize
• lineHeight
• borderRadius
• boxShadow
• space
• zIndex
• inputSize

There are two supported theming methods.

• Automated theming: A primary and accent colour is provided and a theme palette is automatically generated, with fully accessible colours being used throughout themed components.
• TMS theming: The existing theming used by TMS where clients can specify exact colours for some components.

In both methods a theming palette is automatically generated from two colours, a primary colour and an accent colour, but in TMS theming some component themes are overwritten by the TMS settings.

The theme palette colours are stored as CSS variables so the values can be changed dynamically if required. They can be accessed with the themePalette token.

All theme tokens including the palette and component theme tokens are available with the theme token.

The useTheme hook provides two methods to apply the theme for each theming method.

• setAutomatedTheme accepts two brand colours, themePrimary and themeAccent, and autogenerates the theme.
• setTMSTheme accepts TMS theme values in the structure of the /user-ui-preference/theme API.

To prevent un-themed components from being rendered, the useTheme hook also provides a themeLoaded variable that will update once the theme has been loaded.

// Automated theme example where the theme is not loaded async
const AutomatedTheme = () => {
  const { setAutomatedTheme, themeLoaded } = useTheme();

  // Set the ELMO colour palette
  setAutomatedTheme({
    themePrimary: '#0160AE',
    themeAccent: '#EE2925',
  });

  // Prevent the menu from flashing with the default theme
  if (!themeLoaded) {
    return <LoadingSpinner />;
  }

  // Theme has loaded, display the menu with the correct colours
  return <Menu />;
};

// TMS theme example where the theme is loaded async
const TMSTheme = () => {
  const { setTMSTheme, themeLoaded } = useTheme();
  // Get the userPreferences data from TMS
  const { data: userPreferences } = useQuery('/user-ui-preference/theme', fetchJson('/user-ui-preference/theme'));

  useEffect(() => {
    if (userPreferences) {
      setTMSTheme(userPreferences);
    }
  }, [userPreferences, setTMSTheme]);

  // Prevent the menu from flashing with the default theme
  if (!themeLoaded) {
    return <LoadingSpinner />;
  }

  // Theme has loaded, display the menu with the correct colours
  return <Menu />;
};

To globally override the EDS <Link /> component with a custom link that integrates with your chosen framework (e.g. the NextJS Link component or the React Router Link component), you can pass a custom component to the linkComponent prop.

The EDS <Link /> component provides an <a> as a child with all desired styles, so you can simply pass children through.

import Link as NextLink from 'next/link';

const GlobalLinkOverride = ({ children, ...props }) => (
  <NextLink passHref {...props}>
    {children}
  </NextLink>
)

return (
  <Core linkComponent={GlobalLinkOverride}>
    <YourApp />
  </Core>
)

For styling consistency, a <LinkText /> component is also exported from @eds/link. By setting this link text as the child of React Router's Link, a span will be rendered, applying all of the desired styles.

import { Link as ReactRouterLink } from 'react-router-dom';

const GlobalLinkOverride = ({ label, standalone, tone, fontSize, ...props }) => (
  <ReactRouterLink to={href} {...props}>
    <LinkText {...{ label, standalone, tone, fontSize }} />
  </ReactRouterLink>
);

return (
  <Core linkComponent={GlobalLinkOverride}>
    <YourApp />
  </Core>
);