Applying Styles

You can refer to the Foundations section to understand how is the tokens definition. You can use them in your app as CSS Variables which are defined in the theme, as mentioned in the Theme guide.

Importing CSS

Shoreline provides several CSS exports that you can import into your application. The simplest way is to import the complete stylesheet:

import '@vtex/shoreline/css'

This imports all styles including tokens, reset, base, and components styles with cascade layers.

Individual Stylesheets

You can also import individual stylesheets for more granular control:

// Import complete stylesheet (layered)
import '@vtex/shoreline/css'
 
// Or unlayered version
import '@vtex/shoreline/css/unlayered'

// Import individual stylesheets (layered)
import '@vtex/shoreline/css/tokens'
import '@vtex/shoreline/css/reset'
import '@vtex/shoreline/css/base'
import '@vtex/shoreline/css/components'
 
// Or unlayered versions
import '@vtex/shoreline/css/tokens/unlayered'
import '@vtex/shoreline/css/reset/unlayered'
import '@vtex/shoreline/css/base/unlayered'
import '@vtex/shoreline/css/components/unlayered'

Available CSS Exports

Note: Layered stylesheets use CSS cascade layers for better style organization and control. Unlayered versions are available for environments that don’t support cascade layers.

The way you will apply the styles in your application depends on the tooling you are using. In the following example we will show how to apply styles using CSS and html style property.

1. Check the Design Tokens page to find the token you want to use. For example, the $space-1 token.
2. Use the token in your application using the style property.

import '@vtex/shoreline-theme-sunrise/css'
 
function Example() {
  return (
    <div style={{ padding: 'var(--sl-space-2)' }}>Example</div>
  )
}

3. You can also use the token in your CSS files.

[data-example] {
  padding: var(--sl-space-2);
}

import '@vtex/shoreline-theme-sunrise/css'
import './usage.css'
 
function Example() {
  return (
    <div data-example>Example</div>
  )
}