Modes | Foundations

Modes utilize alternate values in SWAN tokens to adjust the appearance of UI. Modes cascade through to all tokens and components used within the mode. SWAN currently supports three modes: Standard mode (default), Dark mode, and Compact mode.

Standard mode

The default mode used when no other modes are specified. Use for standard e-commerce experiences, landing pages, and blog posts. Examples may include Homepage, Category page, and Gallery.

Dark mode

Provides a reversed appearance of color in the UI, enabling components to be accessible on darker backgrounds.

Dark mode has been designed to be used in sections of the UI as opposed to entire pages or experiences.

Most semantic colors have differing values in each mode to provide appropriate contrast against the background. Provided you're using semantic colors, these values will change automatically depending on the mode being used.

Enable Dark mode via the core prop darkMode.

Compact mode

Compact mode reduces the scale of typography and space tokens to allow more information and actions to be shown. Unlike Standard mode, Compact mode has no media values, which means it has a consistent size across all breakpoints.

Compact mode has been designed to use at the page-level rather than for individual components or sections of a page.

Use for workspace-type experiences. Examples may include Studio, Logomaker, and the Collaboration app. It also may be a candidate for internal Vista tools where content density is important.

Enable Compact mode via the core prop compactMode.

Note: When nesting Dark mode inside Compact mode, Compact mode must be re-set. This is a known issue that we will address in a future version.

Using modes

Developers

Modes can be activated through their respective core prop, e.g. darkMode. Different modes can be used together as needed, e.g. darkMode and compactMode. Modes can also be nested. To reset to the default token values, standardMode can be applied to overwrite all other modes.

<Card bordered>
  <p>Top level standard mode</p>
  <Card bordered darkMode bgc="black">
    <p>Nested level dark mode</p>
    <Card bordered standardMode>
      <p>Cascaded nested level standard mode</p>
      <p>
        Adding the standardMode prop will reset all modes to standard (the
        default) e.g. this would override darkMode
      </p>
      <Card backgroundColor="holiday-green-1">
        Still standard mode, but with a bgc
        <Box darkMode>
          I am a dark mode Box without setting a background color
        </Box>
      </Card>
      <Card>
        <Button>Standard mode button</Button>

        <Box>
          <DiscountPrice fontSize="standard">You saved $12.34!</DiscountPrice>
        </Box>
      </Card>
      <Card bgc="black">
        <Button darkMode>Dark mode button</Button>
      </Card>
    </Card>
  </Card>
</Card>

<Card bordered>
  <p>Top level standard mode</p>
  <Card bordered darkMode bgc="black">
    <p>Nested level dark mode</p>
    <Card bordered standardMode>
      <p>Cascaded nested level standard mode</p>
      <p>
        Adding the standardMode prop will reset all modes to standard (the
        default) e.g. this would override darkMode
      </p>
      <Card backgroundColor="holiday-green-1">
        Still standard mode, but with a bgc
        <Box darkMode>
          I am a dark mode Box without setting a background color
        </Box>
      </Card>
      <Card>
        <Button>Standard mode button</Button>

        <Box>
          <DiscountPrice fontSize="standard">You saved $12.34!</DiscountPrice>
        </Box>
      </Card>
      <Card bgc="black">
        <Button darkMode>Dark mode button</Button>
      </Card>
    </Card>
  </Card>
</Card>

Designers

In Figma, modes are provided via variables in the SWAN UI Kit. They can be applied via the Layers panel—select a top-level frame, and choose the mode you wish to apply.