@gemboss/gem-framework 0.10.1 → 0.12.1

package/README.md

@@ -93,6 +93,46 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **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ố
+  và biến ngoài thang (`var(--brand-radius)`) vẫn nhân như cũ. (2) Khai trùng khoá (`buttonTransform` + `button_transform`)
+  giữ giá trị HỢP LỆ cuối cùng; bản cũ xoá mất biến trong khi luật in hoa vẫn trỏ tới nó. Không plan, preset hay giá trị mặc
+  định nào đang dùng hai dạng này, nên không cần edition mới.
+- **0.12.0** (10/10/2026): **edition** (Chris chốt 10/10/2026). Mỗi store ghim một edition; CSS làm đổi hình store
+  không yêu cầu nó thì phát dưới edition kế tiếp thay vì đổi mọi store cùng lúc. Plan mang `framework_edition` (số nguyên,
+  thiếu = 1); storefront đặt nó lên `<html>` thành `data-gem-edition`. Luật của edition N viết dưới
+  `:where([data-gem-edition='N'], …edition sau)`: độ ưu tiên 0, nên mọi luật giữ đúng chỗ của nó trong thác CSS; danh sách
+  edition trong phạm vi sinh từ sổ, nên thêm edition 3 thì luật của edition 2 tự nhận `"3"`. Edition cũ được hỗ trợ 6 tháng
+  kể từ khi có edition mới. Khối luật edition nằm cuối `primitives.css`.
+  **Edition 2:** tiêu đề section = H2, tiêu đề hero = H1 của thang chữ ở màn rộng hơn 760px kể cả khi plan không khai
+  `typography.base` / `scale`; điện thoại giữ cỡ cũ. Đo Chromium trên `globals.css` của gemsite (tiêu đề section / hero, px):
+  1280 64/51 → 43/53, 1366 68/55 → 43/53, 1920 68/77 → 43/53, 768 38/40 → 43/53, 320 và 390 không đổi (32/35, 32/43).
+  Export mới: `GEM_FRAMEWORK_EDITIONS`, `LATEST_GEM_FRAMEWORK_EDITION`, `GEM_EDITION_SUPPORT_MONTHS`,
+  `gemFrameworkEditionOf` (đọc giá trị của plan: thiếu / sai = 1, mới hơn gói biết = edition mới nhất gói biết),
+  `gemFrameworkEditionSupportedUntil`, `gemFrameworkEditionScope`, `gemFrameworkEditionCss`; riêng sổ edition có entry
+  nhẹ `@gemboss/gem-framework/editions` (6,4 KB, kèm `editions.d.ts` do tsc sinh) để storefront đọc `framework_edition`
+  mà không nạp `index.js` (429 KB). `renderGemPreviewDocument` đặt `data-gem-edition` theo plan như storefront.
+  `themePlanSchema` (gói schemas) khai `framework_edition`, đọc dễ dãi như `gemFrameworkEditionOf` (giá trị sai bị bỏ, plan
+  vẫn parse được): công cụ vá theme parse plan, khoá không khai thì bị gỡ. Bộ kiểm biến CSS coi phạm
+  vi edition là gốc (`<html>`). Store không mang `data-gem-edition` vẽ y như 0.11.0.
+- **0.11.0** (10/10/2026): băng nền `data-gem-section-background="dark"` / `"accent"` là một **bộ màu**: luật băng trỏ
+  mọi `--gem-color-*` bắt buộc vào `--gem-scheme-<băng>-<khoá>`. Trước bản này băng chỉ đổi nền và `color` của chính nó:
+  thẻ lồng trong băng vẽ nền sáng với chữ sáng, `color: var(--gem-color-text)` ra chữ tối trên nền tối, section tự vẽ nền
+  bằng token thì đè mất nền băng. Bộ màu có hai tầng:
+  1. `createGemTokenCss` phát giá trị tính sẵn từ màu của plan (`aaTextColor`: chữ, muted, nhấn, trạng thái ≥ 4,5:1 trên
+     nền và surface của băng; chữ nút ≥ 4,5:1 trên màu nhấn của băng). Tắt bằng `{ bandSchemes: false }`.
+  2. CSS của gói mang tầng dự phòng `:where(:root)` (độ ưu tiên 0) tính bằng `var()` / `color-mix` từ `--gem-color-*`: nơi
+     tự đặt `--gem-color-*` bằng tay vẫn ra băng đúng màu brand, chỉ màu nhấn / trạng thái không được bảo đảm AA. Khối
+     token mặc định trong `gem-framework.css` / `tokens.css` không mang tầng 1, để tầng này quyết.
+  `--gem-border-*` đọc màu được khai lại trong phạm vi băng (viền theo băng). Đo 248 section kho GemFactory × 4 preset
+  (18.092 dòng chữ, Chromium): băng tối 3.972 → 211 dòng dưới AA, băng accent 3.980 → 771, không băng giữ 405; chỉ tầng
+  dự phòng: 211 / 769. Phần còn lại là section tự pha màu (`color-mix` tỉ lệ cố định, màu ghi cứng). Thêm export
+  `gemBandSchemeColors`, `gemBandSchemeCssVars`, `gemBandSchemeDeclarations`, `GEM_BAND_SCHEMES`,
+  `GEM_BAND_SCHEME_FALLBACK_CSS`, và phép tính màu dời từ theme-presets: `aaTextColor`, `aaLabelColor`, `hexContrastRatio`,
+  `hexRelativeLuminance`, `mixHex`, `normalizeHex`, `MIN_TEXT_CONTRAST`. Bản chép luật băng ở nơi khác (gemsite
+  `globals.css`) phải mang cả tầng dự phòng: luật băng không có `--gem-scheme-*` nào thì mọi `--gem-color-*` trong băng
+  thành rỗng (nền nút, nền thẻ trong suốt).
 - **0.10.1** (09/10/2026): màu `color.warning` mặc định `#b7791f` → `#9a661a`. Màu cũ chỉ đạt 3,36:1 trên nền mặc định và
   3,64:1 trên surface (dưới AA 4,5:1), trong khi section GemFactory dùng nó làm màu chữ và badge vẽ `accentText` trên nó. Màu
   mới đạt 4,52 / 4,90, giữ tông. Phiên gemfactory phát hiện khi thêm cảnh báo tương phản cho preset. Test mới

package/dist/SOURCE.json

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

package/dist/editions.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Framework EDITIONS (P5, Chris 10/10/2026). Every store pins one; CSS that would change the shape of a store that did
+ * not ask for it ships under the next edition instead of changing every store at once.
+ *
+ * - The plan carries `framework_edition` (an integer; absent = edition 1, every store before editions existed). It goes on
+ *   <html> as `data-gem-edition`: the storefront (gemsite lib/framework-edition.ts) and this package's own preview document
+ *   (preview-document.ts) put it there, edition 1 puts nothing.
+ * - An edition's rules are scoped `:where([data-gem-edition='N'], …later editions)`: zero specificity, and a store on
+ *   edition 3 also gets what edition 2 changed. The list of editions in the scope is generated from this registry, so adding
+ *   edition 3 widens edition 2's rules by itself (and moves the anchors of gemsite's synced block: its notice says BREAKS).
+ * - The registry's CSS closes primitives.css and may only set custom properties on <html> (editions.test.ts enforces it):
+ *   at that position an ELEMENT rule would lose to every later rule of the same specificity in sections.css. An edition that
+ *   restyles an element writes its :where()-scoped rule beside the rule it changes, where the later position makes it win.
+ * - New stores get LATEST_GEM_FRAMEWORK_EDITION. Existing stores move when the seller upgrades (gemboss admin compares
+ *   both before the switch).
+ * - An edition is supported for GEM_EDITION_SUPPORT_MONTHS after the next one is released (Chris 10/10/2026). Retiring
+ *   it is a later release that drops the scope from the next edition's rules, which moves every remaining store.
+ *
+ * A consumer that wants the newest look without a plan (a lab, a preview) sets data-gem-edition to the latest edition.
+ */
+export interface GemFrameworkEdition {
+    edition: number;
+    /** The package version that introduced it. */
+    since: string;
+    /** YYYY-MM-DD the edition was released. Its predecessor's support ends GEM_EDITION_SUPPORT_MONTHS later. */
+    released: string;
+    /** What a store sees change when it moves to this edition, in the words the admin shows the seller. */
+    changes: readonly string[];
+    /** The CSS this edition adds, unscoped; gemFrameworkEditionCss scopes it. Empty for edition 1. */
+    css: readonly string[];
+}
+export declare const GEM_EDITION_SUPPORT_MONTHS = 6;
+export declare const GEM_FRAMEWORK_EDITIONS: readonly GemFrameworkEdition[];
+export declare const LATEST_GEM_FRAMEWORK_EDITION: number;
+/**
+ * The edition a plan's `framework_edition` means. Absent, not a whole number or below 1: edition 1. Above the newest edition
+ * this package knows (a plan written by a newer admin, read by an older storefront): the newest it knows, so the store
+ * still gets every change this package can draw rather than falling back to edition 1.
+ */
+export declare function gemFrameworkEditionOf(value: unknown): number;
+/**
+ * YYYY-MM-DD the edition stops being supported, or null while it is the newest. Takes what a plan holds (read through
+ * gemFrameworkEditionOf, so an old plan without the key is edition 1 and gets its date, not "no end"). Six calendar months
+ * after the next edition's release, kept inside the month: released 31 August ends on the last day of February.
+ */
+export declare function gemFrameworkEditionSupportedUntil(edition: unknown): string | null;
+/** GEM_EDITION_SUPPORT_MONTHS after a YYYY-MM-DD date, clamped to the end of the month it lands in. */
+export declare function addEditionSupportMonths(released: string): string;
+/** `:where([data-gem-edition='N'], [data-gem-edition='N+1'], …)`: the attribute selectors of edition N and every later one. */
+export declare function gemFrameworkEditionScope(edition: number): string;
+/**
+ * Every edition's CSS, scoped, oldest first. It closes primitives.css (primitives.ts createGemThemeCssParts): the rules set
+ * custom properties on <html>, so their place in the sheet does not decide anything against element rules.
+ */
+export declare function gemFrameworkEditionCss(): string;

package/dist/editions.js

@@ -0,0 +1,136 @@
+// ../../packages/gem-framework/src/form-set.ts
+var FORM_CSS_VAR = {
+  radius: "--gem-input-radius",
+  borderWidth: "--gem-input-border-width",
+  borderColor: "--gem-input-border-color",
+  fill: "--gem-input-bg",
+  height: "--gem-input-height",
+  paddingInline: "--gem-input-padding-inline",
+  fontSize: "--gem-input-font-size",
+  focusRing: "--gem-input-focus-ring",
+  checkboxAccent: "--gem-checkbox-accent",
+  checkboxSize: "--gem-checkbox-size"
+};
+var GEM_FORM_CSS_VARIABLES = Object.values(FORM_CSS_VAR);
+
+// ../../packages/gem-framework/src/tokens.ts
+var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
+var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
+var GEM_BUTTON_TOKEN_KEYS = {
+  radius: ["button"],
+  typography: ["buttonWeight", "buttonTransform", "buttonLetterSpacing"]
+};
+var requiredGemTokenKeys = {
+  color: ["background", "surface", "text", "muted", "accent", "accentText", "border", "success", "warning", "danger"],
+  typography: ["body", "heading", "mono"],
+  spacing: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"],
+  radius: ["sm", "md", "lg", "pill"],
+  border: ["subtle", "strong"],
+  shadow: ["sm", "md"],
+  motion: ["duration", "easing"],
+  layout: ["page", "gutter", "section"],
+  component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
+  morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
+};
+var GEM_BAND_SCHEMES = ["dark", "accent"];
+var GEM_BAND_GROUND = {
+  dark: { ground: "text", ink: "background", surface: 8, muted: 72, status: 55 },
+  accent: { ground: "accent", ink: "accentText", surface: 0, muted: 100, status: 0 }
+};
+function gemBandSchemeExpressions(band, ground, ink, status) {
+  const mix = GEM_BAND_GROUND[band];
+  const blend = (a, b, toward) => toward <= 0 ? a : toward >= 100 ? b : `color-mix(in srgb, ${a} ${100 - toward}%, ${b})`;
+  return {
+    background: ground,
+    surface: blend(ground, ink, mix.surface),
+    text: ink,
+    muted: blend(ground, ink, mix.muted),
+    // Màu nhấn trong băng = màu chữ của băng (đọc được ở mọi bảng màu); nút thành nút đảo.
+    accent: ink,
+    accentText: ground,
+    border: blend(ground, ink, 22),
+    // Trạng thái giữ tông (băng tối: kéo về phía chữ cho sáng hơn), băng accent dùng chữ. Không bảo đảm AA.
+    success: blend(ink, status("success"), mix.status),
+    warning: blend(ink, status("warning"), mix.status),
+    danger: blend(ink, status("danger"), mix.status)
+  };
+}
+var GEM_BAND_SCHEME_FALLBACK_CSS = `:where(:root) { ${GEM_BAND_SCHEMES.flatMap((band) => {
+  const { ground, ink } = GEM_BAND_GROUND[band];
+  const v = (key) => `var(--gem-color-${slugify(key)})`;
+  const expr = gemBandSchemeExpressions(band, v(ground), v(ink), (key) => v(key));
+  return requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${expr[key]};`);
+}).join(" ")} }`;
+var GEM_PHONE_TOKEN_TARGETS = {
+  spacing: [...requiredGemTokenKeys.spacing, ...Object.keys(GEM_DERIVED_SPACE_STEPS)],
+  layout: ["section"]
+};
+var tokenKeyNorm = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
+var PHONE_TARGET_BY_KEY = Object.fromEntries(
+  Object.entries(GEM_PHONE_TOKEN_TARGETS).map(([group, targets]) => [group, new Map(targets.map((t) => [`${tokenKeyNorm(t)}mobile`, t]))])
+);
+var GEM_LINE_HEIGHT_TOKEN_KEYS = ["headingLineHeight", "bodyLineHeight"];
+var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
+var optionalGemTokenKeys = {
+  typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
+  spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
+  layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
+  radius: [...GEM_BUTTON_TOKEN_KEYS.radius]
+};
+var GEM_HEADING_SIZE_CSS_VARS = [
+  "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
+  "--gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1));",
+  "--gem-section-heading-size-mobile: min(var(--gem-section-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));",
+  "--gem-hero-heading-size-mobile: min(var(--gem-hero-heading-size), var(--gem-heading-phone-cap, clamp(1.75rem, 9vw, 2.75rem)));"
+];
+function slugify(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
+// ../../packages/gem-framework/src/editions.ts
+var GEM_EDITION_SUPPORT_MONTHS = 6;
+var EDITION_2_CSS = [
+  `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
+];
+var GEM_FRAMEWORK_EDITIONS = [
+  { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
+  {
+    edition: 2,
+    since: "0.12.0",
+    released: "2026-10-10",
+    changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
+    css: EDITION_2_CSS
+  }
+];
+var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
+function gemFrameworkEditionOf(value) {
+  const n = typeof value === "string" && /^\d+$/.test(value.trim()) ? Number(value.trim()) : value;
+  if (typeof n !== "number" || !Number.isInteger(n) || n < 1) return 1;
+  return Math.min(n, LATEST_GEM_FRAMEWORK_EDITION);
+}
+function gemFrameworkEditionSupportedUntil(edition) {
+  const next = GEM_FRAMEWORK_EDITIONS.find((e) => e.edition === gemFrameworkEditionOf(edition) + 1);
+  return next ? addEditionSupportMonths(next.released) : null;
+}
+function addEditionSupportMonths(released) {
+  const [y, m, d] = released.split("-").map(Number);
+  const month = m - 1 + GEM_EDITION_SUPPORT_MONTHS;
+  const lastDay = new Date(Date.UTC(y, month + 1, 0)).getUTCDate();
+  return new Date(Date.UTC(y, month, Math.min(d, lastDay))).toISOString().slice(0, 10);
+}
+function gemFrameworkEditionScope(edition) {
+  return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
+}
+function gemFrameworkEditionCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
+export {
+  GEM_EDITION_SUPPORT_MONTHS,
+  GEM_FRAMEWORK_EDITIONS,
+  LATEST_GEM_FRAMEWORK_EDITION,
+  addEditionSupportMonths,
+  gemFrameworkEditionCss,
+  gemFrameworkEditionOf,
+  gemFrameworkEditionScope,
+  gemFrameworkEditionSupportedUntil
+};

package/dist/gem-framework.css

@@ -64,6 +64,10 @@
   --gem-tap-min: 44px;
   --gem-focus-offset: 3px;
 }
+:where(:root [data-gem-section-background='dark'], :root [data-gem-section-background='accent']) {
+  --gem-border-subtle: calc(1px * var(--gem-style-border, 1)) solid var(--gem-color-border);
+  --gem-border-strong: calc(1px * var(--gem-style-border, 1)) solid color-mix(in srgb, var(--gem-color-text) 28%, transparent);
+}
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -1481,6 +1485,8 @@ a {
   .gem-collection-filter-toolbar__active-filter, .gem-collection-filter-toolbar__clear { min-height: 2.25rem; align-items: center; }
 }
 
+:where([data-gem-edition='2']) { --gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1)); --gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1)); }
+
 .gem-popup-shell { padding: 0; }
 .gem-popup-shell__dialog {
   padding: 0; border: 0; margin: auto; color: var(--gem-color-text); background: var(--gem-color-background);
@@ -2184,8 +2190,9 @@ sticky-header.header-wrapper {
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }
+:where(:root) { --gem-scheme-dark-background: var(--gem-color-text); --gem-scheme-dark-surface: color-mix(in srgb, var(--gem-color-text) 92%, var(--gem-color-background)); --gem-scheme-dark-text: var(--gem-color-background); --gem-scheme-dark-muted: color-mix(in srgb, var(--gem-color-text) 28%, var(--gem-color-background)); --gem-scheme-dark-accent: var(--gem-color-background); --gem-scheme-dark-accent-text: var(--gem-color-text); --gem-scheme-dark-border: color-mix(in srgb, var(--gem-color-text) 78%, var(--gem-color-background)); --gem-scheme-dark-success: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-success)); --gem-scheme-dark-warning: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-warning)); --gem-scheme-dark-danger: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-danger)); --gem-scheme-accent-background: var(--gem-color-accent); --gem-scheme-accent-surface: var(--gem-color-accent); --gem-scheme-accent-text: var(--gem-color-accent-text); --gem-scheme-accent-muted: var(--gem-color-accent-text); --gem-scheme-accent-accent: var(--gem-color-accent-text); --gem-scheme-accent-accent-text: var(--gem-color-accent); --gem-scheme-accent-border: color-mix(in srgb, var(--gem-color-accent) 78%, var(--gem-color-accent-text)); --gem-scheme-accent-success: var(--gem-color-accent-text); --gem-scheme-accent-warning: var(--gem-color-accent-text); --gem-scheme-accent-danger: var(--gem-color-accent-text); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-color-background: var(--gem-scheme-dark-background); --gem-color-surface: var(--gem-scheme-dark-surface); --gem-color-text: var(--gem-scheme-dark-text); --gem-color-muted: var(--gem-scheme-dark-muted); --gem-color-accent: var(--gem-scheme-dark-accent); --gem-color-accent-text: var(--gem-scheme-dark-accent-text); --gem-color-border: var(--gem-scheme-dark-border); --gem-color-success: var(--gem-scheme-dark-success); --gem-color-warning: var(--gem-scheme-dark-warning); --gem-color-danger: var(--gem-scheme-dark-danger); --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-color-background: var(--gem-scheme-accent-background); --gem-color-surface: var(--gem-scheme-accent-surface); --gem-color-text: var(--gem-scheme-accent-text); --gem-color-muted: var(--gem-scheme-accent-muted); --gem-color-accent: var(--gem-scheme-accent-accent); --gem-color-accent-text: var(--gem-scheme-accent-accent-text); --gem-color-border: var(--gem-scheme-accent-border); --gem-color-success: var(--gem-scheme-accent-success); --gem-color-warning: var(--gem-scheme-accent-warning); --gem-color-danger: var(--gem-scheme-accent-danger); --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }

package/dist/index.js

@@ -190,8 +190,78 @@ function gemPlanShapeKnobs(plan) {
   };
 }
 
+// ../../packages/gem-framework/src/contrast.ts
+var HEX_COLOR_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+var MIN_TEXT_CONTRAST = 4.5;
+function normalizeHex(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim().toLowerCase();
+  if (!HEX_COLOR_PATTERN.test(trimmed)) return void 0;
+  if (trimmed.length === 4) {
+    return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`;
+  }
+  return trimmed;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex) ?? "#000000";
+  return {
+    r: parseInt(normalized.slice(1, 3), 16),
+    g: parseInt(normalized.slice(3, 5), 16),
+    b: parseInt(normalized.slice(5, 7), 16)
+  };
+}
+function hexRelativeLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const channel = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function hexContrastRatio(a, b) {
+  const la = hexRelativeLuminance(a);
+  const lb = hexRelativeLuminance(b);
+  const lighter = Math.max(la, lb);
+  const darker = Math.min(la, lb);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function mixHex(from, to, t) {
+  const [a, b] = [hexToRgb(from), hexToRgb(to)];
+  const channel = (x, y) => Math.round(x * (1 - t) + y * t).toString(16).padStart(2, "0");
+  return `#${channel(a.r, b.r)}${channel(a.g, b.g)}${channel(a.b, b.b)}`;
+}
+function aaTextColor(color, backgrounds, min = MIN_TEXT_CONTRAST) {
+  const from = normalizeHex(color);
+  const bgs = backgrounds.map(normalizeHex).filter((bg) => Boolean(bg));
+  if (!from || !bgs.length) return color;
+  const worst = (c) => Math.min(...bgs.map((bg) => hexContrastRatio(c, bg)));
+  let best = { color, score: worst(from) };
+  if (best.score >= min) return color;
+  let pass;
+  for (const toward of ["#000000", "#ffffff"]) {
+    for (let step = 1; step <= 50; step++) {
+      const candidate = mixHex(from, toward, step / 50);
+      const score = worst(candidate);
+      if (score >= min) {
+        if (!pass || step < pass.step) pass = { color: candidate, step };
+        break;
+      }
+      if (score > best.score) best = { color: candidate, score };
+    }
+  }
+  return pass?.color ?? best.color;
+}
+function aaLabelColor(preferred, fill, fallbacks = []) {
+  const ground = normalizeHex(fill);
+  if (!ground) return preferred;
+  const candidates = [preferred, ...fallbacks, "#ffffff", "#111111", "#000000"].filter((c) => normalizeHex(c));
+  const pass = candidates.find((c) => hexContrastRatio(c, ground) >= MIN_TEXT_CONTRAST);
+  if (pass) return pass;
+  return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
+}
+
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.10.1";
+var gemFrameworkVersion = "0.12.1";
 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;";
@@ -256,7 +326,7 @@ function readButtonTokens(tokens) {
       const key = byNorm.get(buttonKeyNorm(rawKey));
       if (!key) continue;
       copy ??= { ...values };
-      delete copy[rawKey];
+      if (rawKey !== key) delete copy[rawKey];
       const v = buttonTokenValue(group, key, raw);
       if (v === null) out.invalid.push({ path: `${group}.${rawKey}`, value: raw });
       else {
@@ -264,6 +334,9 @@ function readButtonTokens(tokens) {
         out.values[key] = v;
       }
     }
+    if (copy) {
+      for (const key of keys) if (!(key in out.values)) delete copy[key];
+    }
     if (copy) out.groups[group] = copy;
   }
   return out;
@@ -304,6 +377,77 @@ var requiredGemTokenKeys = {
   component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
   morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
 };
+var GEM_BAND_SCHEMES = ["dark", "accent"];
+var GEM_BAND_GROUND = {
+  dark: { ground: "text", ink: "background", surface: 8, muted: 72, status: 55 },
+  accent: { ground: "accent", ink: "accentText", surface: 0, muted: 100, status: 0 }
+};
+function gemBandSchemeExpressions(band, ground, ink, status) {
+  const mix = GEM_BAND_GROUND[band];
+  const blend = (a, b, toward) => toward <= 0 ? a : toward >= 100 ? b : `color-mix(in srgb, ${a} ${100 - toward}%, ${b})`;
+  return {
+    background: ground,
+    surface: blend(ground, ink, mix.surface),
+    text: ink,
+    muted: blend(ground, ink, mix.muted),
+    // Màu nhấn trong băng = màu chữ của băng (đọc được ở mọi bảng màu); nút thành nút đảo.
+    accent: ink,
+    accentText: ground,
+    border: blend(ground, ink, 22),
+    // Trạng thái giữ tông (băng tối: kéo về phía chữ cho sáng hơn), băng accent dùng chữ. Không bảo đảm AA.
+    success: blend(ink, status("success"), mix.status),
+    warning: blend(ink, status("warning"), mix.status),
+    danger: blend(ink, status("danger"), mix.status)
+  };
+}
+function gemBandScheme(c, band) {
+  const { ground, ink } = GEM_BAND_GROUND[band];
+  const g = normalizeHex(c[ground]);
+  const i = normalizeHex(c[ink]);
+  if (!g || !i) return gemBandSchemeExpressions(band, c[ground], c[ink], (key) => c[key]);
+  const toward = mixHex(g, i, 0.08);
+  const away = mixHex(g, hexRelativeLuminance(i) > hexRelativeLuminance(g) ? "#000000" : "#ffffff", 0.08);
+  const surface = hexContrastRatio(i, toward) >= MIN_TEXT_CONTRAST ? toward : away;
+  const grounds = [g, surface];
+  const text = aaTextColor(i, grounds);
+  const accent = aaTextColor(c.accent, grounds);
+  return {
+    background: g,
+    surface,
+    text,
+    muted: aaTextColor(mixHex(i, g, 0.3), grounds),
+    accent,
+    accentText: aaLabelColor(c.accentText, accent, [g, text]),
+    border: mixHex(g, i, 0.22),
+    success: aaTextColor(c.success, grounds),
+    warning: aaTextColor(c.warning, grounds),
+    danger: aaTextColor(c.danger, grounds)
+  };
+}
+function gemBandSchemeColors(color = {}) {
+  const c = Object.fromEntries(
+    requiredGemTokenKeys.color.map((key) => {
+      const value = color?.[key];
+      return [key, typeof value === "string" && value.trim() ? stripImportant(value) : defaultGemTokens.color[key]];
+    })
+  );
+  return { dark: gemBandScheme(c, "dark"), accent: gemBandScheme(c, "accent") };
+}
+function gemBandSchemeCssVars(color = {}) {
+  const schemes = gemBandSchemeColors(color);
+  return GEM_BAND_SCHEMES.flatMap(
+    (band) => requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${schemes[band][key]};`)
+  );
+}
+var GEM_BAND_SCHEME_FALLBACK_CSS = `:where(:root) { ${GEM_BAND_SCHEMES.flatMap((band) => {
+  const { ground, ink } = GEM_BAND_GROUND[band];
+  const v = (key) => `var(--gem-color-${slugify(key)})`;
+  const expr = gemBandSchemeExpressions(band, v(ground), v(ink), (key) => v(key));
+  return requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${expr[key]};`);
+}).join(" ")} }`;
+function gemBandSchemeDeclarations(band) {
+  return requiredGemTokenKeys.color.map((key) => `--gem-color-${slugify(key)}: var(--gem-scheme-${band}-${slugify(key)});`).join(" ");
+}
 var GEM_PHONE_TOKEN_TARGETS = {
   spacing: [...requiredGemTokenKeys.spacing, ...Object.keys(GEM_DERIVED_SPACE_STEPS)],
   layout: ["section"]
@@ -473,12 +617,14 @@ function validateGemTokens(tokens) {
     issues
   };
 }
-function createGemTokenCss(tokens, selector = ":root") {
+function createGemTokenCss(tokens, selector = ":root", options = {}) {
   const button = readButtonTokens(tokens);
   const phone = readPhoneTokens(tokens);
   const spacing = desktopEntries("spacing", tokens.spacing);
   const declarations = [
     ...toCssVars("color", tokens.color),
+    // Bộ màu của băng dark / accent (gemBandSchemeColors): luật băng trỏ --gem-color-* vào đây.
+    ...options.bandSchemes === false ? [] : gemBandSchemeCssVars(tokens.color),
     ...toCssVars("font", Object.fromEntries(Object.entries(button.groups.typography ?? tokens.typography ?? {}).filter(([k, v]) => !isRampKey(k) && !badLineHeight(k, v)))),
     // Space ramp is scaled by the global density knob --gem-style-space (default 1),
     // so a style pack can make the WHOLE storefront airier or denser without touching
@@ -521,10 +667,13 @@ function createGemTokenCss(tokens, selector = ":root") {
   const formBlock = gemFormCssBlock(tokens.form);
   const buttonCase = gemButtonCaseCss(tokens, selector);
   const mobile = gemMobileTokenCssVars(tokens, phone);
+  const bandBorders = declarations.filter((line) => line.startsWith("--gem-border-") && line.includes("var(--gem-color-"));
+  const bandScope = splitSelectorList(selector).flatMap((sel) => GEM_BAND_SCHEMES.map((band) => `${sel} [data-gem-section-background='${band}']`)).join(", ");
   return [
     `${selector} {`,
     ...declarations.map((line) => `  ${line}`),
     "}",
+    ...bandBorders.length ? [`:where(${bandScope}) {`, ...bandBorders.map((line) => `  ${line}`), "}"] : [],
     ...mobile.length ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, ...mobile.map((line) => `    ${line}`), "  }", "}"] : [],
     ...formBlock ? [formBlock] : [],
     ...buttonCase ? [buttonCase] : []
@@ -593,7 +742,11 @@ function toScaledCssVars(namespace, values, knob) {
     // bọc nó vào GIỮA giá trị — `calc(16px !important * var(...))` — nên custom property lưu
     // nguyên xi, rồi mọi `padding: var(--gem-space-md)` thành invalid ở computed-value và SẬP VỀ 0
     // trên toàn bộ .gem-* section.
-    ([key, value]) => `--gem-${namespace}-${slugify(key)}: calc(${stripImportant(value)} * var(${knob}, 1));`
+    ([key, value]) => {
+      const clean = stripImportant(value);
+      if (new RegExp(`^var\\(--gem-${namespace}-[a-z0-9-]+\\)$`, "i").test(clean.trim())) return `--gem-${namespace}-${slugify(key)}: ${clean.trim()};`;
+      return `--gem-${namespace}-${slugify(key)}: calc(${clean} * var(${knob}, 1));`;
+    }
   );
 }
 function toBorderCssVars(namespace, values, knob) {
@@ -610,6 +763,44 @@ function tokenIssue(severity, code, message, path) {
   return { severity, code, message, path };
 }
 
+// ../../packages/gem-framework/src/editions.ts
+var GEM_EDITION_SUPPORT_MONTHS = 6;
+var EDITION_2_CSS = [
+  `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
+];
+var GEM_FRAMEWORK_EDITIONS = [
+  { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
+  {
+    edition: 2,
+    since: "0.12.0",
+    released: "2026-10-10",
+    changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
+    css: EDITION_2_CSS
+  }
+];
+var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
+function gemFrameworkEditionOf(value) {
+  const n = typeof value === "string" && /^\d+$/.test(value.trim()) ? Number(value.trim()) : value;
+  if (typeof n !== "number" || !Number.isInteger(n) || n < 1) return 1;
+  return Math.min(n, LATEST_GEM_FRAMEWORK_EDITION);
+}
+function gemFrameworkEditionSupportedUntil(edition) {
+  const next = GEM_FRAMEWORK_EDITIONS.find((e) => e.edition === gemFrameworkEditionOf(edition) + 1);
+  return next ? addEditionSupportMonths(next.released) : null;
+}
+function addEditionSupportMonths(released) {
+  const [y, m, d] = released.split("-").map(Number);
+  const month = m - 1 + GEM_EDITION_SUPPORT_MONTHS;
+  const lastDay = new Date(Date.UTC(y, month + 1, 0)).getUTCDate();
+  return new Date(Date.UTC(y, month, Math.min(d, lastDay))).toISOString().slice(0, 10);
+}
+function gemFrameworkEditionScope(edition) {
+  return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
+}
+function gemFrameworkEditionCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
+
 // ../../packages/gem-framework/src/manifest.ts
 var gemFrameworkPrimitiveGroups = [
   {
@@ -1374,7 +1565,7 @@ function createGemThemeCssParts(tokens, selector = ":root", options = {}) {
   const base = createGemBaseCssParts(options.profile ?? "dawn-parity");
   return {
     tokens: [
-      createGemTokenCss(tokens, selector),
+      createGemTokenCss(tokens, selector, { bandSchemes: options.bandSchemes }),
       // Set the knobs the space / radius / border / type ramps read (only when they differ from the
       // default 1, so a standard-shaped storefront emits nothing extra).
       ...createGemStyleKnobCss(options, selector),
@@ -1472,7 +1663,8 @@ function createGemBaseCssParts(profile) {
     "}"
   ].join("\n");
   return {
-    primitives: [reset, "", createPrimitiveCss(), "", ""].join("\n"),
+    // Edition rules close the primitives (editions.ts): custom properties on <html>, scoped :where([data-gem-edition]).
+    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
     sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
   };
 }
@@ -3117,8 +3309,14 @@ function createSectionCss() {
     // rather than re-deriving the swatch in every divider rule.
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }",
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }",
+    // accent / dark are COLOUR SCHEMES (tokens.ts gemBandSchemeColors): the band re-points every --gem-color-* to its own
+    // AA set, so a card, a button or a price nested in the band reads the band's colours instead of the page's. Before,
+    // only the band's own background and `color` changed: 988 / 991 lines of text under AA across 248 GemFactory sections.
+    // The CSS fallback tier sits next to the rules, so a page that sets --gem-color-* by hand still gets a band in its brand.
+    GEM_BAND_SCHEME_FALLBACK_CSS,
+    ...GEM_BAND_SCHEMES.map(
+      (band) => `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='${band}'] { ${gemBandSchemeDeclarations(band)} --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }`
+    ),
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }",
     // On accent/dark bands, keep muted sub-copy + headings legible against the inverted ground.
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }",
@@ -5888,12 +6086,13 @@ function gemFrameworkPublicCssVariables() {
   return frameworkPublicVariables;
 }
 var ROOT_SELECTOR = /^\s*(?::root|html|:host)(?:\[[^\]]*\]|:[a-z-]+(?:\([^()]*\))?)*\s*$/;
+var EDITION_ROOT_SELECTOR = /^\s*:where\(\s*\[data-gem-edition=(["'])\d+\1\](?:\s*,\s*\[data-gem-edition=(["'])\d+\2\])*\s*\)\s*$/;
 function gemPublicCssVariablesFrom(stylesheet) {
   const css = stylesheet.replace(/\/\*[\s\S]*?\*\//g, " ");
   const declaredOnRoot = /* @__PURE__ */ new Set();
   const declaredElsewhere = /* @__PURE__ */ new Set();
   for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
-    const onRoot = selector.split(",").every((part) => ROOT_SELECTOR.test(part));
+    const onRoot = EDITION_ROOT_SELECTOR.test(selector) || selector.split(",").every((part) => ROOT_SELECTOR.test(part));
     for (const [, name] of body.matchAll(/(--gem-[a-z0-9-]+)\s*:/g)) (onRoot ? declaredOnRoot : declaredElsewhere).add(name);
   }
   const mentioned = new Set([...css.matchAll(/--gem-[a-z0-9-]+/g)].map((match) => match[0]));
@@ -5994,9 +6193,11 @@ function renderGemPreviewDocument(plan, options = {}) {
   const title = options.title ?? `${plan.name} preview`;
   const formAttrs = Object.entries(gemFormAttributes(plan.tokens.form)).map(([k, v]) => ` ${k}="${escapeAttribute(v)}"`).join("");
   const bodyClass = ["gem-theme", `gem-theme--${slugify(profile)}`, options.bodyClassName].filter(Boolean).join(" ");
+  const edition = gemFrameworkEditionOf(plan.framework_edition);
+  const editionAttr = edition > 1 ? ` data-gem-edition="${edition}"` : "";
   return [
     "<!doctype html>",
-    `<html lang="en" data-gem-theme-profile="${escapeAttribute(profile)}">`,
+    `<html lang="en" data-gem-theme-profile="${escapeAttribute(profile)}"${editionAttr}>`,
     "<head>",
     '  <meta charset="utf-8" />',
     '  <meta name="viewport" content="width=device-width, initial-scale=1" />',
@@ -7052,9 +7253,12 @@ function stringSetting(value) {
 export {
   COUNTDOWN_END_RUNTIME_LINES,
   GEM_AMBIENT_CSS,
+  GEM_BAND_SCHEMES,
+  GEM_BAND_SCHEME_FALLBACK_CSS,
   GEM_BUTTON_TOKEN_KEYS,
   GEM_BUTTON_TOKEN_SHAPES,
   GEM_COUNTDOWN_ENDED_CSS,
+  GEM_EDITION_SUPPORT_MONTHS,
   GEM_FIELD_JOINS,
   GEM_FIELD_SHAPES,
   GEM_FORM_CSS_VARIABLES,
@@ -7063,6 +7267,7 @@ export {
   GEM_FORM_SET_CSS,
   GEM_FORM_TOKEN_KEYS,
   GEM_FORM_VAR_SCOPE,
+  GEM_FRAMEWORK_EDITIONS,
   GEM_GRID_COLUMNS_ROW_KNOB_CSS,
   GEM_HEADING_SIZE_CSS_VARS,
   GEM_LINE_HEIGHT_TOKEN_KEYS,
@@ -7072,11 +7277,15 @@ export {
   GEM_ROW_CSS,
   GEM_ROW_CSS_VARIABLES,
   GEM_ROW_GAP_CSS,
+  LATEST_GEM_FRAMEWORK_EDITION,
+  MIN_TEXT_CONTRAST,
   MODERN_MINERAL_FAMILY_PACK_ID,
   MODERN_MINERAL_HEADER_FOOTER_PRESET_ID,
   MODERN_MINERAL_HOMEPAGE_LINEAGE_SECTIONS,
   MODERN_MINERAL_HOMEPAGE_PACK_ID,
   MODERN_MINERAL_STYLE_PACK_ID,
+  aaLabelColor,
+  aaTextColor,
   auditGemFrameworkClassName,
   createGemBaseCss,
   createGemFrameworkManifest,
@@ -7097,11 +7306,18 @@ export {
   createThemeProfileCss,
   defaultGemTokens,
   defaultSelection,
+  gemBandSchemeColors,
+  gemBandSchemeCssVars,
+  gemBandSchemeDeclarations,
   gemButtonCaseCss,
   gemFormAttributes,
   gemFormCssBlock,
   gemFormCssVars,
   gemFormSetsFor,
+  gemFrameworkEditionCss,
+  gemFrameworkEditionOf,
+  gemFrameworkEditionScope,
+  gemFrameworkEditionSupportedUntil,
   gemFrameworkPrimitiveGroups,
   gemFrameworkRuntimePlugins,
   gemFrameworkValidationRules,
@@ -7113,11 +7329,15 @@ export {
   gemRuntimePluginModuleKeys,
   gemRuntimePluginSources,
   getGemFrameworkValidationRule,
+  hexContrastRatio,
+  hexRelativeLuminance,
   isModernMineralFamilyLineagePlan,
+  mixHex,
   modernMineralFamilyLineage,
   modernMineralHomepageLineageSections,
   motionCssVarAliases,
   normalizeGemTokens,
+  normalizeHex,
   offerEngineRuntimeScript,
   optionalGemTokenKeys,
   planToRuntimeBootstrapConfig,

package/dist/primitives.css

@@ -1414,3 +1414,5 @@ a {
   .gem-collection-filter-toolbar__active-filter, .gem-collection-filter-toolbar__clear { min-height: 2.25rem; align-items: center; }
 }
 
+:where([data-gem-edition='2']) { --gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1)); --gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1)); }
+

package/dist/section-gate.js

@@ -70,6 +70,76 @@ function gemFormCssVars(form) {
   return out;
 }
 
+// ../../packages/gem-framework/src/contrast.ts
+var HEX_COLOR_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+var MIN_TEXT_CONTRAST = 4.5;
+function normalizeHex(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim().toLowerCase();
+  if (!HEX_COLOR_PATTERN.test(trimmed)) return void 0;
+  if (trimmed.length === 4) {
+    return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`;
+  }
+  return trimmed;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex) ?? "#000000";
+  return {
+    r: parseInt(normalized.slice(1, 3), 16),
+    g: parseInt(normalized.slice(3, 5), 16),
+    b: parseInt(normalized.slice(5, 7), 16)
+  };
+}
+function hexRelativeLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const channel = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function hexContrastRatio(a, b) {
+  const la = hexRelativeLuminance(a);
+  const lb = hexRelativeLuminance(b);
+  const lighter = Math.max(la, lb);
+  const darker = Math.min(la, lb);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function mixHex(from, to, t) {
+  const [a, b] = [hexToRgb(from), hexToRgb(to)];
+  const channel = (x, y) => Math.round(x * (1 - t) + y * t).toString(16).padStart(2, "0");
+  return `#${channel(a.r, b.r)}${channel(a.g, b.g)}${channel(a.b, b.b)}`;
+}
+function aaTextColor(color, backgrounds, min = MIN_TEXT_CONTRAST) {
+  const from = normalizeHex(color);
+  const bgs = backgrounds.map(normalizeHex).filter((bg) => Boolean(bg));
+  if (!from || !bgs.length) return color;
+  const worst = (c) => Math.min(...bgs.map((bg) => hexContrastRatio(c, bg)));
+  let best = { color, score: worst(from) };
+  if (best.score >= min) return color;
+  let pass;
+  for (const toward of ["#000000", "#ffffff"]) {
+    for (let step = 1; step <= 50; step++) {
+      const candidate = mixHex(from, toward, step / 50);
+      const score = worst(candidate);
+      if (score >= min) {
+        if (!pass || step < pass.step) pass = { color: candidate, step };
+        break;
+      }
+      if (score > best.score) best = { color: candidate, score };
+    }
+  }
+  return pass?.color ?? best.color;
+}
+function aaLabelColor(preferred, fill, fallbacks = []) {
+  const ground = normalizeHex(fill);
+  if (!ground) return preferred;
+  const candidates = [preferred, ...fallbacks, "#ffffff", "#111111", "#000000"].filter((c) => normalizeHex(c));
+  const pass = candidates.find((c) => hexContrastRatio(c, ground) >= MIN_TEXT_CONTRAST);
+  if (pass) return pass;
+  return candidates.reduce((a, b) => hexContrastRatio(b, ground) > hexContrastRatio(a, ground) ? b : a, preferred);
+}
+
 // ../../packages/gem-framework/src/tokens.ts
 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;";
@@ -135,7 +205,7 @@ function readButtonTokens(tokens) {
       const key = byNorm.get(buttonKeyNorm(rawKey));
       if (!key) continue;
       copy ??= { ...values };
-      delete copy[rawKey];
+      if (rawKey !== key) delete copy[rawKey];
       const v = buttonTokenValue(group, key, raw);
       if (v === null) out.invalid.push({ path: `${group}.${rawKey}`, value: raw });
       else {
@@ -143,6 +213,9 @@ function readButtonTokens(tokens) {
         out.values[key] = v;
       }
     }
+    if (copy) {
+      for (const key of keys) if (!(key in out.values)) delete copy[key];
+    }
     if (copy) out.groups[group] = copy;
   }
   return out;
@@ -183,6 +256,77 @@ var requiredGemTokenKeys = {
   component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
   morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
 };
+var GEM_BAND_SCHEMES = ["dark", "accent"];
+var GEM_BAND_GROUND = {
+  dark: { ground: "text", ink: "background", surface: 8, muted: 72, status: 55 },
+  accent: { ground: "accent", ink: "accentText", surface: 0, muted: 100, status: 0 }
+};
+function gemBandSchemeExpressions(band, ground, ink, status) {
+  const mix = GEM_BAND_GROUND[band];
+  const blend = (a, b, toward) => toward <= 0 ? a : toward >= 100 ? b : `color-mix(in srgb, ${a} ${100 - toward}%, ${b})`;
+  return {
+    background: ground,
+    surface: blend(ground, ink, mix.surface),
+    text: ink,
+    muted: blend(ground, ink, mix.muted),
+    // Màu nhấn trong băng = màu chữ của băng (đọc được ở mọi bảng màu); nút thành nút đảo.
+    accent: ink,
+    accentText: ground,
+    border: blend(ground, ink, 22),
+    // Trạng thái giữ tông (băng tối: kéo về phía chữ cho sáng hơn), băng accent dùng chữ. Không bảo đảm AA.
+    success: blend(ink, status("success"), mix.status),
+    warning: blend(ink, status("warning"), mix.status),
+    danger: blend(ink, status("danger"), mix.status)
+  };
+}
+function gemBandScheme(c, band) {
+  const { ground, ink } = GEM_BAND_GROUND[band];
+  const g = normalizeHex(c[ground]);
+  const i = normalizeHex(c[ink]);
+  if (!g || !i) return gemBandSchemeExpressions(band, c[ground], c[ink], (key) => c[key]);
+  const toward = mixHex(g, i, 0.08);
+  const away = mixHex(g, hexRelativeLuminance(i) > hexRelativeLuminance(g) ? "#000000" : "#ffffff", 0.08);
+  const surface = hexContrastRatio(i, toward) >= MIN_TEXT_CONTRAST ? toward : away;
+  const grounds = [g, surface];
+  const text = aaTextColor(i, grounds);
+  const accent = aaTextColor(c.accent, grounds);
+  return {
+    background: g,
+    surface,
+    text,
+    muted: aaTextColor(mixHex(i, g, 0.3), grounds),
+    accent,
+    accentText: aaLabelColor(c.accentText, accent, [g, text]),
+    border: mixHex(g, i, 0.22),
+    success: aaTextColor(c.success, grounds),
+    warning: aaTextColor(c.warning, grounds),
+    danger: aaTextColor(c.danger, grounds)
+  };
+}
+function gemBandSchemeColors(color = {}) {
+  const c = Object.fromEntries(
+    requiredGemTokenKeys.color.map((key) => {
+      const value = color?.[key];
+      return [key, typeof value === "string" && value.trim() ? stripImportant(value) : defaultGemTokens.color[key]];
+    })
+  );
+  return { dark: gemBandScheme(c, "dark"), accent: gemBandScheme(c, "accent") };
+}
+function gemBandSchemeCssVars(color = {}) {
+  const schemes = gemBandSchemeColors(color);
+  return GEM_BAND_SCHEMES.flatMap(
+    (band) => requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${schemes[band][key]};`)
+  );
+}
+var GEM_BAND_SCHEME_FALLBACK_CSS = `:where(:root) { ${GEM_BAND_SCHEMES.flatMap((band) => {
+  const { ground, ink } = GEM_BAND_GROUND[band];
+  const v = (key) => `var(--gem-color-${slugify(key)})`;
+  const expr = gemBandSchemeExpressions(band, v(ground), v(ink), (key) => v(key));
+  return requiredGemTokenKeys.color.map((key) => `--gem-scheme-${band}-${slugify(key)}: ${expr[key]};`);
+}).join(" ")} }`;
+function gemBandSchemeDeclarations(band) {
+  return requiredGemTokenKeys.color.map((key) => `--gem-color-${slugify(key)}: var(--gem-scheme-${band}-${slugify(key)});`).join(" ");
+}
 var GEM_PHONE_TOKEN_TARGETS = {
   spacing: [...requiredGemTokenKeys.spacing, ...Object.keys(GEM_DERIVED_SPACE_STEPS)],
   layout: ["section"]
@@ -309,12 +453,14 @@ var defaultGemTokens = {
     policyTone: "standard"
   }
 };
-function createGemTokenCss(tokens, selector = ":root") {
+function createGemTokenCss(tokens, selector = ":root", options = {}) {
   const button = readButtonTokens(tokens);
   const phone = readPhoneTokens(tokens);
   const spacing = desktopEntries("spacing", tokens.spacing);
   const declarations = [
     ...toCssVars("color", tokens.color),
+    // Bộ màu của băng dark / accent (gemBandSchemeColors): luật băng trỏ --gem-color-* vào đây.
+    ...options.bandSchemes === false ? [] : gemBandSchemeCssVars(tokens.color),
     ...toCssVars("font", Object.fromEntries(Object.entries(button.groups.typography ?? tokens.typography ?? {}).filter(([k, v]) => !isRampKey(k) && !badLineHeight(k, v)))),
     // Space ramp is scaled by the global density knob --gem-style-space (default 1),
     // so a style pack can make the WHOLE storefront airier or denser without touching
@@ -357,10 +503,13 @@ function createGemTokenCss(tokens, selector = ":root") {
   const formBlock = gemFormCssBlock(tokens.form);
   const buttonCase = gemButtonCaseCss(tokens, selector);
   const mobile = gemMobileTokenCssVars(tokens, phone);
+  const bandBorders = declarations.filter((line) => line.startsWith("--gem-border-") && line.includes("var(--gem-color-"));
+  const bandScope = splitSelectorList(selector).flatMap((sel) => GEM_BAND_SCHEMES.map((band) => `${sel} [data-gem-section-background='${band}']`)).join(", ");
   return [
     `${selector} {`,
     ...declarations.map((line) => `  ${line}`),
     "}",
+    ...bandBorders.length ? [`:where(${bandScope}) {`, ...bandBorders.map((line) => `  ${line}`), "}"] : [],
     ...mobile.length ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, ...mobile.map((line) => `    ${line}`), "  }", "}"] : [],
     ...formBlock ? [formBlock] : [],
     ...buttonCase ? [buttonCase] : []
@@ -429,7 +578,11 @@ function toScaledCssVars(namespace, values, knob) {
     // bọc nó vào GIỮA giá trị — `calc(16px !important * var(...))` — nên custom property lưu
     // nguyên xi, rồi mọi `padding: var(--gem-space-md)` thành invalid ở computed-value và SẬP VỀ 0
     // trên toàn bộ .gem-* section.
-    ([key, value]) => `--gem-${namespace}-${slugify(key)}: calc(${stripImportant(value)} * var(${knob}, 1));`
+    ([key, value]) => {
+      const clean = stripImportant(value);
+      if (new RegExp(`^var\\(--gem-${namespace}-[a-z0-9-]+\\)$`, "i").test(clean.trim())) return `--gem-${namespace}-${slugify(key)}: ${clean.trim()};`;
+      return `--gem-${namespace}-${slugify(key)}: calc(${clean} * var(${knob}, 1));`;
+    }
   );
 }
 function toBorderCssVars(namespace, values, knob) {
@@ -443,6 +596,28 @@ function slugify(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
 
+// ../../packages/gem-framework/src/editions.ts
+var EDITION_2_CSS = [
+  `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
+];
+var GEM_FRAMEWORK_EDITIONS = [
+  { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
+  {
+    edition: 2,
+    since: "0.12.0",
+    released: "2026-10-10",
+    changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
+    css: EDITION_2_CSS
+  }
+];
+var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
+function gemFrameworkEditionScope(edition) {
+  return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
+}
+function gemFrameworkEditionCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
+
 // ../../packages/gem-framework/src/manifest.ts
 var gemFrameworkPrimitiveGroups = [
   {
@@ -1068,7 +1243,7 @@ function createGemThemeCssParts(tokens, selector = ":root", options = {}) {
   const base = createGemBaseCssParts(options.profile ?? "dawn-parity");
   return {
     tokens: [
-      createGemTokenCss(tokens, selector),
+      createGemTokenCss(tokens, selector, { bandSchemes: options.bandSchemes }),
       // Set the knobs the space / radius / border / type ramps read (only when they differ from the
       // default 1, so a standard-shaped storefront emits nothing extra).
       ...createGemStyleKnobCss(options, selector),
@@ -1159,7 +1334,8 @@ function createGemBaseCssParts(profile) {
     "}"
   ].join("\n");
   return {
-    primitives: [reset, "", createPrimitiveCss(), "", ""].join("\n"),
+    // Edition rules close the primitives (editions.ts): custom properties on <html>, scoped :where([data-gem-edition]).
+    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
     sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
   };
 }
@@ -2804,8 +2980,14 @@ function createSectionCss() {
     // rather than re-deriving the swatch in every divider rule.
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }",
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }",
+    // accent / dark are COLOUR SCHEMES (tokens.ts gemBandSchemeColors): the band re-points every --gem-color-* to its own
+    // AA set, so a card, a button or a price nested in the band reads the band's colours instead of the page's. Before,
+    // only the band's own background and `color` changed: 988 / 991 lines of text under AA across 248 GemFactory sections.
+    // The CSS fallback tier sits next to the rules, so a page that sets --gem-color-* by hand still gets a band in its brand.
+    GEM_BAND_SCHEME_FALLBACK_CSS,
+    ...GEM_BAND_SCHEMES.map(
+      (band) => `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='${band}'] { ${gemBandSchemeDeclarations(band)} --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }`
+    ),
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }",
     // On accent/dark bands, keep muted sub-copy + headings legible against the inverted ground.
     ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }",
@@ -4344,12 +4526,13 @@ function gemFrameworkPublicCssVariables() {
   return frameworkPublicVariables;
 }
 var ROOT_SELECTOR = /^\s*(?::root|html|:host)(?:\[[^\]]*\]|:[a-z-]+(?:\([^()]*\))?)*\s*$/;
+var EDITION_ROOT_SELECTOR = /^\s*:where\(\s*\[data-gem-edition=(["'])\d+\1\](?:\s*,\s*\[data-gem-edition=(["'])\d+\2\])*\s*\)\s*$/;
 function gemPublicCssVariablesFrom(stylesheet) {
   const css = stylesheet.replace(/\/\*[\s\S]*?\*\//g, " ");
   const declaredOnRoot = /* @__PURE__ */ new Set();
   const declaredElsewhere = /* @__PURE__ */ new Set();
   for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
-    const onRoot = selector.split(",").every((part) => ROOT_SELECTOR.test(part));
+    const onRoot = EDITION_ROOT_SELECTOR.test(selector) || selector.split(",").every((part) => ROOT_SELECTOR.test(part));
     for (const [, name] of body.matchAll(/(--gem-[a-z0-9-]+)\s*:/g)) (onRoot ? declaredOnRoot : declaredElsewhere).add(name);
   }
   const mentioned = new Set([...css.matchAll(/--gem-[a-z0-9-]+/g)].map((match) => match[0]));

package/dist/sections.css

@@ -610,8 +610,9 @@ sticky-header.header-wrapper {
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }
+:where(:root) { --gem-scheme-dark-background: var(--gem-color-text); --gem-scheme-dark-surface: color-mix(in srgb, var(--gem-color-text) 92%, var(--gem-color-background)); --gem-scheme-dark-text: var(--gem-color-background); --gem-scheme-dark-muted: color-mix(in srgb, var(--gem-color-text) 28%, var(--gem-color-background)); --gem-scheme-dark-accent: var(--gem-color-background); --gem-scheme-dark-accent-text: var(--gem-color-text); --gem-scheme-dark-border: color-mix(in srgb, var(--gem-color-text) 78%, var(--gem-color-background)); --gem-scheme-dark-success: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-success)); --gem-scheme-dark-warning: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-warning)); --gem-scheme-dark-danger: color-mix(in srgb, var(--gem-color-background) 45%, var(--gem-color-danger)); --gem-scheme-accent-background: var(--gem-color-accent); --gem-scheme-accent-surface: var(--gem-color-accent); --gem-scheme-accent-text: var(--gem-color-accent-text); --gem-scheme-accent-muted: var(--gem-color-accent-text); --gem-scheme-accent-accent: var(--gem-color-accent-text); --gem-scheme-accent-accent-text: var(--gem-color-accent); --gem-scheme-accent-border: color-mix(in srgb, var(--gem-color-accent) 78%, var(--gem-color-accent-text)); --gem-scheme-accent-success: var(--gem-color-accent-text); --gem-scheme-accent-warning: var(--gem-color-accent-text); --gem-scheme-accent-danger: var(--gem-color-accent-text); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-color-background: var(--gem-scheme-dark-background); --gem-color-surface: var(--gem-scheme-dark-surface); --gem-color-text: var(--gem-scheme-dark-text); --gem-color-muted: var(--gem-scheme-dark-muted); --gem-color-accent: var(--gem-scheme-dark-accent); --gem-color-accent-text: var(--gem-scheme-dark-accent-text); --gem-color-border: var(--gem-scheme-dark-border); --gem-color-success: var(--gem-scheme-dark-success); --gem-color-warning: var(--gem-scheme-dark-warning); --gem-color-danger: var(--gem-scheme-dark-danger); --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-color-background: var(--gem-scheme-accent-background); --gem-color-surface: var(--gem-scheme-accent-surface); --gem-color-text: var(--gem-scheme-accent-text); --gem-color-muted: var(--gem-scheme-accent-muted); --gem-color-accent: var(--gem-scheme-accent-accent); --gem-color-accent-text: var(--gem-scheme-accent-accent-text); --gem-color-border: var(--gem-scheme-accent-border); --gem-color-success: var(--gem-scheme-accent-success); --gem-color-warning: var(--gem-scheme-accent-warning); --gem-color-danger: var(--gem-scheme-accent-danger); --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); --gem-band-bg: var(--gem-color-background); --gem-focus-ring: 2px solid var(--gem-color-text); padding-block: var(--gem-space-xl); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }

package/dist/tokens.css

@@ -64,4 +64,8 @@
   --gem-tap-min: 44px;
   --gem-focus-offset: 3px;
 }
+:where(:root [data-gem-section-background='dark'], :root [data-gem-section-background='accent']) {
+  --gem-border-subtle: calc(1px * var(--gem-style-border, 1)) solid var(--gem-color-border);
+  --gem-border-strong: calc(1px * var(--gem-style-border, 1)) solid color-mix(in srgb, var(--gem-color-text) 28%, transparent);
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/gem-framework",
-  "version": "0.10.1",
+  "version": "0.12.1",
   "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",
@@ -9,6 +9,10 @@
     "./sections": "./dist/sections.js",
     "./section-gate": "./dist/section-gate.js",
     "./settings-schema": "./dist/settings-schema.js",
+    "./editions": {
+      "types": "./dist/editions.d.ts",
+      "default": "./dist/editions.js"
+    },
     "./gem-framework.css": "./dist/gem-framework.css",
     "./tokens.css": "./dist/tokens.css",
     "./primitives.css": "./dist/primitives.css",