Repository navigation
Need cards: colors as CSS variables, dark values, label contrast and PDF label spacing - #20
Merged
Merged
Conversation
volker-kempert
approved these changes
Oct 26, 2026
field_line() wrote the prefix "Level:" without a space. In the PDF the label and the value follow each other in one line, so it showed "Level:software". The prefix is now "Level: ". In the HTML card the label is a grid column, and the browser drops the space at its end. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Tobias Kaestner <tobias.kaestner@inovex.de>
zdocs-needs.css had 27 fixed colors: the white card, the field row, the lines, the ID, the pills, the adequacy chips and the preview popup. In a dark theme the cards were white boxes, and a theme had to override each rule. Every color of the card is now a --zd-* variable on :root. A theme sets the variables only. Dark values apply when <html> has data-theme="dark" or the class dark-mode, the usual switches of a dark mode for sphinx_rtd_theme. There is no prefers-color-scheme rule, because sphinx_rtd_theme has no dark mode of its own. The adequacy chips now use the colors of the pills. The type label was the type color at lightness 0.52 with four times its chroma, on a head with 55% of the type color. A saturated type left the sRGB gamut: #C2185B gave a contrast of 1.46:1. The chroma is now capped (--zd-accent-c, 0.14), the label is darker (0.34) and the head has 35% of the type color. The label and the title then have at least 4.5:1 on the head for any type color, and at least 6.7:1 for the palettes of Zephyr safety and safety-toolbox. The dark values (head 18%, label 0.84, cap 0.12) give at least 5:1. The manual lists the variables. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Signed-off-by: Tobias Kaestner <tobias.kaestner@inovex.de>
tobiaskaestner
force-pushed
the
tkaestner/card-themes
branch
from
October 26, 2026 09:26
66de1e2 to
52af3e2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three fixes to the zdocs need cards.
The card colors are variables, with dark values.
zdocs-needs.csshad 27 fixed colors: the white card, the field row, the lines, the ID, the pills, the adequacy chips and the preview popup. In a dark theme the cards were white boxes. Every color of the card is now a--zd-*variable on:root, so a theme only sets the variables. The dark values apply when<html>hasdata-theme="dark"or the classdark-mode. There is noprefers-color-schemerule, becausesphinx_rtd_themehas no dark mode of its own. The manual lists the variables.The type label has enough contrast. A saturated type color left the sRGB gamut in the label formula:
#C2185Bgave 1.46:1 on its head. The chroma of the label is now capped, the label is darker, and the head has 35 % of the type color (was 55 %). The label and the title now have at least 4.5:1 on the head for any type color, and at least 6.7:1 for the palettes of Zephyr safety and safety-toolbox. The dark values give at least 5:1. In light mode the type label and the left border of each card are now darker.A space after a field label. In the PDF a field showed as
Level:software. The label prefix is nowLevel:. In the HTML card the browser drops the space at the end of the label column.Checks: unit 492, acceptance 321/321, zdocs docs 0 warnings. I compared screenshots of real adequacy cards (old, new, dark).
🤖 Generated with Claude Code