Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#6,329 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@LianaHarris360 ci sta già lavorando.

Dal 22/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

DEV: frontend P1 - important

❌ 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.

Lingua principale
Python
Stelle
213
Fork
314
Merge medio
2g 20h
PR unite (30g)
65

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di learningequality/studio

Tutte le issue di learningequality/studio

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.