Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#6,329 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@LianaHarris360 đang làm issue này rồi.

Từ ngày 22/10/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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.

Ngôn ngữ chính
Python
Star
213
Fork
314
Merge trung bình
2 ngày 20 giờ
Pull request đã merge (30 ngày)
65

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của learningequality/studio

Tất cả issue của learningequality/studio

Issue tương tự

Thêm issue về Python

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.