@gemboss/gem-framework 0.12.1 → 0.13.0

package/README.md

@@ -93,6 +93,17 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.13.0** (11/10/2026): kiểu nút **`gradient`** (`plan.global_settings.button_style`, `<body data-gem-button-style="gradient">`).
+  GemFactory Global Style đo 339 trang store hàng đầu: nút mua chính là gradient ở 8,4% (10,6% trang landing), 16/21 cái đo
+  được là MỘT tông đi từ sáng sang sẫm, và 14/21 có chữ dưới 4,5:1. Đầu kia của gradient là màu nhấn dời 25%
+  (`GEM_BUTTON_GRADIENT_SHIFT`) RA XA chữ nút: về đen khi màu nhấn tối hơn chữ, về trắng khi sáng hơn, nên chữ không bao giờ
+  kém tương phản hơn trên nền đặc. Viết bằng CSS (`color-mix` + `rgb(from …)`), đọc `--gem-color-accent` / `-accent-text`,
+  nên nút trong băng tối / băng accent theo bộ màu của băng; nằm trong `@supports`, trình duyệt không có cú pháp màu tương đối
+  giữ nút đặc như cũ. Bỏ qua nút link và secondary. Export mới: `gemButtonGradientEnd` (cùng phép tính bằng JS, cho phép đo),
+  `gemButtonGradientEndCss`, `GEM_BUTTON_GRADIENT_SHIFT`, `GEM_BUTTON_GRADIENT_PIVOT`. Schema `@gemtheme/schemas`: một
+  `buttonStyleSchema` cho cả ba chỗ trước đây tự liệt kê (cài đặt theme, design system plan, preset morph). Store không chọn
+  gradient không đổi gì, nên không cần edition mới. Biết mà chưa sửa: luật outline / soft cũng chạm nút link (chờ edition sau).
+
 - **0.12.1** (10/10/2026): hai ca biên của token nút, review gemsite #839 bắt khi gemsite chép phép đọc này để phát token
   cho store. (1) Bo trỏ một bậc bo khác (`radius.button: var(--gem-radius-pill)`) không bị nhân núm `--gem-style-radius`
   lần hai: bậc được trỏ tới đã nhân rồi (pill 1,4 thành 1,96×). Áp chung cho mọi thang qua `toScaledCssVars`; giá trị số

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.12.1",
-  "gemtheme_sha": "4ceacbe0c2ace7da410851fc5fe15589c1d87b77",
+  "version": "0.13.0",
+  "gemtheme_sha": "3e6e73a7466bf54609b5e81abfc3c4d4a06b42d6",
   "gemtheme_dirty": false,
-  "framework_version": "0.12.1"
+  "framework_version": "0.13.0"
 }

package/dist/gem-framework.css

@@ -214,6 +214,16 @@ a {
   border-color: transparent;
   color: var(--gem-color-text);
 }
+@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {
+  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),
+  [data-gem-button-style='gradient'] .gem-button--primary {
+    background-color: var(--gem-color-accent);
+    background-image: linear-gradient(135deg, var(--gem-color-accent), color-mix(in srgb, var(--gem-color-accent) 75%, rgb(from color-mix(in srgb, var(--gem-color-accent) 50%, rgb(from var(--gem-color-accent-text, var(--gem-color-surface)) calc(255 - r) calc(255 - g) calc(255 - b))) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) / 1)));
+    background-origin: border-box;
+    border-color: transparent;
+    color: var(--gem-color-accent-text, var(--gem-color-surface));
+  }
+}
 .gem-card {
   border: var(--gem-border-subtle, 1px solid var(--gem-color-border));
   border-radius: var(--gem-card-radius, var(--gem-radius-md));

package/dist/index.js

@@ -259,9 +259,28 @@ function aaLabelColor(preferred, fill, fallbacks = []) {
   if (pass) return pass;
   return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
 }
+var GEM_BUTTON_GRADIENT_SHIFT = 0.25;
+var GEM_BUTTON_GRADIENT_PIVOT = 127.5;
+var weighted = (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 * b;
+var target = (w) => Math.min(255, Math.max(0, (w - GEM_BUTTON_GRADIENT_PIVOT) * 1e3));
+function gemButtonGradientEnd(accent, accentText) {
+  const a = normalizeHex(accent);
+  const t = normalizeHex(accentText);
+  if (!a || !t) return void 0;
+  const ch = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const [ar, ag, ab] = ch(a);
+  const [tr, tg, tb] = ch(t);
+  const gray = Math.round(target(weighted((ar + 255 - tr) / 2, (ag + 255 - tg) / 2, (ab + 255 - tb) / 2))).toString(16).padStart(2, "0");
+  return mixHex(a, `#${gray}${gray}${gray}`, GEM_BUTTON_GRADIENT_SHIFT);
+}
+function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText = "var(--gem-color-accent-text, var(--gem-color-surface))") {
+  const t = `clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - ${GEM_BUTTON_GRADIENT_PIVOT}) * 1000, 255)`;
+  const probe = `color-mix(in srgb, ${accent} 50%, rgb(from ${accentText} calc(255 - r) calc(255 - g) calc(255 - b)))`;
+  return `color-mix(in srgb, ${accent} ${100 - GEM_BUTTON_GRADIENT_SHIFT * 100}%, rgb(from ${probe} ${t} ${t} ${t} / 1))`;
+}
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.12.1";
+var gemFrameworkVersion = "0.13.0";
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
 var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
 var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
@@ -464,13 +483,13 @@ function readPhoneTokens(tokens) {
   for (const group of ["spacing", "layout"]) {
     const ownGroup = group === "spacing" ? /var\(\s*--gem-space-/i : /var\(\s*--gem-layout-/i;
     for (const [key, raw] of Object.entries(tokens?.[group] ?? {})) {
-      const target = gemPhoneTokenTarget(group, key);
-      if (target == null) continue;
+      const target2 = gemPhoneTokenTarget(group, key);
+      if (target2 == null) continue;
       const v = stripImportant(String(raw ?? "")).trim();
       const kind = gemSpaceMdKind(v);
       if (kind === "absent") continue;
-      if (kind === "zero") out[group][target] = "0px";
-      else if (kind === "length" && !ownGroup.test(v)) out[group][target] = v;
+      if (kind === "zero") out[group][target2] = "0px";
+      else if (kind === "length" && !ownGroup.test(v)) out[group][target2] = v;
       else out.invalid.push({ path: `${group}.${key}`, value: raw, why: kind === "length" ? `it reads a ${group} variable, which re-declared on :root is a cycle` : "not a length (a number needs a unit, e.g. 70px)" });
     }
   }
@@ -1767,6 +1786,9 @@ function createPrimitiveCss() {
     // and `.gem-button--soft` following button_style on the published storefront but NOT in the
     // preview, which is the drift this rule exists to remove. `--primary` is named too so the
     // modifier keeps winning where both could apply.
+    // KNOWN (11/10/2026): these two also reach `.gem-button--link` (soft paints its tint behind a link-styled button,
+    // outline recolours it). The gradient rule below leaves the link out; fixing these changes stores that did not ask,
+    // so it waits for the next framework edition (editions.ts).
     "[data-gem-button-style='outline'] .gem-button:not(.gem-button--secondary),",
     "[data-gem-button-style='outline'] .gem-button--primary {",
     "  background: transparent;",
@@ -1778,6 +1800,28 @@ function createPrimitiveCss() {
     "  border-color: transparent;",
     "  color: var(--gem-color-text);",
     "}",
+    // `gradient` (0.13.0). GemFactory Global Style, 339 top-store pages: the main CTA is a gradient on 8.4% (10.6% of
+    // landing pages), and 16 of the 21 measured are ONE hue going lighter → darker; 14 of the 21 drew their text under
+    // 4.5:1. The far stop is the accent moved GEM_BUTTON_GRADIENT_SHIFT AWAY from the button text: toward black when the
+    // accent is the darker of the two, toward white when it is the lighter (gemButtonGradientEnd is the same sum in JS;
+    // contrast.ts has the two versions that failed), so the text only gains contrast across the button. It reads
+    // --gem-color-accent / -accent-text, which a dark or accent band points at its own scheme, so a gradient button inside
+    // a band follows the band. The text colour is set here because a bare `.gem-button` sets none. The link variant is
+    // left out (it is text). Behind @supports, and in LONGHANDS: @supports only proves the syntax parses, and a value that
+    // still fails at computed time (a var() that does not resolve) would take the whole `background` shorthand to
+    // transparent under white text (review of #737, reproduced). As longhands only the image drops, over the accent.
+    // Near black or white the two stops all but meet (#121212 → #0e0e0e): moving toward the text would break the AA
+    // promise, so such a palette draws a flat button, and GemFactory's preset gate says so.
+    "@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {",
+    "  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),",
+    "  [data-gem-button-style='gradient'] .gem-button--primary {",
+    "    background-color: var(--gem-color-accent);",
+    `    background-image: linear-gradient(135deg, var(--gem-color-accent), ${gemButtonGradientEndCss()});`,
+    "    background-origin: border-box;",
+    "    border-color: transparent;",
+    "    color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  }",
+    "}",
     ".gem-card {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-card-radius, var(--gem-radius-md));",
@@ -6389,9 +6433,9 @@ function renderHeroElementBlocks(section) {
     const s = b?.settings ?? {};
     if (b?.type === "countdown") {
       const label = str(s.label) ? `<p class="gem-hero__countdown-label">${escapeHtml(str(s.label))}</p>` : "";
-      const target = escapeAttribute(str(s.end_date));
+      const target2 = escapeAttribute(str(s.end_date));
       const unit = (n, l) => `<div class="gem-countdown__unit"><span class="gem-countdown__num" data-gem-cd-${n}>00</span><span class="gem-countdown__label">${l}</span></div>`;
-      return `<div class="gem-hero__countdown">${label}<div class="gem-countdown" data-gem-countdown data-gem-countdown-target="${target}" role="timer" aria-label="Offer countdown">${unit("days", "Days")}<div class="gem-countdown__sep">:</div>${unit("hours", "Hrs")}<div class="gem-countdown__sep">:</div>${unit("mins", "Min")}<div class="gem-countdown__sep">:</div>${unit("secs", "Sec")}</div></div>`;
+      return `<div class="gem-hero__countdown">${label}<div class="gem-countdown" data-gem-countdown data-gem-countdown-target="${target2}" role="timer" aria-label="Offer countdown">${unit("days", "Days")}<div class="gem-countdown__sep">:</div>${unit("hours", "Hrs")}<div class="gem-countdown__sep">:</div>${unit("mins", "Min")}<div class="gem-countdown__sep">:</div>${unit("secs", "Sec")}</div></div>`;
     }
     if (b?.type === "trust_badges") {
       const items = ["badge_1", "badge_2", "badge_3"].map((k) => str(s[k])).filter(Boolean).map((t) => `<li class="gem-hero__trust-item"><svg class="gem-hero__trust-check" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>${escapeHtml(t)}</li>`).join("");
@@ -7255,6 +7299,8 @@ export {
   GEM_AMBIENT_CSS,
   GEM_BAND_SCHEMES,
   GEM_BAND_SCHEME_FALLBACK_CSS,
+  GEM_BUTTON_GRADIENT_PIVOT,
+  GEM_BUTTON_GRADIENT_SHIFT,
   GEM_BUTTON_TOKEN_KEYS,
   GEM_BUTTON_TOKEN_SHAPES,
   GEM_COUNTDOWN_ENDED_CSS,
@@ -7310,6 +7356,8 @@ export {
   gemBandSchemeCssVars,
   gemBandSchemeDeclarations,
   gemButtonCaseCss,
+  gemButtonGradientEnd,
+  gemButtonGradientEndCss,
   gemFormAttributes,
   gemFormCssBlock,
   gemFormCssVars,

package/dist/primitives.css

@@ -143,6 +143,16 @@ a {
   border-color: transparent;
   color: var(--gem-color-text);
 }
+@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {
+  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),
+  [data-gem-button-style='gradient'] .gem-button--primary {
+    background-color: var(--gem-color-accent);
+    background-image: linear-gradient(135deg, var(--gem-color-accent), color-mix(in srgb, var(--gem-color-accent) 75%, rgb(from color-mix(in srgb, var(--gem-color-accent) 50%, rgb(from var(--gem-color-accent-text, var(--gem-color-surface)) calc(255 - r) calc(255 - g) calc(255 - b))) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - 127.5) * 1000, 255) / 1)));
+    background-origin: border-box;
+    border-color: transparent;
+    color: var(--gem-color-accent-text, var(--gem-color-surface));
+  }
+}
 .gem-card {
   border: var(--gem-border-subtle, 1px solid var(--gem-color-border));
   border-radius: var(--gem-card-radius, var(--gem-radius-md));

package/dist/section-gate.js

@@ -139,6 +139,13 @@ function aaLabelColor(preferred, fill, fallbacks = []) {
   if (pass) return pass;
   return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
 }
+var GEM_BUTTON_GRADIENT_SHIFT = 0.25;
+var GEM_BUTTON_GRADIENT_PIVOT = 127.5;
+function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText = "var(--gem-color-accent-text, var(--gem-color-surface))") {
+  const t = `clamp(0, (0.2126 * r + 0.7152 * g + 0.0722 * b - ${GEM_BUTTON_GRADIENT_PIVOT}) * 1000, 255)`;
+  const probe = `color-mix(in srgb, ${accent} 50%, rgb(from ${accentText} calc(255 - r) calc(255 - g) calc(255 - b)))`;
+  return `color-mix(in srgb, ${accent} ${100 - GEM_BUTTON_GRADIENT_SHIFT * 100}%, rgb(from ${probe} ${t} ${t} ${t} / 1))`;
+}
 
 // ../../packages/gem-framework/src/tokens.ts
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
@@ -1438,6 +1445,9 @@ function createPrimitiveCss() {
     // and `.gem-button--soft` following button_style on the published storefront but NOT in the
     // preview, which is the drift this rule exists to remove. `--primary` is named too so the
     // modifier keeps winning where both could apply.
+    // KNOWN (11/10/2026): these two also reach `.gem-button--link` (soft paints its tint behind a link-styled button,
+    // outline recolours it). The gradient rule below leaves the link out; fixing these changes stores that did not ask,
+    // so it waits for the next framework edition (editions.ts).
     "[data-gem-button-style='outline'] .gem-button:not(.gem-button--secondary),",
     "[data-gem-button-style='outline'] .gem-button--primary {",
     "  background: transparent;",
@@ -1449,6 +1459,28 @@ function createPrimitiveCss() {
     "  border-color: transparent;",
     "  color: var(--gem-color-text);",
     "}",
+    // `gradient` (0.13.0). GemFactory Global Style, 339 top-store pages: the main CTA is a gradient on 8.4% (10.6% of
+    // landing pages), and 16 of the 21 measured are ONE hue going lighter → darker; 14 of the 21 drew their text under
+    // 4.5:1. The far stop is the accent moved GEM_BUTTON_GRADIENT_SHIFT AWAY from the button text: toward black when the
+    // accent is the darker of the two, toward white when it is the lighter (gemButtonGradientEnd is the same sum in JS;
+    // contrast.ts has the two versions that failed), so the text only gains contrast across the button. It reads
+    // --gem-color-accent / -accent-text, which a dark or accent band points at its own scheme, so a gradient button inside
+    // a band follows the band. The text colour is set here because a bare `.gem-button` sets none. The link variant is
+    // left out (it is text). Behind @supports, and in LONGHANDS: @supports only proves the syntax parses, and a value that
+    // still fails at computed time (a var() that does not resolve) would take the whole `background` shorthand to
+    // transparent under white text (review of #737, reproduced). As longhands only the image drops, over the accent.
+    // Near black or white the two stops all but meet (#121212 → #0e0e0e): moving toward the text would break the AA
+    // promise, so such a palette draws a flat button, and GemFactory's preset gate says so.
+    "@supports (color: rgb(from color-mix(in srgb, red 50%, rgb(from blue calc(255 - r) g b)) clamp(0, (r - 127.5) * 1000, 255) g b)) {",
+    "  [data-gem-button-style='gradient'] .gem-button:not(.gem-button--secondary, .gem-button--link),",
+    "  [data-gem-button-style='gradient'] .gem-button--primary {",
+    "    background-color: var(--gem-color-accent);",
+    `    background-image: linear-gradient(135deg, var(--gem-color-accent), ${gemButtonGradientEndCss()});`,
+    "    background-origin: border-box;",
+    "    border-color: transparent;",
+    "    color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  }",
+    "}",
     ".gem-card {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-card-radius, var(--gem-radius-md));",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "gem-framework của GemTheme (CSS, runtime, token, bộ kiểm) cộng đúng bộ kiểm section gemtheme dùng khi duyệt. Build từ gemtheme, không sửa ở đây.",
   "type": "module",
   "main": "./dist/index.js",