Styles

Styles are handled using styled-jsx, which Next.js supports out of the box.

Global styles

Global styles are avoided, except for essential <html> and <body> styles to establish the theme and viewport.

How to setup the global styles in pages/_app.js. stylesGlobalTheme must precede stylesGlobal.
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app'
import Head from 'next/head'

export default class CustomApp extends App {
  render() {
    const { Component, pageProps = {} } = this.props
    return (
      <>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="color-scheme" content="light dark" />
        </Head>
        <Component {...pageProps} />
        <style jsx global>
          {stylesGlobalTheme}
        </style>
        <style jsx global>
          {stylesGlobal}
        </style>
      </>
    )
  }
}

stylesGlobalTheme

Establishes the global theme by setting --daui- namespaced CSS variables at the :root. For a custom theme, either don’t use stylesGlobal and manually set every variable, or override specific variables.

How to override a specific theme variable to make interactive elements such as links red instead of blue.
<style jsx global>
  {stylesGlobalTheme}
</style>
<style jsx global>{`
  :root {
    --daui-interact-hue: 10;
  }
`}</style>

stylesGlobal

Sets essential <html> and <body> styles to establish the viewport. As it uses theme variables it must follow either stylesGlobalTheme or a custom theme.

Syntax highlighting

Prism syntax highlighting styles are provided, with accessible colors that match the global theme and automatically adjust for light and dark mode.

stylesSyntaxHighlightingPrism

For styling syntax highlighting HTML produced by Prism.

A component that styles Prism HTML in <Code>.
import { Code, stylesSyntaxHighlightingPrism } from 'device-agnostic-ui'

const CodeSyntaxHighlighted = props => (
  <>
    <Code {...props} className={stylesSyntaxHighlightingPrism.className} />
    {stylesSyntaxHighlightingPrism.styles}
  </>
)

const html = '<span class="token keyword">scalar</span> <span class="token class-name">Upload</span>'

<CodeSyntaxHighlighted dangerouslySetInnerHTML={{ __html: html }} />
scalar Upload
A component that styles Prism HTML in <Html>.
import { Html, stylesSyntaxHighlightingPrism } from 'device-agnostic-ui'

const HtmlSyntaxHighlighted = props => (
  <>
    <Html {...props} className={stylesSyntaxHighlightingPrism.className} />
    {stylesSyntaxHighlightingPrism.styles}
  </>
)

const html = `
  <h3>Example</h3>
  <pre><code><span class="token keyword">scalar</span> <span class="token class-name">Upload</span></code></pre>
`

<HtmlSyntaxHighlighted dangerouslySetInnerHTML={{ __html: html }} />

Example

scalar Upload

To avoid bundling and using 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
`