tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Design SystemのDesign Tokensについて確認してみました

気がついたらバージョン「0.9.1」が公開されていたLightning Design Systemですが、Design Tokensというのが追加されていました。(他にもサイト内が全体的に更新されていました。)

f:id:tyoshikawa1106:20150916025550p:plain


このDesign Tokensというページで開発に役立つスタイル情報を確認できるみたいです。現時点で表示されていたのは以下の情報です。

  • Background Color
  • Text Color
  • Border Color
  • Font
  • Font Size
  • Line Height
  • Spacing
  • Radius
  • Sizing
  • Shadow
  • Atmosphere
  • Time
  • Media Query
  • Z-index
  • Misc


Color関係についてはRGBで表示されていましたが、選択リストで表示形式を変更できるみたいです。
f:id:tyoshikawa1106:20150916030310p:plain


変更はこんな感じです。
f:id:tyoshikawa1106:20150916030338p:plain


Design TokensについてはDreamforce'15のPartner Keynoteでも紹介されていたので、Salesforceが力を入れてるところみたいです。(Live Streamingでなんとなく見てたので勘違いしてるところもあるかも)


Sass変数を指定して使う方法もあるのかなと試してみたのですが、ちょっとわかりませんでした。。