Jenkins (part 2)

[UCyborg]

Continuing from locked Jenkins topic.

Couple of updates later, background on login page works now. But there is still a problem with buttons, input fields and checkboxes that end up pretty much invisible. In theory, removing jenkins-input, jenkins-button and jenkins-checkbox classes from respective elements would restore stock appearance. But that involves hacking the HTML.

Curious what still goes wrong given the lacks of apparent exclamation marks in inspector.

And also, am I the only Pale Moon user who also uses Jenkins in some capacity?

[adoxa]

oklch(from ...) is not supported, so most colors still aren't defined properly. Here's a userstyle (you'll have to adapt the domain for your local copy) that at least makes the login look better.

Code: Select all

/* ==UserStyle==
@name         Jenkins
@namespace    adoxa
@version      1.0.0
@description  Replace some oklch(from var...)
@author       adoxa
==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ci.jenkins.io") {
    :root {
        --black: oklch(5% 0.075 256.91deg) !important;
        --secondary: oklch(60% 0.075 256.91deg) !important;
    }
    .jenkins-button--primary {
        --accent: 55% 0.2308 256.91deg;
        --button-background: oklch(var(--accent)) !important;
        --button-background--hover: oklch(var(--accent) / 0.9) !important;
        --button-background--active: oklch(var(--accent) / 0.8) !important;
        --button-box-shadow--focus: oklch(var(--accent) / 0.4) !important;
    }
}

[UCyborg]

That's much better. Though there are still bunch relative color syntax usage throughout, one place that stands out is /manage page with link to various settings pages where the circle with the icon is white instead of grey. But this alone makes the important elements appear normally.

AI has this to say about relative color syntax:

The from keyword is not part of CSS custom properties (var()). It's part of CSS Relative Color Syntax, which is defined in the CSS Color Module Level 5 specification. Your example:

Code: Select all

--black: oklch(20% 0 0);
--secondary: oklch(from var(--black) 60% c h);

works because:

• var(--black) resolves to a <color>.
• oklch(from …) is the relative color syntax.
• from tells the browser to use the resolved color as the origin color, exposing its channels (l, c, h, and alpha) for reuse or modification.

Where is it documented?

The normative specification is:

CSS Color Module Level 5, section Relative Colors. It defines:

• the from <color> syntax,
• how the origin color is converted,
• the available channel keywords (l, c, h, r, g, b, etc. depending on the function),
• and how expressions like calc(c * 0.8) are evaluated.

MDN also has an excellent guide titled Using relative colors, which explains the syntax and provides examples.

Is it finalized?

Not completely.

Relative color syntax is currently part of CSS Color Level 5, which is still an Editor's Draft (not yet a W3C Recommendation).

However, that doesn't mean it's experimental in practice. The feature has been implemented by modern browsers and is broadly usable today (subject to browser version support). MDN treats it as a standard CSS feature and documents browser compatibility.

Why from?

The grammar distinguishes between:

An absolute color:

Code: Select all

oklch(60% 0.15 250)

and a relative color:

Code: Select all

oklch(from var(--base) 60% c h)

Without from the parser would interpret the arguments as literal channel values. With from, it knows the next token is an origin color, after which channel identifiers like l, c, h, and alpha become available.

For example:

Code: Select all

/* Same hue and chroma, lighter */
oklch(from var(--base) 80% c h)

/* 20% less chroma */
oklch(from var(--base) l calc(c * 0.8) h)

/* Rotate hue */
oklch(from var(--base) l c calc(h + 180))

So although it may look like from is related to var(), it's actually a keyword in the color function's grammar. The origin color can be any valid CSS color:

Code: Select all

oklch(from red ...)
oklch(from #369 ...)
oklch(from rgb(20 30 40) ...)
oklch(from currentColor ...)
oklch(from var(--brand) ...)

The var() call is just one way to supply that origin color.

[adoxa]

After installing Jenkins (and updating Java) I've determined it would probably be easier to implement from than trying to work around it...

[adoxa]

Tried a two-step approach: use a filter to remove variables, then use the style to put them back (of course, filters could do that, too, but it's far more convenient using the style editor). There's still a few more that should be done, but I've had enough... Another approach might be to use a filter to replace the from colors with an equivalent color-mix (except for currentColor, which color-mix doesn't seem to support).

Code: Select all

[["localhost",["/css/",["/--[-\\w]*:oklch\\(from[^;}]*;?/g",""]]]]

Code: Select all

/* ==UserStyle==
@name         Jenkins
@namespace    adoxa
@version      1.0.0
@description  Replace some relative colors
@author       adoxa
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("localhost") {
    :root {
        --black: oklch(5% 0.075 256.91deg);
        --secondary-lch: 60% 0.075 256.91deg;
        --secondary: oklch(var(--secondary-lch));
        --accent-lch: 55% 0.2308 256.91deg;
        --selection-color: oklch(var(--accent-lch) / 0.2);
        --button-background: oklch(var(--secondary-lch) / 0.075);
        --button-background--hover: oklch(var(--secondary-lch) / 0.125);
        --button-background--active: oklch(var(--secondary-lch) / 0.175);
        --button-box-shadow--focus: oklch(var(--secondary-lch) / 0.1);
        --item-background--hover: oklch(var(--secondary-lch) / 0.1);
        --item-background--active: oklch(var(--secondary-lch) / 0.15);
        --item-box-shadow--focus: oklch(var(--secondary-lch) / 0.1);
    }
    .jenkins-button--primary {
        --button-background: oklch(var(--accent-lch));
        --button-background--hover: oklch(var(--accent-lch) / 0.9);
        --button-background--active: oklch(var(--accent-lch) / 0.8);
        --button-box-shadow--focus: oklch(var(--accent-lch) / 0.4);
    }
    .alert-info, .jenkins-alert-info, .jenkins-alert-info .app-adminmonitor-dismiss-button {
        border: var(--jenkins-border-width) solid color-mix(in srgb, var(--accent-color) 10%, transparent) !important;
    }
    .warning-info, .jenkins-alert-warning, .jenkins-alert-warning .app-adminmonitor-dismiss-button {
        border: var(--jenkins-border-width) solid color-mix(in srgb, var(--warning-color) 10%, transparent) !important;
    }
}

[adoxa]

Here's a filter-only method using color-mix and just removing anything using currentColor.

Code: Select all

[["localhost",["/css/",["--black:oklch(from var(--accent-color) 5% 0.075 h)","--black:oklch(5% 0.075 256.91deg)","--secondary:oklch(from var(--black) 60% c h)","--secondary:oklch(60% 0.075 256.91deg)","/(?:rgb|oklch)\\(from currentColor .*?\\)/gi","","/(?:rgb|oklch)\\(from (var\\([^)]*\\)) . . .\\)/g","$1","/(?:rgb|oklch)\\(from (var\\([^)]*\\)) . . ./0?\\.(\\d\\d)(\\d)\\)/g","color-mix(in srgb, $1 $2.$3%, transparent)","/(?:rgb|oklch)\\(from (var\\([^)]*\\)) . . ./0?\\.(\\d\\d)/g","color-mix(in srgb, $1 $2%, transparent","/(?:rgb|oklch)\\(from (var\\([^)]*\\)) . . ./0?\\.(\\d)\\)/g","color-mix(in srgb, $1 $020%, transparent)"]]]]