@gjsify/adwaita-nativescript 0.12.0 → 0.13.1

package/src/theme/adwaita.css

@@ -65,17 +65,22 @@ Page.adw-window {
 /*
  * Hairline separator between rows in a boxed list — Adwaita draws a 1px
  * @borders line BETWEEN rows (not above the first / below the last). NS has no
- * `:not(:first-child)`, so we approximate with a 1px top border on the boxed
- * list's direct row children; the listbox clips the first row's border under
- * its rounded corner, which reads as "between rows".
+ * `:not(:first-child)`, so we put a 1px top border on every row and let the
+ * group's `_refreshRowEdges()` flag the FIRST row with `.adw-row-flush-top`
+ * (NS does NOT clip the first row's border under the card's rounded corner, so
+ * without the flag it reads as a stray line above the first row).
  */
 .boxed-list .adw-row {
     border-top-width: 1;
     border-top-color: rgba(0, 0, 0, 0.08);
 }
 
+.boxed-list .adw-row-flush-top {
+    border-top-width: 0;
+}
+
 .adw-action-row {
-    /* GridLayout `*, auto` — sizing handled by the widget, only chrome here. */
+    /* GridLayout `auto, *, auto` — sizing handled by the widget, only chrome here. */
     color: rgba(0, 0, 0, 0.8);
 }
 
@@ -83,6 +88,13 @@ Page.adw-window {
     margin: 0;
 }
 
+/* Leading symbolic icon (column 0) — Adwaita sets a 12px gap to the title and
+ * centers it vertically against the title/subtitle stack. */
+.adw-row-prefix {
+    margin: 0 12 0 0;
+    vertical-align: center;
+}
+
 .adw-row-title {
     font-size: 15;
     color: rgba(0, 0, 0, 0.8);
@@ -97,6 +109,7 @@ Page.adw-window {
 
 .adw-row-suffix {
     margin: 0;
+    vertical-align: center;
 }
 
 /* ===== Switch ===== */
@@ -165,23 +178,26 @@ Page.adw-window {
     margin: 0;
 }
 
-.adw-spin-button {
-    width: 32;
-    height: 32;
-    border-radius: 9;
+/* The stepper buttons are AdwImageButtons (symbolic value-decrease/increase
+ * icons). Compound selector so it beats the later `.adw-image-button` rule:
+ * keep the rounded-square shape but give the subtle persistent fill Adw.SpinRow's
+ * stepper shows (the bare image-button is transparent at rest). */
+.adw-image-button.adw-spin-button {
+    width: 30;
+    height: 30;
     background-color: rgba(128, 128, 128, 0.12);
-    color: rgba(0, 0, 0, 0.8);
-    font-size: 18;
-    font-weight: 700;
-    padding: 0;
     margin: 0 2 0 2;
 }
 
+.ns-dark .adw-image-button.adw-spin-button {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
 .adw-spin-value {
     font-size: 15;
     color: rgba(0, 0, 0, 0.8);
-    width: 48;
-    margin: 0 4 0 4;
+    margin: 0 6 0 4;
+    vertical-align: center;
 }
 
 /* ===== Slider row (RANGE control — vertical card: title+value header over a slider) ===== */
@@ -300,15 +316,18 @@ Page.adw-window {
 
 /* ===== Image button (circular flat icon button — header bars) ===== */
 
-/* Adwaita header buttons are flat CIRCULAR icon buttons: transparent at rest,
+/* Adwaita flat icon buttons are ROUNDED SQUARES, not circles: transparent at rest,
  * darkening on press (the flat-button `:active` shade). 34×34 with a 16px symbolic
- * icon, matching libadwaita's `button.image-button`. The `:highlighted` press state
- * is wired by `attachRowPressFeedback()` (NS only auto-highlights `Button`). */
+ * icon and the standard `$button_radius: 9px` corner, matching libadwaita's
+ * `button.image-button` (a full circle is the explicit `.circular` exception —
+ * window controls / FABs — which none of the storybook's icon buttons are). The
+ * `:highlighted` press state is wired by `attachRowPressFeedback()` (NS only
+ * auto-highlights `Button`). */
 .adw-image-button {
     background-color: transparent;
     width: 34;
     height: 34;
-    border-radius: 9999;
+    border-radius: 9;
     margin: 0 2 0 2;
 }
 
@@ -421,6 +440,55 @@ Page.adw-window {
     border-top-color: rgba(0, 0, 0, 0.1);
 }
 
+/* ===== View stack (page container) ===== */
+
+.adw-view-stack {
+    background-color: transparent;
+}
+
+/* ===== View switcher bar (narrow policy: bottom bar, icon over label) ===== */
+
+.adw-viewswitcherbar {
+    background-color: #ffffff;
+    border-top-width: 1;
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+
+.adw-viewswitcherbar-box {
+    background-color: transparent;
+    padding: 4 0 4 0;
+}
+
+/* Each button is a tappable vertical StackLayout (icon over label). The label
+ * carries the colour (NS does not inherit `color` to a child Label); the active
+ * label is accent-coloured. */
+.adw-viewswitcherbar-button {
+    background-color: transparent;
+    border-radius: 8;
+    padding: 4 2 4 2;
+    margin: 2 4 2 4;
+}
+
+.adw-viewswitcherbar-button:highlighted {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.adw-viewswitcherbar-button-icon {
+    margin: 0 0 2 0;
+    horizontal-align: center;
+}
+
+.adw-viewswitcherbar-button-label {
+    font-size: 11;
+    color: rgba(0, 0, 0, 0.6);
+    horizontal-align: center;
+    text-align: center;
+}
+
+.adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label {
+    color: #3584e4;
+}
+
 /* ===== Wrap box ===== */
 
 .adw-wrap-box {
@@ -443,7 +511,13 @@ Page.adw-window {
     padding: 24 32 24 32;
 }
 
+/* The symbolic icon (AdwIcon) — only spacing; size/colour are baked by AdwIcon. */
 .adw-status-page-icon {
+    margin: 0 0 12 0;
+}
+
+/* The legacy glyph fallback (a Label) — large + dim. */
+.adw-status-page-icon-glyph {
     font-size: 56;
     color: rgba(0, 0, 0, 0.35);
     margin: 0 0 12 0;
@@ -508,36 +582,113 @@ Page.adw-window {
     margin: 0;
 }
 
+/* On a suggested/destructive button the label must take the button's foreground
+ * (the explicit dark label colour above would otherwise win over the inherited
+ * one). The matching ICON colour is pre-baked by the caller via AdwIcon.iconColor. */
+.adw-button.suggested-action .adw-button-content-label {
+    color: #ffffff;
+}
+
+.adw-button.destructive-action .adw-button-content-label {
+    color: #c01c28;
+}
+
 /* ===== Split button (action + dropdown) ===== */
 
 .adw-split-button-action {
     background-color: rgba(0, 0, 0, 0.08);
-    color: rgba(0, 0, 0, 0.8);
     border-radius: 9;
-    font-weight: 700;
-    padding: 5 16 5 16;
+    padding: 5 14 5 14;
     height: 38;
     margin: 0;
 }
 
+.adw-split-button-label {
+    font-size: 15;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+    vertical-align: center;
+}
+
 .adw-split-button-dropdown {
     background-color: rgba(0, 0, 0, 0.08);
-    color: rgba(0, 0, 0, 0.8);
     border-radius: 9;
-    font-size: 15;
     width: 36;
     height: 38;
     padding: 0;
     margin: 0 0 0 1;
 }
 
-/* ===== Toggle group (segmented control) ===== */
+/* Flat variant — transparent at rest (header-bar / toolbar split buttons). */
+.adw-split-button.flat .adw-split-button-action,
+.adw-split-button.flat .adw-split-button-dropdown {
+    background-color: transparent;
+}
 
+.adw-split-button.flat .adw-split-button-action:highlighted,
+.adw-split-button.flat .adw-split-button-dropdown:highlighted {
+    background-color: rgba(0, 0, 0, 0.08);
+}
+
+/* Non-flat press — darken the linked halves (Adwaita's `:active` shade). */
+.adw-split-button-action:highlighted,
+.adw-split-button-dropdown:highlighted {
+    background-color: rgba(0, 0, 0, 0.16);
+}
+
+/* ===== Toggle group (Adwaita LINKED segmented control) ===== */
+/* A tinted rounded container; the selected segment is raised to a white pill
+ * (Adwaita has a soft shadow there — the NS subset has no shadow, so a white
+ * fill stands in). */
 .adw-toggle-group {
-    color: #3584e4;
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 9;
+    padding: 3;
+    margin: 0;
+}
+
+.adw-toggle-button {
+    background-color: transparent;
+    border-radius: 7;
+    padding: 5 14 5 14;
     margin: 0;
 }
 
+.adw-toggle-button.active {
+    background-color: #ffffff;
+}
+
+.adw-toggle-button:highlighted {
+    background-color: rgba(0, 0, 0, 0.08);
+}
+
+.adw-toggle-label {
+    font-size: 14;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+    vertical-align: center;
+}
+
+.adw-toggle-icon {
+    margin: 0 6 0 0;
+    vertical-align: center;
+}
+
+/* Flat variant — no container fill (toolbar/header context). */
+.adw-toggle-group.flat {
+    background-color: transparent;
+    padding: 0;
+}
+
+/* Round variant — fully-pill container + segments. */
+.adw-toggle-group.round {
+    border-radius: 9999;
+}
+
+.adw-toggle-group.round .adw-toggle-button {
+    border-radius: 9999;
+}
+
 /* ===== View switcher (top pill bar) ===== */
 
 .adw-view-switcher {
@@ -551,18 +702,33 @@ Page.adw-window {
     margin: 6;
 }
 
+/* Each button is a tappable StackLayout (icon + label) — the label carries the
+ * text colour (NS does not inherit `color` to a child Label) and the icon its
+ * right margin. Active = raised white pill. */
 .adw-view-switcher-button {
     background-color: transparent;
-    color: rgba(0, 0, 0, 0.65);
     border-radius: 7;
-    font-weight: 700;
     padding: 5 14 5 14;
     margin: 0;
 }
 
 .adw-view-switcher-button.active {
     background-color: #ffffff;
-    color: rgba(0, 0, 0, 0.85);
+}
+
+.adw-view-switcher-button:highlighted {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+
+.adw-view-switcher-button-label {
+    color: rgba(0, 0, 0, 0.75);
+    font-weight: 700;
+    vertical-align: center;
+}
+
+.adw-view-switcher-button-icon {
+    margin: 0 6 0 0;
+    vertical-align: center;
 }
 
 /* ===== Inline view switcher (compact pill bar) ===== */
@@ -576,16 +742,28 @@ Page.adw-window {
 
 .adw-inline-view-switcher-button {
     background-color: transparent;
-    color: rgba(0, 0, 0, 0.65);
     border-radius: 6;
-    font-weight: 700;
     padding: 3 10 3 10;
     margin: 0;
 }
 
 .adw-inline-view-switcher-button.active {
     background-color: #ffffff;
-    color: rgba(0, 0, 0, 0.85);
+}
+
+.adw-inline-view-switcher-button:highlighted {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+
+.adw-inline-view-switcher-button-label {
+    color: rgba(0, 0, 0, 0.75);
+    font-weight: 700;
+    vertical-align: center;
+}
+
+.adw-inline-view-switcher-button-icon {
+    margin: 0 5 0 0;
+    vertical-align: center;
 }
 
 /* ===== Tab view (top tab strip) ===== */
@@ -597,19 +775,40 @@ Page.adw-window {
     margin: 0;
 }
 
+/* Each tab is a tappable StackLayout (label + a close ✕ on the active tab). The
+ * active tab is a raised rounded PILL (Adw.TabBar), NOT an accent underline. */
 .adw-tab-view-tab {
     background-color: transparent;
-    color: rgba(0, 0, 0, 0.6);
-    font-weight: 700;
-    padding: 8 16 8 16;
-    margin: 0;
+    border-radius: 7;
+    padding: 6 10 6 14;
+    margin: 4 3 4 3;
 }
 
 .adw-tab-view-tab.active {
-    color: #3584e4;
-    /* Accent underline approximated by a bottom border. */
-    border-bottom-width: 2;
-    border-bottom-color: #3584e4;
+    background-color: rgba(0, 0, 0, 0.06);
+}
+
+.adw-tab-view-tab:highlighted {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.adw-tab-view-tab-label {
+    color: rgba(0, 0, 0, 0.75);
+    font-weight: 700;
+    vertical-align: center;
+}
+
+.adw-tab-view-tab-icon {
+    margin: 0 6 0 0;
+    vertical-align: center;
+}
+
+/* The per-tab close button — a small flat ✕ shown only on the active tab. */
+.adw-tab-close {
+    width: 22;
+    height: 22;
+    margin: 0 0 0 4;
+    border-radius: 7;
 }
 
 /* ===== Carousel (swipeable pager) ===== */
@@ -1036,6 +1235,25 @@ Page.ns-dark.adw-window {
     border-top-color: rgba(255, 255, 255, 0.12);
 }
 
+/* ===== Dark: view switcher bar ===== */
+
+.ns-dark .adw-viewswitcherbar {
+    background-color: #2e2e32;
+    border-top-color: rgba(255, 255, 255, 0.12);
+}
+
+.ns-dark .adw-viewswitcherbar-button:highlighted {
+    background-color: rgba(255, 255, 255, 0.06);
+}
+
+.ns-dark .adw-viewswitcherbar-button-label {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.ns-dark .adw-viewswitcherbar-button.active .adw-viewswitcherbar-button-label {
+    color: #78aeed;
+}
+
 /* ===== Dark: spinner ===== */
 
 .ns-dark .adw-spinner {
@@ -1048,7 +1266,7 @@ Page.ns-dark.adw-window {
     background-color: #222226;
 }
 
-.ns-dark .adw-status-page-icon {
+.ns-dark .adw-status-page-icon-glyph {
     color: rgba(255, 255, 255, 0.35);
 }
 
@@ -1085,7 +1303,23 @@ Page.ns-dark.adw-window {
 /* ===== Dark: toggle group ===== */
 
 .ns-dark .adw-toggle-group {
-    color: #78aeed;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .adw-toggle-group.flat {
+    background-color: transparent;
+}
+
+.ns-dark .adw-toggle-button.active {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.ns-dark .adw-toggle-button:highlighted {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.ns-dark .adw-toggle-label {
+    color: rgba(255, 255, 255, 0.85);
 }
 
 /* ===== Dark: view switcher ===== */
@@ -1095,15 +1329,14 @@ Page.ns-dark.adw-window {
     background-color: rgba(255, 255, 255, 0.08);
 }
 
-.ns-dark .adw-view-switcher-button,
-.ns-dark .adw-inline-view-switcher-button {
-    color: rgba(255, 255, 255, 0.65);
+.ns-dark .adw-view-switcher-button-label,
+.ns-dark .adw-inline-view-switcher-button-label {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .ns-dark .adw-view-switcher-button.active,
 .ns-dark .adw-inline-view-switcher-button.active {
     background-color: #45454c;
-    color: #ffffff;
 }
 
 /* ===== Dark: tab view ===== */
@@ -1113,13 +1346,12 @@ Page.ns-dark.adw-window {
     border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 
-.ns-dark .adw-tab-view-tab {
-    color: rgba(255, 255, 255, 0.6);
+.ns-dark .adw-tab-view-tab-label {
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .ns-dark .adw-tab-view-tab.active {
-    color: #78aeed;
-    border-bottom-color: #78aeed;
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 /* ===== Dark: carousel ===== */