CSS variables and class names from base to re-use

[MykolaGolubyev]

Hello, I am adding integration to my library to pretty print types in Kotlin Notebook. I was hoping to leverage existing colors through variable names or classes so I don't have to deal with theme switching.

Specifically I am interested in ansi colors. I noticed that Kotlin Notebook already prints ansi colors when my library outputs colorful text. And that is awesome! I couldn't figure out how to debug what colors your kernel uses for that. So I went to Jupyter Labs desktop app to see what colors python kernel prints. Python kernel uses ansi-<color>-fg class names to change colors of the output.

I tried to apply the same class names but wasn't able to change colors. There is a high chance I am missing something as I have little experience with extending Notebooks.

Are there ways to use the same colors Kotlin Notebook is using to display ansi colored outputs?

[ileasile]

Hello! Thanks for trying notebooks! Can you share the notebook with the output? I only need one cell with output, just to figure out what format and MIME type it has because by now it's not clear to me what ANSI-colored text is. Is it just HTML or not? And if it is, what CSS are you using now to render it?

[MykolaGolubyev]

Attached notebook. Thank you for the quick response! testcolors.ipynb.zip

[ileasile]

I see now. So you need some color-scheme-sensitive colors for your HTML outputs. I'm not sure that it's the best solution (because I'm not the author of the corresponding subsystem), but I can suggest you one. I'll attach css files defining color variables for light and dark color schemes in notebooks' web outputs. You can use these variables in places where such sensitivity is required.

Note that for now web outputs do not reflect color scheme change, you need to reopen the editor for colors to change.

css-variables.zip

[ileasile]

Also, here are CSSs with more variables (intellij for light, darcula for dark) more-css.zip

[MykolaGolubyev]

I saw the variables you mention in kernel.css. Unfortunately there are not enough colors to define default 8 terminal colors. My constraint right now is I can't attach custom css to my integration as my initial approach is through JSON only where I define renderers by calling a function from my lib.

Is there a chance to expose variables with colors that Kotlin Notebook itself uses to render output of print("hello \u001B[34mworld of \u001B[35mcolors"). Here are all the colors I would love to use

    BLACK("\u001B[30m"),
    RED("\u001B[31m"),
    GREEN("\u001B[32m"),
    YELLOW("\u001B[33m"),
    BLUE("\u001B[34m"),
    PURPLE("\u001B[35m"),
    CYAN("\u001B[36m"),
    WHITE("\u001B[37m"),

Or is my best option to use Kotlin integration to attach custom CSS and define colors myself?

[MykolaGolubyev]

I spoke to soon, I see more colors than kernel.css. Let me try a few things. Thanks a lot! Notebook experience is awesome. Thank you for working on it

[MykolaGolubyev]

Using --md-<color> variables for now, but they are not theme specific. Will switch once I have a counterpart that is theme aware or when I will switch to Code Based integration https://github.com/testingisdocumenting/webtau/pull/1458

[ileasile]

If you have a set of CSS variables that should be defined in light and dark themes, just send me them, and I'll do it. This part of the code is unfortunately closed, so I can't suggest you file a PR

[MykolaGolubyev]

Oh wow, that would be awesome! Something like Python Jupyter notebook ansi-<color>-fg would be great. For eight standard terminal colors: black, red, green, yellow, blue, purple, cyan, white.

In most ideal case, those variable values should match the one Kotlin Notebook is using to print colored print statements.

I don't have a preference on how the variable names.

Slightly related question. If I submit PR with my library json integration file, can I point to a SNAPSHOT dependency (Maven Central) or do I need a full release one?

[ileasile]

Ok, will plan it for the next plugin release then: https://youtrack.jetbrains.com/issue/KTNB-227/Add-CSS-variables-to-use-for-ANSI-colored-text

If I submit PR with my library json integration file, can I point to a SNAPSHOT dependency?

Yes, it's ok. Just make sure it's actually resolved in the notebook