initial commit

2026-09-11 02:46:56 +02:00
commit 20b384039c
288 changed files with 46557 additions and 0 deletions
@@ -0,0 +1,62 @@
+/* ============================================================================
+   ARROW ICON  -  figma `arrow-small-right` 84:4260 / `arrow-small-lift` 140:8078
+   ----------------------------------------------------------------------------
+   The exported asset is at /assets/icons/arrow-small-right.svg. Its path is
+   filled with a hard-coded black, so it is applied as a mask over
+   `currentColor` instead of being dropped in an <img>: that is the only way the
+   arrow can turn white on a Primary button, dark grey on a Secondary one and
+   green on a Ghost one while remaining the exact exported bytes.
+
+   GEOMETRY, straight from Figma: a 24x24 clipped box (`--control-icon-size`)
+   with the 12.9996 x 11.414 leaf inset 20.8333% from the left, 25% from the
+   right and 26.22% top and bottom. The insets are physical on purpose - the
+   glyph is asymmetric, which app.css names as the one case that cannot be
+   expressed logically, so mirroring is done by flipping the whole box.
+
+   DIRECTION. Figma's left arrow is not a second drawing: node 140:8078 is this
+   same asset with `-scale-x-100`. So `forward` (the arrow that follows reading
+   order) is the exported right arrow in LTR and that same box mirrored in RTL,
+   which is exactly what the Arabic home 85:5029 shows in its hero CTA.
+   ========================================================================= */
+
+@layer theme, base, components, utilities;
+
+@layer components {
+  .sh-arrow-icon {
+    position: relative;
+    display: inline-block;
+    flex: none;
+    inline-size: var(--control-icon-size);
+    block-size: var(--control-icon-size);
+    overflow: hidden;
+  }
+
+  .sh-arrow-icon__glyph {
+    position: absolute;
+    top: 26.22%;
+    bottom: 26.22%;
+    left: 20.8333%;
+    right: 25%;
+    background-color: currentColor;
+    -webkit-mask-image: url("/assets/icons/arrow-small-right.svg");
+    mask-image: url("/assets/icons/arrow-small-right.svg");
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  /* Mirror the box, not the glyph, so the 1px asymmetry of the inset mirrors
+     with it - this reproduces node 140:8078 rather than approximating it. */
+  .sh-arrow-icon[data-direction="backward"] {
+    transform: scaleX(-1);
+  }
+
+  [dir="rtl"] .sh-arrow-icon[data-direction="forward"] {
+    transform: scaleX(-1);
+  }
+
+  [dir="rtl"] .sh-arrow-icon[data-direction="backward"] {
+    transform: none;
+  }
+}