@gemboss/gem-framework 0.5.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/SOURCE.json +2 -2
  2. package/dist/gem-framework.css +8 -2
  3. package/dist/index.js +34 -5
  4. package/package.json +1 -1
package/dist/SOURCE.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "package": "@gemboss/gem-framework",
3
- "version": "0.5.0",
4
- "gemtheme_sha": "02d4924e5c672fd4ae6f21f4ead858dcfa08e4e3",
3
+ "version": "0.5.1",
4
+ "gemtheme_sha": "b0ca8d5022be58f1deb0102c302de2b2ee6ef12c",
5
5
  "gemtheme_dirty": false,
6
6
  "framework_version": "0.1.0"
7
7
  }
package/dist/gem-framework.css CHANGED
@@ -97,10 +97,16 @@ button, [type='button'], [type='submit'] {
97
97
  a {
98
98
  color: inherit;
99
99
  }
100
+ :where(.gem-section, [data-gem-section-id]) {
101
+ --gem-focus-ring: 2px solid var(--gem-color-accent);
102
+ }
100
103
  :focus-visible {
101
104
  outline: var(--gem-focus-ring, 2px solid var(--gem-color-accent));
102
105
  outline-offset: var(--gem-focus-offset, 3px);
103
106
  }
107
+ :where([data-gem-section-background='accent'], [data-gem-section-background='dark']) :focus-visible:focus-visible {
108
+ box-shadow: 0 0 0 calc(var(--gem-focus-offset, 3px) + 4px) var(--gem-band-bg);
109
+ }
104
110
  .gem-skip-to-content-link:focus {
105
111
  position: fixed;
106
112
  inset-block-start: var(--gem-space-sm);
@@ -2050,8 +2056,8 @@ sticky-header.header-wrapper {
2050
2056
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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; }
2051
2057
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }
2052
2058
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }
2053
- :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }
2054
- :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); padding-block: var(--gem-space-xl); }
2059
+ :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }
2060
+ :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }
2055
2061
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }
2056
2062
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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, .gem-footer)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }
2057
2063
  :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }
package/dist/index.js CHANGED
@@ -87,9 +87,21 @@ var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
87
87
  var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
88
88
  function gemDerivedSpaceCssVars(spacing) {
89
89
  const named = new Set(Object.entries(spacing ?? {}).filter(([, v]) => String(v ?? "").trim()).map(([k]) => slugify(k)));
90
- const md = String(spacing?.md ?? "").trim();
91
- const mdUnitless = md !== "" && !/\d\s*[a-z%]/i.test(stripImportant(md));
92
- return Object.entries(GEM_DERIVED_SPACE_STEPS).filter(([key]) => !named.has(slugify(key))).map(([key, factor]) => `--gem-space-${slugify(key)}: ${mdUnitless ? "0" : `calc(var(--gem-space-md) * ${factor})`};`);
90
+ const md = gemSpaceMdKind(spacing?.md);
91
+ return Object.entries(GEM_DERIVED_SPACE_STEPS).filter(([key]) => !named.has(slugify(key))).map(([key, factor]) => `--gem-space-${slugify(key)}: ${derivedSpaceValue(md, factor)};`);
92
+ }
93
+ function gemSpaceMdKind(raw) {
94
+ const md = stripImportant(String(raw ?? "")).trim();
95
+ if (md === "") return "absent";
96
+ if (/^[+-]?(\d+\.?\d*|\.\d+)$/.test(md)) return Number(md) === 0 ? "zero" : "invalid";
97
+ if (/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?[a-z%]+$/i.test(md)) return "length";
98
+ if (/^(var|calc|clamp|min|max|env)\(.*\)$/i.test(md)) return "length";
99
+ return "invalid";
100
+ }
101
+ function derivedSpaceValue(md, factor) {
102
+ if (md === "zero") return "0";
103
+ if (md === "invalid") return `calc(${parseFloat(defaultGemTokens.spacing.md) * factor}px * var(--gem-style-space, 1))`;
104
+ return `calc(var(--gem-space-md) * ${factor})`;
93
105
  }
94
106
  var GEM_ROW_CSS_VARIABLES = [
95
107
  "--gem-row-cols",
@@ -933,10 +945,27 @@ function createGemBaseCss(profile = "dawn-parity") {
933
945
  "a {",
934
946
  " color: inherit;",
935
947
  "}",
948
+ // Vòng focus theo NỀN (gemsite #761, review #655; đo Chromium 03/10/2026).
949
+ // 1. --gem-focus-ring khai ở :root là "2px solid var(--gem-color-accent)" và var() bị thay MỘT LẦN ở :root: section
950
+ // đặt lại accent (bảng màu) vẫn nhận accent của trang. Khai lại trên chính section để var() tính theo section.
951
+ // 2. Núm nền accent / dark tô nền mà KHÔNG đổi accent: vòng accent trên nền accent là không thấy (1:1). Trong băng đó
952
+ // vòng HAI MÀU (WCAG C40): nét màu chữ của băng + quầng màu nền của băng bao quanh. Hai màu tương phản nhau nên
953
+ // trên nền nào cũng có một màu nổi: băng tối thì nét sáng, ô sáng lồng trong băng tối thì quầng tối. Màu chữ của
954
+ // khối chứa KHÔNG lấy được bằng CSS: currentColor giữ nguyên từ khoá tới phần tử dùng nó (kể cả biến có kiểu
955
+ // @property), nên nút / ô nhập ra vòng màu chữ của chính mặt nút (đen trên băng tối, đo).
956
+ // Đặt --gem-focus-ring ở :root không tới được trong section.
957
+ ":where(.gem-section, [data-gem-section-id]) {",
958
+ " --gem-focus-ring: 2px solid var(--gem-color-accent);",
959
+ "}",
936
960
  ":focus-visible {",
937
961
  " outline: var(--gem-focus-ring, 2px solid var(--gem-color-accent));",
938
962
  " outline-offset: var(--gem-focus-offset, 3px);",
939
963
  "}",
964
+ // :focus-visible hai lần = độ ưu tiên (0,2,0): thắng `.gem-button { box-shadow: none }` của profile Dawn (0,1,0, nằm
965
+ // sau) đã xoá quầng của nút trên ô sáng lồng trong băng (đo); luật focus riêng của section (≥ 0,3,0) vẫn thắng nó.
966
+ ":where([data-gem-section-background='accent'], [data-gem-section-background='dark']) :focus-visible:focus-visible {",
967
+ " box-shadow: 0 0 0 calc(var(--gem-focus-offset, 3px) + 4px) var(--gem-band-bg);",
968
+ "}",
940
969
  ".gem-skip-to-content-link:focus {",
941
970
  " position: fixed;",
942
971
  " inset-block-start: var(--gem-space-sm);",
@@ -2613,8 +2642,8 @@ function createSectionCss() {
2613
2642
  // rather than re-deriving the swatch in every divider rule.
2614
2643
  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }",
2615
2644
  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }",
2616
- ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }",
2617
- ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); padding-block: var(--gem-space-xl); }",
2645
+ ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }",
2646
+ ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }",
2618
2647
  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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); }",
2619
2648
  // On accent/dark bands, keep muted sub-copy + headings legible against the inverted ground.
2620
2649
  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[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, .gem-footer)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gemboss/gem-framework",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",