@lmb-it/kitsconcerto-native 0.1.286 → 0.1.287

package/packages/types/src/Theme/defaultTheme.js

@@ -1205,111 +1205,189 @@ const defaultTheme = {
     // same rule `Input.inputGroup` carries: React Native's ViewStyle wants
     // `borderWidth: 1`, web treats the bare `1` as `1px`, and one shared
     // declaration then renders the same frame on both.
+    /* ─── ImageCropper ────────────────────────────────────────
+               ⛔ EVERY NUMBER HERE IS MEASURED OFF THE MOCKUP,
+               `UML/UI/ClientPortal/AlphaMatch - Image Cropper.dc.html`, which is
+               the design source for this component. Changing one of them is a
+               design change, not a tidy-up — check the mockup first.
+    
+               ⚠️ THE STAGE AND ITS CHROME DO NOT INVERT WITH THE COLOUR MODE. A
+               photograph has to read against the stage in light mode and dark
+               mode alike, so the dark surfaces below are literals and the alpha
+               families (literal in both modes by construction) carry the rest.
+               The light chrome — header, footer, card — goes through tokens. */
     ImageCropper: {
       root: {
         style: {
           backgroundColor: "surface-card",
-          borderRadius: 16,
+          borderRadius: 20,
           overflow: "hidden"
+          /* ⚠️ THE CARD'S DROP SHADOW IS NOT HERE. On web
+             `IStyleClasses` types `shadowColor`/`shadowOpacity`/
+             `shadowRadius`/`shadowOffset`/`elevation` as `null` —
+             they are the NATIVE spelling, and putting them in a slot
+             is a type error in the web project (the `handle` slot
+             below is the pre-existing instance of exactly that).
+             Each platform file applies the mockup's
+             `0 24px 64px rgba(0,0,0,.35)` in its own spelling:
+             `boxShadow` on web, `shadow*` on native. */
         }
       },
       header: {
         style: {
-          paddingLeft: 16,
-          paddingRight: 16,
-          paddingTop: 12,
-          paddingBottom: 12,
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 18,
+          paddingBottom: 18,
           borderBottomWidth: 1,
-          borderColor: "border"
+          borderColor: "#F0F1F3",
+          gap: 12
         }
       },
       title: {
-        style: { fontSize: 16, fontWeight: "600", fontColor: "text-primary" }
+        style: {
+          fontSize: 17,
+          fontWeight: "800",
+          fontColor: "text-primary",
+          /* ⚠️ A STRING WITH UNITS. `letterSpacing` is typed
+             `LetterSpacing<0 | (string & {})>`, so a bare -0.17 does
+             not compile — and the mockup writes `-.01em` anyway. */
+          letterSpacing: "-0.01em"
+        }
       },
       content: {
-        style: { padding: 16, gap: 12 }
+        style: {
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 22,
+          paddingBottom: 22,
+          /* The mockup's left column: stage, then the tool row, 14 apart. */
+          gap: 14
+        }
       },
       /* The stage. Dark on purpose: a photo reads against it in either
          colour mode, and a light stage makes every pale image look like
          it has no edges. */
       container: {
         style: {
-          backgroundColor: "black-alpha-90",
-          borderRadius: 12,
+          backgroundColor: "#0E1A1C",
+          borderRadius: 14,
           overflow: "hidden"
         }
       },
       footer: {
         style: {
-          paddingLeft: 16,
-          paddingRight: 16,
-          paddingTop: 12,
-          paddingBottom: 12,
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 14,
+          paddingBottom: 14,
           borderTopWidth: 1,
-          borderColor: "border",
-          gap: 8
+          borderColor: "#F0F1F3",
+          gap: 10
         }
       },
-      icon: { style: { fontColor: "text-primary" } },
-      text: { style: { fontSize: 12, fontColor: "text-secondary" } },
+      icon: { style: { fontColor: "#6B7280" } },
+      text: { style: { fontSize: 12.5, fontColor: "#9CA3AF" } },
       /* ⛔ THE SCRIM IS AN ALPHA TOKEN, NOT A SOLID. `black-alpha-*` is
-         literal in both colour modes — a scrim that inverted in dark mode
-         would light UP the area the user is cropping away. */
-      shade: { style: { backgroundColor: "black-alpha-60" } },
+                     literal in both colour modes — a scrim that inverted in dark mode
+                     would light UP the area the user is cropping away.
+      
+                     ⚠️ 0.66, NOT 0.74. The mockup uses two different dims and they
+                     are not interchangeable: 0.66 is the scrim around the window,
+                     0.74 is the full-stage overlay while saving. */
+      shade: { style: { backgroundColor: "rgba(6,14,16,0.66)" } },
       cropWindow: { style: { borderWidth: 2, borderColor: "#FFFFFF" } },
-      gridLine: { style: { backgroundColor: "white-alpha-40" } },
+      gridLine: { style: { backgroundColor: "white-alpha-50" } },
+      /* ⚠️ A ROUND KNOB WITH A TEAL RING, not a bare square. Against a
+                     photo a flat white square disappears into any pale area; the ring
+                     and the drop shadow are what keep a grip findable on a bright
+                     image, and the mockup draws the ring in the accent so a grip
+                     never reads as part of the picture.
+      
+                     ⚠️ THE SIZE HERE IS THE CORNER KNOB'S. The four EDGE grips are
+                     bars, not circles — the platform files size those from
+                     `HANDLE_BAR_LONG` / `HANDLE_BAR_SHORT`, because one slot cannot
+                     carry two shapes. */
       handle: {
         style: {
           backgroundColor: "#FFFFFF",
-          borderRadius: 2,
-          width: 14,
-          height: 14
+          borderRadius: 999,
+          width: 16,
+          height: 16,
+          borderWidth: 3,
+          borderColor: "#20AAB0"
+          /* ⛔ NO `shadow*`/`elevation` HERE, AND THIS IS THE ONE THAT
+             BROKE A RELEASE. They are the NATIVE spelling; on web
+             `IStyleClasses` types all five as `null`, so they are a
+             type ERROR — and `packages/types` is built with
+             `tsc -p tsconfig.web.json`, an EMITTING build that
+             `publish.yml` runs as its first step and that must exit
+             zero. Five keys here failed that step and the release
+             never reached npm.
+             The grip's drop shadow is applied by the platform file
+             instead: `boxShadow` in `index.web.tsx`. Native renders
+             no grips at all — it fixes the window and moves the
+             image — so there is nothing to spell there. */
         }
       },
       zoomChip: {
         style: {
           backgroundColor: "black-alpha-60",
           fontColor: "#FFFFFF",
-          borderRadius: 999,
+          borderRadius: 13,
           paddingLeft: 10,
           paddingRight: 10,
-          paddingTop: 2,
-          paddingBottom: 2,
-          fontSize: 12,
-          fontWeight: "600"
+          height: 26,
+          fontSize: 11.5,
+          fontWeight: "700"
         }
       },
+      /* The mockup rings the preview in white and floats it, rather than
+         outlining it — an outline on a photo reads as part of the photo. */
       previewFrame: {
         style: {
-          borderWidth: 1,
-          borderColor: "border",
+          borderWidth: 4,
+          borderColor: "#FFFFFF",
           borderRadius: 12,
           overflow: "hidden",
-          backgroundColor: "bg-subtle"
+          backgroundColor: "#E5E7EB"
+          /* The float — `0 4px 14px rgba(0,0,0,.14)` — is applied by
+             each platform file, for the reason given on `root`. */
         }
       },
+      /* ⛔ THE DROP TARGET LIVES ON THE STAGE, NOT INSTEAD OF IT. It used
+         to be a light box that replaced the dark stage entirely, so
+         choosing a photo made the whole component change colour. The
+         mockup keeps the stage and insets a dashed frame inside it. */
       dropZone: {
         style: {
-          borderWidth: 1,
+          borderWidth: 1.5,
           borderStyle: "dashed",
-          borderColor: "border-strong",
-          borderRadius: 12,
-          backgroundColor: "bg-subtle",
-          padding: 24
+          borderColor: "white-alpha-20",
+          borderRadius: 14,
+          backgroundColor: "#0E1A1C",
+          padding: 20,
+          gap: 9
         }
       },
-      progressFill: { style: { backgroundColor: "primary", height: 4 } },
+      progressFill: { style: { backgroundColor: "#20AAB0", height: 5, borderRadius: 999 } },
       /* ⛔ THE SHAPE SLOT, AND IT CARRIES THE *RECTANGLE'S* RADIUS. The
-         circle is NOT a 999 pill set here — `maskShape: 'circle'` makes
-         the component use a true 50%, because a pill radius on a window
-         that is wider than it is tall gives a STADIUM, not a circle.
-         That is exactly what shipped for one render of the 16:9 cover
-         story: 999 leaked out of this slot into the rectangle case and
-         drew a lozenge. What belongs here is the corner rounding a
-         RECTANGULAR window should have; the circle overrides it. */
-      mask: { style: { borderRadius: 12 } },
-      track: { style: { backgroundColor: "bg-accent", borderRadius: 999, height: 4 } },
-      thumb: { style: { backgroundColor: "primary", borderRadius: 999 } }
+                     circle is NOT a 999 pill set here — `maskShape: 'circle'` makes
+                     the component use a true 50%, because a pill radius on a window
+                     that is wider than it is tall gives a STADIUM, not a circle.
+                     That is exactly what shipped for one render of the 16:9 cover
+                     story: 999 leaked out of this slot into the rectangle case and
+                     drew a lozenge. What belongs here is the corner rounding a
+                     RECTANGULAR window should have; the circle overrides it.
+      
+                     ⚠️ 3, NOT 12 — the mockup's cover window is very nearly square
+                     cornered, because a banner crop with 12px corners does not match
+                     the banner it is cropped for. */
+      mask: { style: { borderRadius: 3 } },
+      /* The zoom rail sits on the dark stage on a phone, so its unfilled
+         half is a white alpha rather than a surface token. */
+      track: { style: { backgroundColor: "white-alpha-20", borderRadius: 999, height: 4 } },
+      thumb: { style: { backgroundColor: "#20AAB0", borderRadius: 999 } }
     },
     Sidebar: {
       root: {