@gjsify/adwaita-nativescript 0.31.0 → 0.33.0

package/src/theme/adwaita.css

@@ -32,14 +32,36 @@ Page.adw-window {
     margin: 12 12 6 12;
 }
 
+/* The header box: title + description column, optional trailing suffix. The two
+ * metric rules below are libadwaita's, keyed off `is_single_line`
+ * (stylesheet/widgets/_preferences.scss:6-13): a header carrying a description
+ * is two lines and takes a 6 bottom gap, a title-only or suffix-only header is
+ * one line and takes a 34 height floor instead. Spelled as base + override
+ * rather than with `:not(.single-line)` — the NS CSS subset has no `:not()`. */
+.adw-preferences-group-header {
+    margin: 6 2 6 2;
+}
+
+.adw-preferences-group-header.single-line {
+    margin: 6 2 0 2;
+    min-height: 34;
+}
+
 .adw-preferences-group-title {
     font-size: 11;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.55);
-    margin: 6 2 6 2;
+    margin: 0;
     /* NS has no text-transform; author titles in upper-case in markup if desired. */
 }
 
+/* Dimmed description line below the title. */
+.adw-preferences-group-description {
+    font-size: 12;
+    color: rgba(0, 0, 0, 0.55);
+    margin: 2 0 0 0;
+}
+
 /* The boxed list: rounded card holding the rows. */
 .boxed-list,
 .adw-preferences-group-listbox {
@@ -143,13 +165,23 @@ Page.adw-window {
     margin: 0;
 }
 
-.adw-entry-field {
+/* The text input itself, in BOTH entries: never any chrome of its own. Whatever
+ * surrounds it paints the Adwaita surface — the row for `.adw-entry-field`, the
+ * `.adw-entry` box for `.adw-entry-input`. (The widgets also set these two
+ * inline, which is the only thing that removes Android's Material underline;
+ * they are restated here so the rule is readable from the stylesheet.) */
+.adw-entry-field,
+.adw-entry-input {
     font-size: 15;
     color: rgba(0, 0, 0, 0.8);
     background-color: transparent;
-    /* No Material underline — Adwaita EntryRow has no field border. */
+    /* No Material underline — no Adwaita entry has a field border. */
     border-width: 0;
     padding: 0;
+}
+
+/* Row only: the gap between the shrunken floating title and the value. */
+.adw-entry-field {
     margin: 2 0 0 0;
 }
 
@@ -158,6 +190,23 @@ Page.adw-window {
     color: rgba(0, 0, 0, 0.8);
 }
 
+/* ===== Entry (STANDALONE — the filled, rounded field, not a row) ===== */
+
+/* The BOX carries the surface, because the field cannot: an entry's fill has to
+ * answer the light/dark question, and the inline `backgroundColor` that strips
+ * the Material underline is not overridable from CSS. Metrics are `entry`'s own
+ * — 34 min-height and 9px horizontal padding (_entries.scss:4-6) — over
+ * `$button_color`, i.e. currentColor at 10% (_entries.scss:9 with
+ * _buttons.scss:1), the same fill `.adw-button` carries, at `$button_radius`
+ * 9px (_common.scss:8). */
+.adw-entry {
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 9;
+    min-height: 34;
+    padding: 0 9 0 9;
+    margin: 0;
+}
+
 /* ===== Combo row (inline value + chevron) ===== */
 
 .adw-combo-suffix {
@@ -177,6 +226,47 @@ Page.adw-window {
     vertical-align: middle;
 }
 
+/* ===== Drop down (STANDALONE — the toolbar twin of the combo row) ===== */
+
+/* A plain Adwaita button carrying a label and an arrow. `_dropdowns.scss`
+ * declares no padding for it, and which of `.text-button` / `.image-text-button`
+ * GTK stamps on a dropdown's button is NOT verifiable in this tree (`refs/gtk`
+ * is empty), so these are the BASE `button` metrics: `padding: 5px 10px` over
+ * `min-height: 24px` — 34 in total, the same height as an entry — at
+ * `$button_radius` 9px with the `$button_color` fill (_buttons.scss:19-30). */
+.adw-drop-down {
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 9;
+    min-height: 34;
+    padding: 5 10 5 10;
+    margin: 0;
+}
+
+/* `button { font-weight: bold }` (_buttons.scss:24). The label carries the
+ * colour because NS does not inherit `color` to a child Label. */
+.adw-drop-down-label {
+    font-size: 15;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+    vertical-align: center;
+}
+
+/* `dropdown > button > box { border-spacing: 6px }` (_dropdowns.scss:2-3) — the
+ * gap between label and arrow. The arrow's 16px size (_dropdowns.scss:10-13) is
+ * the AdwIcon default, and its colour follows the light/dark scheme, so neither
+ * is set anywhere. */
+.adw-drop-down-chevron {
+    margin: 0 0 0 6;
+    vertical-align: middle;
+}
+
+/* Pressed — `$button_active_color`, in the shade `.adw-button:highlighted`
+ * already uses. Wired by `attachRowPressFeedback()` (NS only auto-highlights a
+ * Button, and this one is a StackLayout). */
+.adw-drop-down:highlighted {
+    background-color: rgba(0, 0, 0, 0.19);
+}
+
 /* ===== Spin row (− value + stepper) ===== */
 
 .adw-spin-control {
@@ -368,6 +458,14 @@ Page.adw-window {
     margin: 0 0 0 8;
 }
 
+/* `button-style` (Since 1.7). ADW_BANNER_BUTTON_SUGGESTED adds `.suggested-action`
+ * to the banner button (adw-banner.c:769) — the accent appearance, restated here
+ * because the banner button is not an `.adw-button`. */
+.adw-banner-button.suggested-action {
+    background-color: #3584e4;
+    color: #ffffff;
+}
+
 /* ===== Avatar (circular initials) ===== */
 
 .adw-avatar {
@@ -457,6 +555,30 @@ Page.adw-window {
     padding-bottom: var(--safeAreaInsetBottom, 0);
 }
 
+/* top-bar-style / bottom-bar-style = raised: an opaque background with a
+ * persistent separator. Adwaita uses a shadow there and swaps it for a subtler
+ * hairline under `.border` (adw-toolbar-view.c:1011-1024); the NS CSS subset has
+ * no shadow, so `raised` carries the hairline and `.border` darkens it — the same
+ * ordering of emphasis, in the vocabulary the platform has. */
+.adw-toolbar-view-top.raised {
+    background-color: #ffffff;
+    border-bottom-width: 1;
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-toolbar-view-top.raised.border {
+    border-bottom-color: rgba(0, 0, 0, 0.24);
+}
+
+.adw-toolbar-view-bottom.raised {
+    background-color: #ffffff;
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-toolbar-view-bottom.raised.border {
+    border-top-color: rgba(0, 0, 0, 0.24);
+}
+
 /* ===== View stack (page container) ===== */
 
 .adw-view-stack {
@@ -506,16 +628,153 @@ Page.adw-window {
     color: #3584e4;
 }
 
+/* AdwIndicatorBin's badge — the unread count, or (with .needs-attention and no
+ * count) a bare dot. Reference: refs/libadwaita/src/adw-indicator-bin.c */
+.adw-viewswitcherbar-button-badge {
+    font-size: 10;
+    font-weight: 700;
+    color: #ffffff;
+    background-color: #3584e4;
+    border-radius: 8;
+    padding: 0 4 0 4;
+    horizontal-align: center;
+    text-align: center;
+}
+
+.adw-viewswitcherbar-button-badge.needs-attention {
+    width: 6;
+    height: 6;
+    padding: 0;
+    border-radius: 3;
+}
+
 /* ===== Wrap box ===== */
 
-.adw-wrap-box {
-    margin: 6;
+/* Adw.WrapBox has NO margin of its own — it is a bare layout container whose
+ * only spacing is `child-spacing` / `line-spacing`, both defaulting to 0
+ * (adw-wrap-box.c:285-287, :393-395). The 6 DIP margin that used to sit here was
+ * invented, and stacked on top of the port's equally invented 6 DIP spacing
+ * default, so an EMPTY wrap box occupied 12 DIPs. Spacing comes from the child
+ * margins the widget applies (widgets/wrap-box-layout.ts), never from here. */
+
+/* ===== Data grid (an aligned numeric grid — a financial statement) ===== */
+
+/* ONE GridLayout with the CELLS as direct children, because NativeScript has no
+ * subgrid: a per-row grid would resolve its own `auto` tracks from its own row's
+ * content and stagger the columns. So everything the browser paints on a row
+ * ELEMENT is painted here on a full-width StackLayout that sits UNDER that row's
+ * cells and spans every column — which is also why the two are styled by SIBLING
+ * selectors below rather than by a descendant one. */
+.adw-data-grid {
+    background-color: transparent;
+}
+
+/* Airy Adwaita cell density, matching the boxed-list row rhythm (the browser's
+ * --spacing-s / --spacing-m, 9 and 12). Single-line is set on the widget: a
+ * wrapped figure column stops being a column of figures. */
+.adw-data-grid-cell {
+    font-size: 15;
+    color: rgba(0, 0, 0, 0.8);
+    padding: 9 12 9 12;
+    vertical-align: center;
+}
+
+/* Alignment. NS has no logical `start`/`end` text alignment, so the two ends are
+ * spelled left/right — this port lays out LTR throughout (widgets/split-view-state.ts
+ * records the same limitation for the split views). */
+.adw-data-grid-cell.align-start {
+    text-align: left;
+}
+
+.adw-data-grid-cell.align-end {
+    text-align: right;
+}
+
+.adw-data-grid-cell.align-center {
+    text-align: center;
+}
+
+/* `.numeric` is `font-variant-numeric: tabular-nums` in libadwaita
+ * (_labels.scss:86-88) and the NS CSS subset has NO font-feature property at all,
+ * so a numeric column gets its right EDGE from the shared track and proportional
+ * digits INSIDE the number. `.mono` is the way to real tabular figures here,
+ * because a fixed-pitch face is tabular by construction. `@gjsify/adwaita-fonts`
+ * ships no mono TTF today, so unless the app installs one the generic tail is
+ * what resolves. */
+.adw-data-grid-cell.mono {
+    font-family: 'Adwaita Mono', 'AdwaitaMono-Regular', monospace;
+}
+
+/* Header row — dim and small with a hairline underline (the Adwaita list-column
+ * heading), never sortable. NS has no text-transform, so the labels are NOT
+ * upper-cased here; author them as you want them read. */
+.adw-data-grid-row.header {
+    border-bottom-width: 1;
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-data-grid-cell.header-cell {
+    font-size: 12;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.55);
+}
+
+/* A section header spans all columns as a bold group title (a BWA's sections),
+ * with extra space above it to open the group. */
+.adw-data-grid-cell.section-cell {
+    font-weight: 700;
+    padding: 15 12 9 12;
+}
+
+/* A subtotal is bold with a hairline rule above it (Gesamtleistung, Rohertrag…).
+ * The rule is on the row background, the weight on the cells: siblings. */
+.adw-data-grid-row.variant-subtotal {
+    border-top-width: 1;
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-data-grid-cell.variant-subtotal {
+    font-weight: 700;
+}
+
+/* The final total is bold with a STRONGER rule above (the accounting result —
+ * Betriebsergebnis) plus a thin one below, evoking the ruled grand-total line. */
+.adw-data-grid-row.variant-total {
+    border-top-width: 2;
+    border-top-color: rgba(0, 0, 0, 0.1);
+    border-bottom-width: 1;
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-data-grid-cell.variant-total {
+    font-weight: 800;
+}
+
+/* Optional interactive rows (master-detail). Hairline separators only where
+ * Adwaita would — NOT zebra striping — so no default row borders. NS has no
+ * hover, so the pressed shade is the whole affordance. */
+.adw-data-grid-row.interactive {
+    border-radius: 9;
+}
+
+/* Pressed — `$button_active_color`, the shade `.adw-button:highlighted` uses.
+ * `attachRowPressFeedback()` is wired on EVERY data row's background and gated
+ * HERE: a non-interactive row gets the `highlighted` pseudo-class and no rule
+ * claims it, so nothing lights up under a finger that cannot activate anything. */
+.adw-data-grid-row.interactive:highlighted {
+    background-color: rgba(0, 0, 0, 0.19);
 }
 
 /* ===== Spinner ===== */
 
+/* Adw.Spinner is a NEUTRAL indicator, not an accent-coloured one: the paintable
+   strokes with `gtk_widget_get_color()` — the widget's TEXT colour
+   (adw-spinner-paintable.c:432). This carried the Adwaita accent blue, which put
+   the two ports in open disagreement: adwaita-web's `_spinner.scss` uses
+   `currentColor` and says so in a comment. Nothing compared them, because no
+   conformance vector covers colour. */
 .adw-spinner {
-    color: #3584e4;
+    color: rgba(0, 0, 0, 0.8);
 }
 
 /* ===== Status page (empty state) ===== */
@@ -585,6 +844,23 @@ Page.adw-window {
 
 /* ===== Button content (icon + label) ===== */
 
+/* The class AdwButtonContent stamps on the button hosting it
+ * (adw-button-content.c:115), removed again on unroot (:126).
+ *
+ * libadwaita: `button.image-text-button { padding-left: 9px; padding-right: 9px }`
+ * (_buttons.scss:77-80) — against the 17px a plain `.text-button` gets (:72-75),
+ * which this theme approximates as the 16 on `.adw-button` above. The rule lived
+ * in NEITHER renderer, so every icon+label button was drawn with the wrong
+ * horizontal padding.
+ *
+ * Only the PADDING half of that block applies: the same selector also declares
+ * `> box, > box > box { border-spacing: 4px }` (:82-84) and neither matches
+ * through the `buttoncontent` node (:47-52). The icon↔label gap stays the 6 from
+ * `buttoncontent > box` (:626-628), which is the icon's right margin below. */
+.adw-button.image-text-button {
+    padding: 5 9 5 9;
+}
+
 .adw-button-content {
     margin: 0;
 }
@@ -751,6 +1027,25 @@ Page.adw-window {
     vertical-align: center;
 }
 
+/* AdwIndicatorBin's badge on the classic switcher's buttons. */
+.adw-view-switcher-button-badge {
+    font-size: 10;
+    font-weight: 700;
+    color: #ffffff;
+    background-color: #3584e4;
+    border-radius: 8;
+    padding: 0 4 0 4;
+    margin: 0 0 0 5;
+    vertical-align: center;
+}
+
+.adw-view-switcher-button-badge.needs-attention {
+    width: 6;
+    height: 6;
+    padding: 0;
+    border-radius: 3;
+}
+
 /* ===== Inline view switcher (compact pill bar) ===== */
 
 .adw-inline-view-switcher-bar {
@@ -786,6 +1081,25 @@ Page.adw-window {
     vertical-align: center;
 }
 
+/* AdwIndicatorBin's badge on the inline switcher's toggles. */
+.adw-inline-view-switcher-button-badge {
+    font-size: 10;
+    font-weight: 700;
+    color: #ffffff;
+    background-color: #3584e4;
+    border-radius: 8;
+    padding: 0 4 0 4;
+    margin: 0 0 0 5;
+    vertical-align: center;
+}
+
+.adw-inline-view-switcher-button-badge.needs-attention {
+    width: 6;
+    height: 6;
+    padding: 0;
+    border-radius: 3;
+}
+
 /* ===== Tab view (top tab strip) ===== */
 
 .adw-tab-view-bar {
@@ -868,12 +1182,25 @@ Page.adw-window {
     background-color: #fafafb;
 }
 
+/* The divider is on the side the sidebar is DRAWN on, which is `:dir()` x `.end`
+ * in _sidebars.scss:21-39 — not a fixed right edge. The widget adds
+ * `.adw-sidebar-at-visual-start` when the pane leads, so an `end` sidebar, and a
+ * `start` one under RTL, get their divider on the correct edge instead of
+ * drawing it inside the content. */
 .adw-split-view-sidebar {
     background-color: #ebebed;
+}
+
+.adw-split-view-sidebar.adw-sidebar-at-visual-start {
     border-right-width: 1;
     border-right-color: rgba(0, 0, 0, 0.1);
 }
 
+.adw-split-view-sidebar.adw-sidebar-at-visual-end {
+    border-left-width: 1;
+    border-left-color: rgba(0, 0, 0, 0.1);
+}
+
 .adw-split-view-content {
     background-color: #fafafb;
 }
@@ -1053,7 +1380,8 @@ Page.ns-dark.adw-window {
     color: #ffffff;
 }
 
-.ns-dark .adw-preferences-group-title {
+.ns-dark .adw-preferences-group-title,
+.ns-dark .adw-preferences-group-description {
     color: rgba(255, 255, 255, 0.55);
 }
 
@@ -1101,10 +1429,18 @@ Page.ns-dark.adw-window {
 }
 
 .ns-dark .adw-entry-field,
+.ns-dark .adw-entry-input,
 .ns-dark .adw-password-field {
     color: #ffffff;
 }
 
+/* ===== Dark: entry (standalone) ===== */
+
+/* The dark `$button_color`: currentColor at 10% over a white foreground. */
+.ns-dark .adw-entry {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 /* ===== Dark: combo row ===== */
 
 .ns-dark .adw-combo-value {
@@ -1115,6 +1451,20 @@ Page.ns-dark.adw-window {
     color: rgba(255, 255, 255, 0.45);
 }
 
+/* ===== Dark: drop down ===== */
+
+.ns-dark .adw-drop-down {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .adw-drop-down-label {
+    color: #ffffff;
+}
+
+.ns-dark .adw-drop-down:highlighted {
+    background-color: rgba(255, 255, 255, 0.22);
+}
+
 /* ===== Dark: spin row ===== */
 
 .ns-dark .adw-spin-button {
@@ -1259,6 +1609,24 @@ Page.ns-dark.adw-window {
     border-top-color: rgba(255, 255, 255, 0.12);
 }
 
+.ns-dark .adw-toolbar-view-top.raised {
+    background-color: #2e2e32;
+    border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+
+.ns-dark .adw-toolbar-view-top.raised.border {
+    border-bottom-color: rgba(255, 255, 255, 0.28);
+}
+
+.ns-dark .adw-toolbar-view-bottom.raised {
+    background-color: #2e2e32;
+    border-top-color: rgba(255, 255, 255, 0.12);
+}
+
+.ns-dark .adw-toolbar-view-bottom.raised.border {
+    border-top-color: rgba(255, 255, 255, 0.28);
+}
+
 /* ===== Dark: view switcher bar ===== */
 
 .ns-dark .adw-viewswitcherbar {
@@ -1278,10 +1646,40 @@ Page.ns-dark.adw-window {
     color: #78aeed;
 }
 
+/* ===== Dark: data grid ===== */
+
+.ns-dark .adw-data-grid-cell {
+    color: #ffffff;
+}
+
+/* Restated at three classes so it beats the two-class rule above — the light
+ * `.adw-data-grid-cell.header-cell` and this one would otherwise tie, and the
+ * later (dark) rule would repaint the dim heading in full white. */
+.ns-dark .adw-data-grid-cell.header-cell {
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.ns-dark .adw-data-grid-row.header {
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .adw-data-grid-row.variant-subtotal {
+    border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .adw-data-grid-row.variant-total {
+    border-top-color: rgba(255, 255, 255, 0.1);
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .adw-data-grid-row.interactive:highlighted {
+    background-color: rgba(255, 255, 255, 0.22);
+}
+
 /* ===== Dark: spinner ===== */
 
 .ns-dark .adw-spinner {
-    color: #78aeed;
+    color: #ffffff;
 }
 
 /* ===== Dark: status page ===== */
@@ -1405,9 +1803,16 @@ Page.ns-dark.adw-window {
 .ns-dark .adw-split-view-sidebar,
 .ns-dark .adw-overlay-active {
     background-color: #2a2a2e;
+}
+
+.ns-dark .adw-split-view-sidebar.adw-sidebar-at-visual-start {
     border-right-color: rgba(255, 255, 255, 0.12);
 }
 
+.ns-dark .adw-split-view-sidebar.adw-sidebar-at-visual-end {
+    border-left-color: rgba(255, 255, 255, 0.12);
+}
+
 .ns-dark .adw-split-view-content {
     background-color: #222226;
 }