style.css

/* Comma adds as little to the platform's styling as it can. What is here is
 * what the platform has no opinion about, because a grid cell is not a widget
 * GTK knows it is styling.
 *
 * Every rule takes its colour from the desktop's own accent rather than naming
 * one, so they follow whatever the reader has chosen. Checked once against
 * Adwaita's default accent (#3584e4) for the contrast the text needs: the
 * editing tint comes out #212d3c on a dark view and #e1ecfb on a light one,
 * which the text over it clears at 13.5:1 and 17:1 against the 4.5:1 that is
 * asked for. The row tint is a tenth of that strength, #202629 dark and #eff5fd
 * light, clearing 15:1 and 19:1. The focus ring is a border rather than text and
 * wants 3:1, which is the bar the accent is itself tuned to meet.
 *
 * Author: David M. Anderson
 * Built with AI assistance (Claude, Anthropic)
 */

/* The row the keyboard is in. On a file wider than the window the cell ring can
 * be far from the row number that names it, and this is what ties the two back
 * together. It follows the focus on its own, so it promises nothing about
 * selection: there is no such thing here, and a row lit up by anything other
 * than where you are would say there was.
 *
 * The table lights its own row, because the cell holding the keyboard is inside
 * that row. Nothing the numbers hold has the focus, so the gutter is told which
 * one to light and says so with a class. One tint for the two of them: it is one
 * row. */
columnview row:focus-within,
.gutter .number.current {
  background-color: alpha(@accent_bg_color, 0.08);
}

/* The line under each number, matching the one under the row it names. The
 * numbers used to be rows of a column view and had these for nothing; they are
 * placed against the table's rows now and have to draw their own. What divides
 * the numbers from the table is a separator widget rather than a border, so the
 * theme decides what a divider looks like. */
.gutter .number {
  border-bottom: 1px solid @borders;
}

/* Where the keyboard is. GTK draws no focus ring around a plain box, and
 * without one there is no telling which cell Enter would open. */
.cell-content:focus {
  outline: 2px solid @accent_color;
  outline-offset: -2px;
  border-radius: 4px;
}

/* A cell being edited. GtkText carries no frame of its own, so without this an
 * edit in progress is indistinguishable from a cell nobody has touched. The
 * frame alone would only repeat what the focus ring already says, so the tint
 * carries the difference in lightness as well as in colour. The padding stays
 * at zero so the text does not shift sideways at the moment the edit begins. */
.cell-content text {
  padding: 0;
  background-color: alpha(@accent_bg_color, 0.15);
  box-shadow: inset 0 0 0 2px @accent_bg_color;
  border-radius: 4px;
  caret-color: @accent_color;
}