`musea/prefer-design-tokens`

登録した design token に一致する直接指定値を CSS 変数で表現します。

既定の重大度: warning
プリセット: none
自動修正: なし。修正内容を確認してください
適用範囲: Musea の .art.vue ファイルの art / variant / style
オプション: 型付きオプションと既定値を参照してください。

.art.vue ファイルと下記の token 一覧が必要です。任意の色から token を推測するルールではありません。

設定（Vite+）

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "musea/prefer-design-tokens": "warn"
      },
      "ruleOptions": {
        "musea/prefer-design-tokens": {
          "tokens": [
            {
              "path": "color.primary",
              "value": "#3b82f6",
              "tier": "semantic"
            }
          ]
        }
      }
    },
  },
});

vp run lint

悪い

art の例で、設定した primary のデザイントークンではなく、青の色を直接指定しています。

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: #3b82f6;
}
</style>

良い

この例で設定する --color-primary のトークンを参照します。

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: var(--color-primary);
}
</style>

良い例は上記の設定でこのルールの検出を避ける例です。他のルールでは検出される場合があります。

実装 · 全ルール