maxdenaro / inspect-styles-feedback Goto Github PK

I use a Figma web version in the dark mode. The text color is black on the dark background, and the elements' positions are wrong. I made the size of the style window maximum available, but it didn't help.
Browser - opera last version
OS - Ubuntu 18.04

В linear-gradient не учитывается прозрачность.
На данный момент на одном из макетов перестал отображаться градиент.

Ранее выводилось следующее:
background: linear-gradient(90deg, #304059 0%, #354153 66.67%)
вместо
background: linear-gradient(90deg, rgba(48, 64, 89, 0.84) 0%, rgba(53, 65, 83, 0.00) 66.67%)

Ранее отображалось:

Отображение в девмод:

Возможно исправить?

При выборе текста перестали отображаться стили

Возможно исправить?

В стилях для svg не учитывается выбранный препроцессор. У меня выбран sass, но ; все равно есть

В фигма выбран Mode: Dark.
Исходный цвет: #fff
Цвет Dark: #353535

:root не меняется (не дублируется как: [data-theme="dark"])
https://i.imgur.com/xlt0SYy.png

Вариант реализации:
Цвета (переменные):

:root {
    --example: #353535;
}

Раскрыть темы

Как включить смену темы (и условная ссылка на простейший гайд)

[data-theme="dark"] {
    --example: #353535;
}

Значения border и border-radius правильнее было бы выводить после background в разделе эффекты https://skr.sh/sOCl5H7Pqaz

плагин не показивает параметри виделенного текста, такие как: Line-height, Font-size, Font-weight, etc

Было бы удобно, если бы выделенный текст после окончания выделения автоматически помещался в буфер обмена. Например, https://skr.sh/sOWOqCkJkww если я три раза нажал на строку с color и она автоматически выделилась и в конце сразу скопировалась. Такое в avocode раньше было, если помните)

Думаю реализовать это несложно

В процессе работы многие работают с интерактивностью.
Если есть возможность, добавить информацию об этом в Isnpect Styles

Если нажимать на этот блок, то копируется код:

// While hovering
// Change to: "Filled, hovered, Show Icon=False";
// Animate: Smart animate;
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
animation-duration: 200ms;

// While pressing
// Change to: "Filled, pressed, Show Icon=False";
// Animate: Smart animate;
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
animation-duration: 200ms;

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

Если к переменной цвета присвоить цвет другой переменной, то плагин сломается

Если выбрать расположение элемента wrap (справа, там также есть горизонтальное и вертикальное расположение), то будет показывать стили в формате svg

При клике не элемент с градиентной заливной данные отображаются только вот так
background: linear-gradient(90deg, );
Нет отображения значений цветов, прозрачности, положения.

Как в dev mode
https://i.imgur.com/AqszvQ7.png

при генерации переменных нужно убрать символ решетки
также убрать из свойств стилей

https://prnt.sc/T3HY5DFnmW-k
https://prnt.sc/JuxPXsiwF9nI
https://prnt.sc/0XchMDkbl7IU

В linear-gradient не учитывается прозрачность. В этом примере выводит background: linear-gradient(270deg, #9c2c34 7.54%, #75160f 94.69%) вместо background: linear-gradient(270deg, rgba(#9c2c34, .12) 7.54%, rgba(#75160f, .12) 94.69%) Можно это исправить? Проблема не только в одном месте, в разных макетах проверял