Turn on the KDS theming lint rules and move theme values out of inline styles

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Version 1.3.0 of eslint-plugin-kolibri adds two rules that enforce a convention Studio already follows. Theme values belong in a <style> block, through a CSS custom property, and not in an inline :style binding. The kolibri-format 3.0.1 upgrade turns both rules off. This issue turns them on and clears what they report.

Autofix does most of the work, which applies --write without help. It takes 213 problems in 81 files down to 10.

Complexity: Medium
Target branch: unstable

Context

These rules read theme names through kolibri-css-variables, which reads them from the Kolibri Design System. Measured against Studio's frontend with the 3.0.1 toolchain:

Rule	Before	After autofix
kolibri/vue-no-theme-accessor-in-inline-styles	155 in 63 files	10
kolibri/vue-no-theme-tokens-in-v-bind	58 in 18 files	0

The 10 that survive autofix split two ways.

Eight are template literals in the shape of `1px solid ${$themeTokens.fineLine}`. For these the rule offers a suggestion and not a fix, and kolibri-format never applies suggestions. Each one is a small hand edit.

Two have no mechanical answer:

• contentcuration/contentcuration/frontend/settings/pages/Storage/SubscriptionCard.vue:30 uses $themePalette.green.v_700.
• contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue:6 uses $themePalette.red.v_700.

The Kolibri Design System 5.10.0 emits v50 through v600 for the green and red ramps. The grey ramp goes higher. There is no --palette-green-v700 to move to. Studio uses 29 palette paths and 15 token paths in total, and these two are the only ones without a variable.

Studio already has 73 v-bind() calls in style blocks across 18 files. They survive stylelint because the new configuration sets value-keyword-case to ['lower', { ignoreFunctions: ['v-bind'] }] and because the argument is quoted, as in v-bind('$themeTokens.fineLine'). If the argument is not quoted, the stylelint autofix lowercases the expression and breaks the binding without a warning. Quote the argument of every new v-bind() added.

The Change

• The two v_700 values need a decision before the rest of the work starts. The three potential paths:
  • Move both to the nearest shade that exists, v600. That changes the color on a billing card and in the QTI editor, so it needs design sign off.
  • Keep the JavaScript accessors behind a disable comment that links a request to the Kolibri Design System for a v700 shade.
  • Make that request first and wait for it.
• The pull request description should include which path was taken and why.
• The two rules must come back on in eslint.config.mjs, with no exemption except what the v_700 decision needs.
• The eight template literal sites will need to be manually fixed, the rule suggestion will show the shape.
• RTLCSS can flip a directional property in a style block. RTLCSS cannot flip one in an inline style. Check that no directional property changed meaning in right to left layout.
• The work must not change how anything looks, apart from what the v_700 decision forces.

How to Get There

Both v_700 sites are reachable in a running development server:

• SubscriptionCard.vue is on Settings, then Storage.
• InteractionSection/index.vue is in the QTI editor. Open a channel, then edit an exercise.

Take a screenshot of each one before and after if the decision changes the shade.

Out of Scope

• kolibri/vue-no-rtl-breaking-inline-styles. It covers related ground, but kolibri-format does not enable it, and it has not been measured against Studio.
• The other rules that the kolibri-format upgrade turned off: tests-no-hardcoded-strings, vue/no-restricted-static-attribute, vue/no-bare-strings-in-template, vuejs-accessibility, and jsdoc.
• Restyling any component.

Acceptance Criteria

General

• eslint.config.mjs enables kolibri/vue-no-theme-accessor-in-inline-styles and kolibri/vue-no-theme-tokens-in-v-bind.
• pnpm run lint-frontend reports 0 problems for both rules.
• The only disable comments for these rules are the ones the v_700 decision requires, and each one explains itself.
• Every v-bind() argument added by this work is quoted.
• No raw color value entered the code. Every replacement resolves to a Kolibri Design System token or palette variable.
• The pull request records the v_700 decision and its reason.

Accessibility and i18n

• If a shade changed, text contrast at that site still meets WCAG 2.2 AA.
• Both v_700 components render correctly in right to left layout.
• No directional property moved into a style block in a way that changes right to left behavior.

Testing

• pnpm test passes.
• pre-commit run --all-files passes, and a second run changes no file.
• Settings, then Storage, and the QTI exercise editor look unchanged, or changed only as the recorded decision intends.

Testing

pnpm run lint-frontend
pre-commit run --all-files
pnpm test

Then load the application. Visit both v_700 sites in left to right and right to left layout. Open a sample of the 61 files that autofix rewrote and look for visual change.

References

• .stylelintrc.js turns csstree/validator off, so the new ignoreValue option in that rule does not apply here.

AI usage

I measured these counts myself by running the kolibri-format 3.0.1 toolchain against Studio's frontend from a scratch install. I used Claude Code to draft the issue from those results. I checked its claims about v-bind quoting and the stylelint configuration against .stylelintrc.js and the existing call sites myself.