graphen 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/example/styles/_docs.scss

@@ -645,6 +645,72 @@ body.docs-body {
   .swatch-radius { width: 36px; height: 24px; background: var(--surface-2); border: 1px solid var(--border-strong); }
 }
 
+.docs-bp-grid {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.docs-bp-row {
+  display: grid;
+  grid-template-columns: 180px 120px 1fr;
+  gap: 16px;
+  align-items: center;
+  padding: 10px 18px;
+  border-top: 1px solid var(--border);
+
+  &:first-child { border-top: none; }
+
+  .mixin,
+  .range { font-family: var(--font-mono); font-size: 12.5px; }
+  .range { color: var(--text-muted); }
+  .vars { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
+}
+
+.docs-bp-demo {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+
+  .pill {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    min-width: 128px;
+    padding: 10px 18px;
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    opacity: 0.35;
+    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
+
+    .nm { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
+    .rg { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
+  }
+}
+
+/* The live part of the Responsiveness demo — powered by the
+   library's own gx-* mixins, not by docs-local media queries. */
+@mixin docs-bp-pill-active {
+  background: var(--accent-soft);
+  border: 1px solid var(--accent);
+  opacity: 1;
+}
+
+@include gx-phone {
+  .docs-bp-demo .pill--phone { @include docs-bp-pill-active; }
+}
+
+@include gx-tablet {
+  .docs-bp-demo .pill--tablet { @include docs-bp-pill-active; }
+}
+
+@include gx-desktop {
+  .docs-bp-demo .pill--desktop { @include docs-bp-pill-active; }
+}
+
 .docs-comp-index {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

package/src/example.tsx

@@ -104,6 +104,16 @@ const SPACING = [
   ["$gb-sp-16", "64 px", "4rem", 64],
 ] as const;
 
+const BREAKPOINTS = [
+  ["@include gx-phone", "< 768 px", "up to $g-tablet-width − 1px"],
+  [
+    "@include gx-tablet",
+    "768 – 1023 px",
+    "$g-tablet-width … $g-desktop-width − 1px",
+  ],
+  ["@include gx-desktop", "≥ 1024 px", "$g-desktop-width and up"],
+] as const;
+
 const RADIUS = [
   ["$gb-r-sm", "4 px", 4],
   ["$gb-r", "6 px", 6],
@@ -166,6 +176,7 @@ const NAV = [
       { id: "typography", label: "Typography" },
       { id: "spacing", label: "Spacing & radius" },
       { id: "iconography", label: "Iconography", count: "14" },
+      { id: "responsiveness", label: "Responsiveness" },
     ],
   },
   {
@@ -195,6 +206,7 @@ const TOC = [
   ["typography", "Typography"],
   ["spacing", "Spacing & radius"],
   ["iconography", "Iconography"],
+  ["responsiveness", "Responsiveness"],
   ["logo", "Logo"],
   ["button", "Button"],
   ["link", "Link"],
@@ -713,6 +725,60 @@ function App() {
             </div>
           </section>
 
+          <section className="docs-section" id="responsiveness">
+            <div className="docs-section-eyebrow">Foundations / 05</div>
+            <h2 className="docs-section-title">Responsiveness</h2>
+            <p className="docs-section-desc">
+              Breakpoints are exposed as Sass variables and wrapped by three
+              mixins — <code>gx-phone</code>, <code>gx-tablet</code> and{" "}
+              <code>gx-desktop</code>. Each mixin scopes its block to exactly
+              one range, so the three never overlap. The demo below is styled
+              with the real mixins — resize the window to see the active range
+              light up.
+            </p>
+            <div className="docs-bp-grid" role="table" aria-label="Breakpoints">
+              {BREAKPOINTS.map(([mixin, range, vars]) => (
+                <div className="docs-bp-row" key={mixin}>
+                  <span className="mixin">{mixin}</span>
+                  <span className="range">{range}</span>
+                  <span className="vars">{vars}</span>
+                </div>
+              ))}
+            </div>
+            <div className="docs-spacer-y" />
+            <Demo
+              stageClass="center"
+              code={`.docs-bp-demo .pill { opacity: 0.35; }
+
+@include gx-phone {
+  .docs-bp-demo .pill--phone { opacity: 1; }
+}
+
+@include gx-tablet {
+  .docs-bp-demo .pill--tablet { opacity: 1; }
+}
+
+@include gx-desktop {
+  .docs-bp-demo .pill--desktop { opacity: 1; }
+}`}
+            >
+              <div className="docs-bp-demo">
+                <div className="pill pill--phone">
+                  <span className="nm">gx-phone</span>
+                  <span className="rg">&lt; 768 px</span>
+                </div>
+                <div className="pill pill--tablet">
+                  <span className="nm">gx-tablet</span>
+                  <span className="rg">768 – 1023 px</span>
+                </div>
+                <div className="pill pill--desktop">
+                  <span className="nm">gx-desktop</span>
+                  <span className="rg">≥ 1024 px</span>
+                </div>
+              </div>
+            </Demo>
+          </section>
+
           <section className="docs-section" id="logo">
             <div className="docs-section-eyebrow">Components / 01</div>
             <h2 className="docs-section-title">Logo</h2>