WIP themer by RomanPreslitsky · Pull Request #977 · diplodoc-platform/cli

RomanPreslitsky · 2025-01-22T16:19:33Z

Warning! Work in progress

martyanovandrey · 2025-02-03T08:09:28Z

 export const MAIN_TIMER_ID = 'Build time';
 export const YFM_CONFIG_FILENAME = '.yfm';
+export const THEME_CONFIG_FILENAME = 'theme.yaml';
+export const THEME_CSS_PATH = '_assets/style/theme.css'; // Какие есть варианты где должен быть этот файл?


давай добавим _ чтобы показать, что это не пользовательский файл _theme.css

martyanovandrey · 2025-02-03T08:11:47Z

+    }
+}
+
+function createTheme(configData: ThemeConfig): Theme {


строки 'light' и 'dark' будет лучше перенести в константы, они в этом файле часто используются

martyanovandrey · 2025-02-03T08:13:09Z

+    'note-tip-background',
+    'note-warning-background',
+    'note-important-background',
+    'hljs-addition', // нужно ли давать менять hljs переменные?


'hljs-addition', // нужно ли давать менять hljs переменные?

нет

martyanovandrey · 2025-02-03T08:22:23Z

+export interface ColorsOptions extends GravityColorsOptions, YFMColorOptions {}
+
+export const YFM_COLOR_KEYS = [
+    'note-info-background',


мало yfm цветов, пробежался по разделу "синтаксис" по доке с со сбилженной темой, нельзя поменять

цвет иконок у заметок

цвет блока кода

линии табов

фон и обводка попапов

фон у таблиц и тд

посмотри в нашей документации для каких элементов еще можно добавить изменение цвета.
Если у yfm, элемента нет своей css переменной, надо сначала ее добавить в трансформ. И убрать переопределение цвета этого элемента из components.

Для каждого элемента в yfm у которого мы меняем цвет должна быть своя переменная. Например, фон попапов --yfm-color-term-dfn-background с оригинальным цветом
https://github.com/diplodoc-platform/transform/blob/master/src/scss/_term.scss#L35

В components мы заменяем оригинальный цвет на цвета из гравити
https://github.com/diplodoc-platform/components/blob/master/src/styles/yfm.scss#L74

тут только должен быть не селектор через dfn, а замена цвет через переменную --yfm-color-term-dfn-background

и уже в клишке когда themer меняет цвет, мы меняем только цвет у переменной --yfm-color-term-dfn-background

martyanovandrey · 2025-02-03T08:24:37Z

+        light: themeProperties,
+        dark: themeProperties,
+    },
+    required: ['light', 'dark'],


'light', 'dark' не должны быть обязательными полями, мы должны иметь возможность указать цвета только для одно из этих значений. Вместе с этим, если цвета для темной и светлой темы одинаковые, должна быть возможность не дублировать их в 'light', 'dark' а указать только один раз в конфиге на верхнем уровне

martyanovandrey · 2025-02-03T08:37:43Z


            await processChangelogs();

+            await processThemer(run);


наличие конфига не должно быть обязательным, сейчас получаем ошибку если theme.yaml нет в доке

martyanovandrey · 2025-02-18T07:58:59Z

+
+import {resolve} from 'node:path';
+import {THEME_CONFIG_FILENAME, THEME_CSS_PATH} from '~/constants';
+import * as yaml from 'js-yaml';


импортировать стоит только то, что будет использоваться

import { load } from 'js-yaml';

martyanovandrey · 2025-02-18T08:15:06Z

+export function createTheme(configData: ThemeConfig): Theme {
+    const theme: Theme = {};
+
+    // if (configData['base-background']) {


этот код нужен?

martyanovandrey · 2025-02-18T08:19:17Z

+            .AfterRun.for('md')
+            .tapPromise('Themer', async (run) => {
+                if (isThemeExists(run.input)) {
+                    await run.copy(


для md прогона нам тоже нужно сгенерировать css с темой

Так же в ту же папку _assets/style?

martyanovandrey · 2025-02-18T08:24:24Z

тесты ?

martyanovandrey · 2025-02-18T08:32:39Z

не вижу обновлений в трансформе - тебе не пришлось добавить туда ни одной переменной, связанной с цветом?

и к этому ПРу нужно еще добавить ПР с докой для этой фичи

martyanovandrey · 2025-02-21T15:43:09Z

+                    colors: {
+                        'base-brand': 'rgb(94 33 41)',
+                        'base-background': 'rgb(255,255,255)',
+                        'base-brand-hover': 'var(--g-color-private-brand-650-solid)',


все эти значения нужно взять из констант, которые ты уже опеределил

martyanovandrey · 2025-02-21T15:51:03Z

+
+describe('Build themer feature', () => {
+    describe('Apply theme', () => {
+        generateMapTestTemplate('md2md with theme yaml', '__tests__/mocks/md2md-with-theme-yaml', {


давай разделим юнит тесты для самой функции генерации и снепшот тесты результата билда

martyanovandrey · 2025-02-28T08:17:16Z

+            theme: false,
+        });
+
+        test('should handle arg', "--theme 'note-info-background: rgb(40, 216, 105)'", {


через --theme должна быть возможность передать только базовый цвет --theme red, а подробная настройка должна быть через конфиг

RomanPreslitsky assigned martyanovandrey Jan 31, 2025

martyanovandrey requested changes Feb 3, 2025

View reviewed changes

3y3 force-pushed the master branch 2 times, most recently from d81a901 to 0e15f40 Compare February 3, 2025 21:29

RomanPreslitsky force-pushed the themer2 branch from 5ebbfd3 to dadb78a Compare February 5, 2025 12:15

RomanPreslitsky force-pushed the themer2 branch from 61526b7 to 238c466 Compare February 17, 2025 11:02

martyanovandrey requested changes Feb 18, 2025

View reviewed changes

RomanPreslitsky force-pushed the themer2 branch from 3de49c4 to 238c466 Compare February 18, 2025 11:19

martyanovandrey requested changes Feb 21, 2025

View reviewed changes

martyanovandrey requested changes Feb 28, 2025

View reviewed changes

RomanPreslitsky added 11 commits March 5, 2025 12:52

WIP themer

8afe259

Themer works

a5f8397

fixes

a754ce9

linted

9aac9cb

feat: add themer feature

bb7913d

chore: test for themer feature

fceeee0

feat: theme from arg and new tests

f551e5f

fix: theme from arg only for base-brand

33b552a

feat: new colors

c2e687d

fix: fix test

d795c3a

fix: linted

c7b8f6b

RomanPreslitsky force-pushed the themer2 branch from 94ff5f3 to c7b8f6b Compare March 5, 2025 09:53

RomanPreslitsky added 2 commits March 5, 2025 12:57

fix: package-lock updated

a571fdc

fix: unused var fix

b67d543

3y3 force-pushed the master branch 2 times, most recently from 46acb0a to b4bcc4d Compare March 27, 2025 09:41

3y3 force-pushed the master branch from 769751c to 3339eb3 Compare April 3, 2025 13:09

3y3 force-pushed the master branch from 92aced9 to 174e0a0 Compare June 2, 2025 10:20

3y3 force-pushed the master branch 7 times, most recently from 52f2688 to 50a4135 Compare September 15, 2025 14:36

3y3 force-pushed the master branch 16 times, most recently from 2698a95 to cfe7e59 Compare September 22, 2025 18:21

3y3 requested a review from a team as a code owner December 23, 2025 15:29

3y3 requested review from goldserg and removed request for a team December 23, 2025 15:29

3y3 force-pushed the master branch 3 times, most recently from 9ba1505 to 93079dd Compare January 23, 2026 10:29

3y3 force-pushed the master branch from 7dcb340 to ae16698 Compare February 10, 2026 10:40

Conversation

RomanPreslitsky commented Jan 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

martyanovandrey commented Feb 18, 2025

Uh oh!

martyanovandrey commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RomanPreslitsky commented Jan 22, 2025 •

edited

Loading

martyanovandrey commented Feb 18, 2025 •

edited

Loading