Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#6,329 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@LianaHarris360 ya está trabajando en esto.

Desde el 22/10/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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.

Lenguaje dominante
Python
Estrellas
213
Forks
314
Merge medio
2 d 20 h
PR fusionados (30 d)
65

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de learningequality/studio

Todos los issues de learningequality/studio

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.