Styles

Theme, global, component, and syntax highlighting styles are published in vanilla CSS files that must be manually loaded in your app, as necessary.

Out of the box, Next.js supports importing CSS files within React component modules.

Theme styles

The first styles to load in your app should establish the global theme by setting the --daui- namespaced CSS variables at the :root.

Default theme

Import the default theme styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/theme.css';

Custom theme

For a custom theme, either load the default theme and then override specific theme CSS variables, or manually set all of the theme CSS variables from scratch.

CSS that overrides a specific default theme variable to make interactive elements such as links red instead of blue.
:root {
  --daui-interact-hue: 10;
}

Global styles

After the theme styles, load the essential <html> and <body> global styles to establish the app viewport and typography.

Import the global styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/global.css';

Component styles

After the theme and global styles, load the styles for the components used in your app.

Import necessary component styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Blockquote.css';
import 'device-agnostic-ui/public/components/Button.css';
import 'device-agnostic-ui/public/components/ButtonSubmit.css';
import 'device-agnostic-ui/public/components/Code.css';
import 'device-agnostic-ui/public/components/Fieldset.css';
import 'device-agnostic-ui/public/components/Heading.css';
import 'device-agnostic-ui/public/components/Html.css';
import 'device-agnostic-ui/public/components/Icon.css';
import 'device-agnostic-ui/public/components/LinkCard.css';
import 'device-agnostic-ui/public/components/LinkNav.css';
import 'device-agnostic-ui/public/components/LinkText.css';
import 'device-agnostic-ui/public/components/List.css';
import 'device-agnostic-ui/public/components/Loading.css';
import 'device-agnostic-ui/public/components/Margin.css';
import 'device-agnostic-ui/public/components/Nav.css';
import 'device-agnostic-ui/public/components/Para.css';
import 'device-agnostic-ui/public/components/Picture.css';
import 'device-agnostic-ui/public/components/Pre.css';
import 'device-agnostic-ui/public/components/Scroll.css';
import 'device-agnostic-ui/public/components/Select.css';
import 'device-agnostic-ui/public/components/Table.css';
import 'device-agnostic-ui/public/components/Textbox.css';
import 'device-agnostic-ui/public/components/Toggle.css';

HTML element class names within components are daui- namespaced and follow the BEM naming convention. These are private implementation details that may change in semver non major releases and shouldn’t be used by app code.

Most of the components can be customized via id, className, and style props.

Syntax highlighting styles

HTML produced by a syntax highlighter that has processed code can be styled with colors that are accessible, match the global theme, and adapt for light and dark mode.

Prism syntax highlighting

After the theme styles, load the Prism syntax highlighting styles.

Import the Prism syntax highlighting styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/syntax-highlighting-prism.css';

Use the daui--syntax-highlighting-prism class name on a <code> element, or any of its ancestors.

Styling Prism HTML in <Code>.
import { Code } from 'device-agnostic-ui';

const result = (
  <Code
    className="daui--syntax-highlighting-prism"
    dangerouslySetInnerHTML={{
      __html:
        '<span class="token keyword">scalar</span> <span class="token class-name">Upload</span>',
    }}
  />
);
scalar Upload
Styling Prism HTML in <Html>.
import { Html } from 'device-agnostic-ui';

const result = (
  <Html
    className="daui--syntax-highlighting-prism"
    dangerouslySetInnerHTML={{
      __html:
        '<h3>Example</h3><pre><code><span class="token keyword">scalar</span> <span class="token class-name">Upload</span></code></pre>'
    }}
  />
);

Example

scalar Upload

To avoid using and bundling prismjs, babel-plugin-syntax-highlight can be used to transform the code contents of template literals lead by comments specifying a Prism language into syntax highlighting HTML. This is how code examples at this site are done.

How to create a Prism HTML string via babel-plugin-syntax-highlight.
const html = /* syntax-highlight graphql */ `
  scalar Upload
`;