`musea/prefer-design-tokens`

Prefer design token CSS variables over hardcoded primitive values

Default severity: warning
Presets: none
Automatic fix: None; review the suggested change
Applies to: Musea .art.vue art, variant, and style blocks
Options: See typed options and defaults.

Requires an .art.vue file and the token inventory shown below. It does not infer a token from an arbitrary color.

Configuration (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

Bad

The art example uses the literal blue color instead of the configured primary design token.

Button.art.vue

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

Good

The style refers to --color-primary, the token configured for this example.

Button.art.vue

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

Good avoids this rule's finding under the configuration above; other rules may still report diagnostics.

Implementation · All rules