adobe / spectrum-tokens

Tokens used by Spectrum, Adobe's design system.

Note: for Spectrum 2 tokens, look at the beta branch and beta tagged packages on NPM.

Spectrum Tokens Monorepo

This repo uses:

• pnpm for package management
• moon to manage task running
• Changesets for automated versioning and releasing
• Prettier for code formatting/linting
• commitlint and Convetional Commits to standardize commit messages
• husky to automate formatting of committed files and linting of commit messages

Packages in this monorepo:

• Spectrum Tokens design tokens for Spectrum, Adobe's design system.
• Spectrum Token Visualizer Tool a visualizer for inspecting tokens. Published as a static site, not an NPM package.
• Spectrum Tokens Docs a static site to show the component options API and other token data.

Setup monorepo locally

1. Install pnpm using this guide.
2. Install dependencies

   pnpm i

Build all packages locally

Run build script

pnpm moon run :build

Run all tests locally

pnpm moon run :test

spectrum-tokens's Issues

Publish a version of json data with separate files for Spectrum and Express

Expected Behavior

This would be nice since no application should be switching between regular spectrum and express. Also, some implementations/platforms will only need one or the other.

Data for corner-radius-* and checkbox-* has malformed nested sets

Expected Behaviour

Nested sets should have the sets object for all defined conditionals, such as:

{
  "corner-radius-75": {
    "sets": {
      "spectrum": {
        "sets": {
          "desktop": {
            "value": "2px"
          },
          "mobile": {
            "value": "2px"
          }
        }
      },
      "express": {
        "sets": {
          "desktop": {
            "value": "3px"
          },
          "mobile": {
            "value": "4px"
          }
        }
      }
    }
  }
}

Actual Behaviour

Only one sets object was present, nested conditionals were added without an additional sets object

See https://github.com/adobe/spectrum-tokens/blob/beta/src/layout.json

Observe the following:

{
  "corner-radius-75": {
    "sets": {
      "spectrum": {
        "desktop": {
          "value": "2px"
        },
        "mobile": {
          "value": "2px"
        }
      },
      "express": {
        "desktop": {
          "value": "3px"
        },
        "mobile": {
          "value": "4px"
        }
      }
    }
  }
}

Similar errors are present in https://github.com/adobe/spectrum-tokens/blob/beta/src/component-layout.json#L65-L84

Config rename not reflected in package.json

spectrum-tokens/package.json

Line 6 in 4250036

"main": "config.js",

It looks like the config.js file was renamed but the package.json was not updated to reflect the change. This means that require.resolve is not able to find the asset in question.

Not a blocking issue; I was able to work around the issue by updating from require.resolve("@adobe/spectrum-tokens") to require.resolve("@adobe/spectrum-tokens/package.json").

Typing and/or schema validation

Is there a way to include typing information in the token json?

Internal Slack link

In this example, a variable was updated from --spectrum-font-weight-black: 900; to --spectrum-font-weight-black: black; which ended up being an invalid type when applied to the CSS font-weight property. Since that particular property was not in use, there was no way for to validate if it was going to work in CSS or not (it's a valid custom property after all, pretty much everything is). Perhaps there's a way to include typing information so we can filter/highlight potential issues automatically in future?

Add animation tokens

We should publish, at a minimum, duration tokens. We used to publish curves as well, but I'm not sure those are usable (I know Spectrum CSS never used them).

  --spectrum-animation-duration-100: 130ms;

Unnecessary dependencies coming in with spectrum-tokens package

I believe these should be devDependencies so they don't get installed in a consuming project:

spectrum-tokens/packages/tokens/package.json

Lines 32 to 38 in 6dae36c

	"dependencies": {
	"@graphql-tools/graphql-file-loader": "^8.0.0",
	"@graphql-tools/load": "^8.0.0",
	"ajv": "^8.12.0",
	"ajv-formats": "^2.1.1",
	"read-yaml-file": "^2.1.0"
	}

Typography tokens don't conform to Spectrum naming conventions

Expected Behaviour

Typography font weight tokens do not follow Spectrum token naming conventions. These typography tokens don't seem to follow the standard naming conventions.

Ex:
default-font-family should be font-family-default (context: font, consistent unit: family, clarification: default)
light-font-weight should be font-weight-light (context: font, consistent unit: weight, clarification: light)

README.md links to git.corp.adobe.com, which is accessible by Adobe employees only

Expected Behaviour

Links that are used in README.md should be linked to publicly accessible pages.

Actual Behaviour

The README points to clone from git.corp.adobe.com which is not accessible to the public!
Specifically: git clone [email protected]:Prototype/spectrum-token-visualization-tool.git

Thanks!

s2 color palette json is missing the wireframe color for Gray 300 and Gray 1000.

Expected Behaviour

Gray 300 and Gray 1000 wireframe colors are defined.

Actual Behaviour

Gray 300 and 1000 wireframe colors are missing.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Go to https://github.com/adobe/spectrum-tokens/blob/3db614647c23623cd3ee104a5841fa88fd8a7994/packages/tokens/src/color-palette.json#L182C3-L197C5 and https://github.com/adobe/spectrum-tokens/blob/3db614647c23623cd3ee104a5841fa88fd8a7994/packages/tokens/src/color-palette.json#L318C1-L333C5 and observe missing value.

Platform and Version

Src from snapshot branch.

Sample Code that illustrates the problem

Logs taken while reproducing problem

None

Add edge-to-visual-only tokens

We should publish edge-to-visual-only tokens for use when there is only a visual within a component and no text. Currently, specs assume horizontal centering, but this data is necessary for some implementations (i.e. CSS subtracts these values from the text-only padding to get the icon-only padding, as text-only is default):

.spectrum--medium {
  /* edge-to-visual-only is used for icon-only buttons */
  --spectrum-edge-to-visual-only-75: 4px;
  --spectrum-edge-to-visual-only-100: 7px;
  --spectrum-edge-to-visual-only-200: 10px;
  --spectrum-edge-to-visual-only-300: 13px;
}

.spectrum--large {
  /* edge-to-visual-only is used for icon-only buttons */
  --spectrum-edge-to-visual-only-75: 5px;
  --spectrum-edge-to-visual-only-100: 9px;
  --spectrum-edge-to-visual-only-200: 13px;
  --spectrum-edge-to-visual-only-300: 16px;
}