OSS探訪
GitHubでログイン
GitHubで見るプロジェクトサイト

Adobe Spectrumをdesign tokenと個別versioned CSS componentで実装する

OSS規模スコア 未算出OSS健全度 100
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
1,290
主要言語
CSS
ライセンス
Apache-2.0
リポジトリ最終更新
2026/10/04
ページ内ナビ

概要

Spectrum CSSはAdobe Spectrum design languageの標準CSS実装です。design tokenをCSS custom propertiesとして供給し、button・page・typography等を独立したnpm packageとして必要な分だけ組み合わせます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

componentを個別packageとして必要な分だけ導入する

button、page、typography等は独立versionの@spectrum-css/* packageとして配布され、必要なcomponentとpeer dependencyだけをinstallできます。

出典：[1][6][5]

design tokenとCSS custom propertiesでtheme・scaleを切り替える

@spectrum-css/tokensがSpectrum tokenをCSS custom propertiesとして提供し、visual language、color theme、scaleに応じたstyleを構成できます。

出典：[1][4]

JavaScript frameworkに依存しないCSS layerとして利用する

Spectrum CSSはCSS-onlyで、ReactやWeb Components等の上位component implementationからも利用できるframework-agnosticなstyle layerです。

出典：[1]

向いている用途

Spectrum準拠のbrand/UIを複数frontend stackで共有したい場合に向く

同じtokenとcomponent CSSを異なるapplication stackで共有し、Adobe Spectrumのvisual languageへ揃えたい場合に適します。

出典：[1]

導入前の確認

interactionはCSSで表現できる範囲に限定される

READMEはSpectrum CSSがCSS-onlyであることを明記しています。複雑なinteractive componentにはSpectrum Web ComponentsやReact Spectrum、またはapplication側のlogicが必要です。

出典：[1]

repo全体では単一versionではなく、monorepo開発はNode 20.20以上を要求する

componentは個別version管理です。current mainのroot packageはNode.js >=20.20.0を要求しますが、tokens/page/button package自体にはengines fieldがありません。

出典：[3][4][6][5]

参考にした公式資料

  1. [1]Spectrum CSS README(2026-10-05)
  2. [2]Spectrum CSS quick start(2026-10-05)
  3. [3]Spectrum CSS monorepo package metadata(2026-10-05)
  4. [4]@spectrum-css/tokens package metadata(2026-10-05)
  5. [5]@spectrum-css/page package metadata(2026-10-05)
  6. [6]@spectrum-css/button package metadata(2026-10-05)
  7. [7]Spectrum CSS Apache-2.0 license(2026-10-05)
編集部からの補足

Spectrum CSSはmonorepo全体で単一versionを持たず、component packageを個別versionで公開します。現在のmainではtokens 16.0.2、page 9.2.0、button 14.2.0です。CSS-onlyなのでinteractionはapplication側またはSpectrum Web Components/React Spectrum等が担います。

3ステップで試す

  1. 1

    Spectrum CSSの最小component構成を導入する

    current package metadataに合わせ、tokens・page・buttonを互換versionで固定します。

    demo=$(mktemp -d "${TMPDIR:-/tmp}/spectrum-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @spectrum-css/tokens@16.0.2 @spectrum-css/page@9.2.0 @spectrum-css/button@14.2.0
  2. 2

    tokenとbutton CSSを読み込むHTMLを作る

    Spectrum token、page context、button componentを読み込む公式Quick Startに沿った最小例を作ります。

    printf "%s\n" '<!doctype html>' '<html class="spectrum spectrum--light spectrum--medium">' '<head><link rel="stylesheet" href="./node_modules/@spectrum-css/tokens/dist/css/index.css"><link rel="stylesheet" href="./node_modules/@spectrum-css/page/dist/index.css"><link rel="stylesheet" href="./node_modules/@spectrum-css/button/dist/index.css"></head>' '<body><button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"><span class="spectrum-Button-label">Button</span></button></body></html>' > index.html
  3. 3

    tokenとbutton classがpackageに含まれることを確認する

    design token CSS custom propertiesとbutton variant classが配布artifactへ含まれることを確認します。

    grep -q -- "--spectrum-" node_modules/@spectrum-css/tokens/dist/css/index.css && grep -q "spectrum-Button--accent" node_modules/@spectrum-css/button/dist/index.css
公式READMEで確認

成長

成長の推移 · 直近30日

1,290 Stars

推移データを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • css
  • design-system
Stars
1,290
Forks
214
Watchers
46
Open Issues
19
所有者種別
Organization
主要言語
CSS
ライセンス
Apache-2.0
リポジトリ最終更新
2026/10/04
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？