How to use Adobe Design tokens - Spectrum

PreviousLesson 5: Creating Responsive Layouts Next3. Javascript & The DOM

Last updated 5 years ago

Was this helpful?

How to use Adobe Design tokens - Spectrum

Official link：

My Sample

Tutorial: add a Spectrum button

1. Installing Spectrum CSS

$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page

2. Setting up global variables

<html class="spectrum spectrum--medium spectrum--light">

3. Adding Spectrum CSS

<head>
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
</head>

4. Add button

<button class="spectrum-Button spectrum-Button--cta">
  <span class="spectrum-Button-label">Button</span>
</button>

5. Final html

<html class="spectrum spectrum--light spectrum--medium">
  <head>
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
  </head>
  <body>
    <button class="spectrum-Button spectrum-Button--cta">
      <span class="spectrum-Button-label">Button</span>
    </button>
  </body>
</html>

You need to import the package in order to use the component and include in the css file declaration.

1. Install the corresponding component

npm install @spectrum-css/card@2.0.0

2. Import card css

@import "./node_modules/@spectrum-css/card/dist/index-vars.css";

<div class="content-card">
    <a href="subpage/post.html">
        <div class="spectrum-Card" tabindex="0" role="figure">
            <div class="spectrum-Card-coverPhoto"
                 style="background-image: url(img/download.jpeg)"></div>
            <div class="spectrum-Card-body">
                <div class="spectrum-Card-header">
                    <div class="spectrum-Card-title">Blog Post 1</div>
                </div>
                <div class="spectrum-Card-description">
                    <p>
                        Consulted he eagerness unfeeling deficient existence of.
                        Calling nothing end fertile for venture way boy.
                        Esteem spirit temper too say adieus who direct esteem.
                    </p>
                    <p>
                        It esteems luckily mr or picture placing drawing no.
                        Apartments frequently or motionless on reasonable projecting expression.
                        Way mrs end gave tall walk fact bed.
                    </p>
                </div>
            </div>
        </div>
    </a>
</div>

PreviousLesson 5: Creating Responsive Layouts Next3. Javascript & The DOM

Last updated 5 years ago

Was this helpful?

Official link：

My Sample

Tutorial: add a Spectrum button

1. Installing Spectrum CSS

$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page

2. Setting up global variables

<html class="spectrum spectrum--medium spectrum--light">

3. Adding Spectrum CSS

<head>
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
  <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
</head>

4. Add button

<button class="spectrum-Button spectrum-Button--cta">
  <span class="spectrum-Button-label">Button</span>
</button>

5. Final html

<html class="spectrum spectrum--light spectrum--medium">
  <head>
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
  </head>
  <body>
    <button class="spectrum-Button spectrum-Button--cta">
      <span class="spectrum-Button-label">Button</span>
    </button>
  </body>
</html>

You need to import the package in order to use the component and include in the css file declaration.

1. Install the corresponding component

npm install @spectrum-css/card@2.0.0

2. Import card css

@import "./node_modules/@spectrum-css/card/dist/index-vars.css";

<div class="content-card">
    <a href="subpage/post.html">
        <div class="spectrum-Card" tabindex="0" role="figure">
            <div class="spectrum-Card-coverPhoto"
                 style="background-image: url(img/download.jpeg)"></div>
            <div class="spectrum-Card-body">
                <div class="spectrum-Card-header">
                    <div class="spectrum-Card-title">Blog Post 1</div>
                </div>
                <div class="spectrum-Card-description">
                    <p>
                        Consulted he eagerness unfeeling deficient existence of.
                        Calling nothing end fertile for venture way boy.
                        Esteem spirit temper too say adieus who direct esteem.
                    </p>
                    <p>
                        It esteems luckily mr or picture placing drawing no.
                        Apartments frequently or motionless on reasonable projecting expression.
                        Way mrs end gave tall walk fact bed.
                    </p>
                </div>
            </div>
        </div>
    </a>
</div>