@salesforce-ux/wes-foundation NPM

`@salesforce-ux/wes-foundation`

About

A set of foundations supporting the WES Subsystem at Salesforce. wes-foundation package contains the foundational styles which includes Typography, Font Face, Utilities

Getting Started

Let's start by installing wes-foundation as a dependency of your project with npm.

npm i @salesforce-ux/wes-foundation

Distributable

`wes-foundation` Integration

Dependency Inclusion

wes-styling-hooks is a styling dependency for wes-foundation. Hence, this needs to be embedded into your web app in order to make the wes-foundation work properly.

There are different ways wes-styling-hooks can be embedded. Please checkout the wes-styling-hooks Integration Guide to learn more.

Add `wes-foundation`

There are different ways to include wes-foundation to a web application depending on the requirement. If you are using the Salesforce Experience Cloud platform, WES is supported through an Unlocked Package, see the Confluence page for the WES Unlocked Package. It can be used in both light DOM and shadow DOM. Below are the styles to include the package -

Add WES Foundation in HTML

You can use the HTML <link> to link to WES Foundation as an external resource.

<html>
  <head>
    <!-- Dependencies go here -->
    <link rel="stylesheet" href="...">
    
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/wes-foundation/dist/index.css">
    <!-- Your application's stylesheets go below -->
    <link rel="stylesheet" href="...">
  </head>
  <body>
    <!-- Your application -->
  </body>
</html>

Add WES Foundation in CSS

You can use CSS @imports to pull in WES Foundation.

@import "@salesforce-ux/wes-foundation/dist/index.css";

Add WES Foundation in JS

You can use JS import to pull in WES Foundation directly in the JS file.

import "@salesforce-ux/wes-foundation/dist/index.css";

Example

Below are a few examples of Typography which is part of wes-foundation

HTML

<html>
  <head>
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/wes-styling-hooks/dist/hooks.custom-props.css">
    <link rel="stylesheet" href="/node_modules/@salesforce-ux/wes-foundation/dist/index.css">
    <!-- Your application's stylesheets go below -->
    <link rel="stylesheet" href="...">
  </head>
  <body>
    <h1 type-style="display-1">Title display-1</h1>
    <div type-style="body-1"><p type-style="code">Text body-1 code</p></div>
  </body>
</html>