@gjsify/adwaita-nativescript 0.41.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-nativescript",
-    "version": "0.41.0",
+    "version": "0.42.0",
     "description": "Native Adwaita widgets for the NativeScript runtime — real NativeScript components (StackLayout/GridLayout/Switch/Label) styled like Libadwaita, not a webview",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -47,10 +47,10 @@
         "design-system"
     ],
     "dependencies": {
-        "@gjsify/adwaita-core": "^0.41.0",
-        "@gjsify/adwaita-fonts": "^0.41.0",
-        "@gjsify/adwaita-icons": "^0.41.0",
-        "@gjsify/native-platform": "^0.41.0"
+        "@gjsify/adwaita-core": "^0.42.0",
+        "@gjsify/adwaita-fonts": "^0.42.0",
+        "@gjsify/adwaita-icons": "^0.42.0",
+        "@gjsify/native-platform": "^0.42.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -61,8 +61,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.41.0",
-        "@gjsify/unit": "^0.41.0",
+        "@gjsify/cli": "^0.42.0",
+        "@gjsify/unit": "^0.42.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },

package/src/theme/adwaita.css

@@ -74,6 +74,59 @@ Page.adw-window {
     margin: 0;
 }
 
+/* ===== Card (the documented `.card` style class) ===== */
+
+/* One surface, two spellings — the pattern `.boxed-list` above already uses.
+ * Upstream `.card` and the boxed list ARE the same recipe
+ * (stylesheet/widgets/_misc.scss:197-236); `@gjsify/adwaita-web` factors both out
+ * of a single `%card` placeholder, so this repeats the colours above rather than
+ * inventing a second card. `.adw-card` is the spelling a view copied from the
+ * browser twin carries, and it was styled by NOTHING here: a NativeScript view
+ * setting `className = 'adw-card'` rendered a transparent box with square corners.
+ *
+ * No box-shadow, no border: the NS CSS subset has neither, which is why
+ * `.boxed-list` has neither. The padding is the one thing the ELEMENT adds over
+ * the bare class in the browser port (`--spacing-l`, 18) — a bare `.card` in
+ * libadwaita deliberately has none, but every NS view reaching for this name is
+ * the element's analogue. */
+.card,
+.adw-card {
+    background-color: #ffffff;
+    color: rgba(0, 0, 6, 0.8);
+    border-radius: 12;
+}
+
+/* The padding is the ELEMENT's, not the class's, and both other renderers split them
+ * exactly here: libadwaita's `%card` recipe is background / foreground / radius / shadow
+ * and no padding (_misc.scss:197-236), and `@gjsify/adwaita-web` puts
+ * `padding: var(--spacing-l)` on `adw-card, .adw-card` alone (scss/_card.scss:16-23,
+ * `--spacing-l: 18px`). A bare `.card` is a surface you fill yourself. */
+.adw-card {
+    padding: 18;
+}
+
+/* ===== Label utility classes ===== */
+
+/* `.dimmed` is the whole of libadwaita's `dim_label`: an opacity, applied wherever the
+ * class lands. This theme only had it as `.adw-shortcut-label .dimmed` below — a
+ * SCOPED rule for the separator inside a shortcut label — so a Label carrying `dimmed`
+ * anywhere else rendered at full strength. The storybook's shortcut-label story does
+ * exactly that (`shortcut-label.ns.ts:70`, a Label added to the GridLayout as a SIBLING
+ * of the AdwShortcutLabel), while its browser twin sets the same class and hits
+ * `@gjsify/adwaita-web`'s unscoped rule (scss/_labels.scss:48) — one renderer dimmed
+ * that column, the other did not.
+ *
+ * Opacity only, so there is no dark-scheme twin: `--dim-opacity: 55%`
+ * (_colors.scss:319) is the same number in both. The scoped rule below still adds the
+ * separator's size, colour and padding on top of it, at higher specificity.
+ *
+ * It is also the first of `_labels.scss`'s utility set to land here; the rest
+ * (`.title-1`…`.title-4`, `.accent`/`.success`/`.warning`, `.heading`, `.numeric`, …)
+ * is an open entry in status/open-todos.md. */
+.dimmed {
+    opacity: 0.55;
+}
+
 /* ===== Rows ===== */
 
 .adw-row {
@@ -1532,6 +1585,12 @@ Page.ns-dark.adw-window {
     color: #ffffff;
 }
 
+.ns-dark .card,
+.ns-dark .adw-card {
+    background-color: #34343a;
+    color: #ffffff;
+}
+
 .ns-dark .adw-row,
 .ns-dark .adw-action-row {
     background-color: transparent;