From 1815f33b78163ca4265aaa748a52e7d96c9c7527 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 1 Jul 2026 13:05:43 -0400 Subject: [PATCH 1/3] fix(gap): target axis gap properties --- .../__snapshots__/gap.less.test.ts.snap | 177 ++++++++++++++---- packages/stacks-classic/lib/atomic/gap.less | 16 +- .../src/docs/public/system/base/gap.md | 72 +++---- 3 files changed, 189 insertions(+), 76 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap index c7da02db95..3093bbbde5 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap @@ -157,43 +157,148 @@ exports[`atomic: gap > should output all atomic gap classes 1`] = ` --_gap-y: var(--su64); } -.gx0, -.gx1, -.gx2, -.gx4, -.gx6, -.gx8, -.gx12, -.gx16, -.gx24, -.gx32, -.gx48, -.gx64, -.gy0, -.gy1, -.gy2, -.gy4, -.gy6, -.gy8, -.gy12, -.gy16, -.gy24, -.gy32, -.gy48, -.gy64, -.g0, -.g1, -.g2, -.g4, -.g6, -.g8, -.g12, -.g16, -.g24, -.g32, -.g48, +.g0 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g1 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g2 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g4 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g6 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g8 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g12 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g16 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g24 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g32 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.g48 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + .g64 { - gap: var(--_gap-y, 0) var(--_gap-x, 0); + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.gx0 { + row-gap: var(--_gap-x) !important; +} + +.gx1 { + row-gap: var(--_gap-x) !important; +} + +.gx2 { + row-gap: var(--_gap-x) !important; +} + +.gx4 { + row-gap: var(--_gap-x) !important; +} + +.gx6 { + row-gap: var(--_gap-x) !important; +} + +.gx8 { + row-gap: var(--_gap-x) !important; +} + +.gx12 { + row-gap: var(--_gap-x) !important; +} + +.gx16 { + row-gap: var(--_gap-x) !important; +} + +.gx24 { + row-gap: var(--_gap-x) !important; +} + +.gx32 { + row-gap: var(--_gap-x) !important; +} + +.gx48 { + row-gap: var(--_gap-x) !important; +} + +.gx64 { + row-gap: var(--_gap-x) !important; +} + +.gy0 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy1 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy2 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy4 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy6 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy8 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy12 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy16 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy24 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy32 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy48 { + column-gap: var(--_gap-y, 0) !important; +} + +.gy64 { + column-gap: var(--_gap-y, 0) !important; } " `; diff --git a/packages/stacks-classic/lib/atomic/gap.less b/packages/stacks-classic/lib/atomic/gap.less index 1f45f77510..d923c24acf 100644 --- a/packages/stacks-classic/lib/atomic/gap.less +++ b/packages/stacks-classic/lib/atomic/gap.less @@ -39,8 +39,16 @@ #stacks-internals #responsify('.gy48', { --_gap-y: var(--su48); }); #stacks-internals #responsify('.gy64', { --_gap-y: var(--su64); }); -.gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64, -.gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64, -.g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 { - gap: var(--_gap-y, 0) var(--_gap-x, 0); +@gap-values: 0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64; + +.generate-gap-classes(@prefix, @property, @property-value) { + each(@gap-values, { + .@{prefix}@{value} { + @{property}: @property-value !important; + } + }); } + +.generate-gap-classes(g, gap, ~"var(--_gap-y, 0) var(--_gap-x, 0)"); +.generate-gap-classes(gx, row-gap, ~"var(--_gap-x)"); +.generate-gap-classes(gy, column-gap, ~"var(--_gap-y, 0)"); diff --git a/packages/stacks-docs/src/docs/public/system/base/gap.md b/packages/stacks-docs/src/docs/public/system/base/gap.md index 36e67512a7..508dfcffca 100644 --- a/packages/stacks-docs/src/docs/public/system/base/gap.md +++ b/packages/stacks-docs/src/docs/public/system/base/gap.md @@ -9,48 +9,48 @@ description: Atomic CSS gap classes allow you to set spacing on the direct child import type { ClassTableRow } from '$components/ClassTable.svelte'; const gapClasses: ClassTableRow[] = [ - { class: '.g0', output: 'gap: 0', define: 'Add no space between items', responsive: true }, - { class: '.g1', output: 'gap: 1px', define: 'Space out items by 1px', responsive: true }, - { class: '.g2', output: 'gap: 2px', define: 'Space out items by 2px', responsive: true }, - { class: '.g4', output: 'gap: 4px', define: 'Space out items by 4px', responsive: true }, - { class: '.g6', output: 'gap: 6px', define: 'Space out items by 6px', responsive: true }, - { class: '.g8', output: 'gap: 8px', define: 'Space out items by 8px', responsive: true }, - { class: '.g12', output: 'gap: 12px', define: 'Space out items by 12px', responsive: true }, - { class: '.g16', output: 'gap: 16px', define: 'Space out items by 16px', responsive: true }, - { class: '.g24', output: 'gap: 24px', define: 'Space out items by 24px', responsive: true }, - { class: '.g32', output: 'gap: 32px', define: 'Space out items by 32px', responsive: true }, - { class: '.g48', output: 'gap: 48px', define: 'Space out items by 48px', responsive: true }, - { class: '.g64', output: 'gap: 64px', define: 'Space out items by 64px', responsive: true }, + { class: '.g0', output: 'gap: 0 0', define: 'Add no space between items', responsive: true }, + { class: '.g1', output: 'gap: 1px 1px', define: 'Space out items by 1px', responsive: true }, + { class: '.g2', output: 'gap: 2px 2px', define: 'Space out items by 2px', responsive: true }, + { class: '.g4', output: 'gap: 4px 4px', define: 'Space out items by 4px', responsive: true }, + { class: '.g6', output: 'gap: 6px 6px', define: 'Space out items by 6px', responsive: true }, + { class: '.g8', output: 'gap: 8px 8px', define: 'Space out items by 8px', responsive: true }, + { class: '.g12', output: 'gap: 12px 12px', define: 'Space out items by 12px', responsive: true }, + { class: '.g16', output: 'gap: 16px 16px', define: 'Space out items by 16px', responsive: true }, + { class: '.g24', output: 'gap: 24px 24px', define: 'Space out items by 24px', responsive: true }, + { class: '.g32', output: 'gap: 32px 32px', define: 'Space out items by 32px', responsive: true }, + { class: '.g48', output: 'gap: 48px 48px', define: 'Space out items by 48px', responsive: true }, + { class: '.g64', output: 'gap: 64px 64px', define: 'Space out items by 64px', responsive: true }, ]; const columnGapClasses: ClassTableRow[] = [ - { class: '.gx0', define: 'Add no space between columns', responsive: true }, - { class: '.gx1', define: 'Space out columns by 1px', responsive: true }, - { class: '.gx2', define: 'Space out columns by 2px', responsive: true }, - { class: '.gx4', define: 'Space out columns by 4px', responsive: true }, - { class: '.gx6', define: 'Space out columns by 6px', responsive: true }, - { class: '.gx8', define: 'Space out columns by 8px', responsive: true }, - { class: '.gx12', define: 'Space out columns by 12px', responsive: true }, - { class: '.gx16', define: 'Space out columns by 16px', responsive: true }, - { class: '.gx24', define: 'Space out columns by 24px', responsive: true }, - { class: '.gx32', define: 'Space out columns by 32px', responsive: true }, - { class: '.gx48', define: 'Space out columns by 48px', responsive: true }, - { class: '.gx64', define: 'Space out columns by 64px', responsive: true }, + { class: '.gx0', output: 'row-gap: 0', define: 'Add no space between columns', responsive: true }, + { class: '.gx1', output: 'row-gap: 1px', define: 'Space out columns by 1px', responsive: true }, + { class: '.gx2', output: 'row-gap: 2px', define: 'Space out columns by 2px', responsive: true }, + { class: '.gx4', output: 'row-gap: 4px', define: 'Space out columns by 4px', responsive: true }, + { class: '.gx6', output: 'row-gap: 6px', define: 'Space out columns by 6px', responsive: true }, + { class: '.gx8', output: 'row-gap: 8px', define: 'Space out columns by 8px', responsive: true }, + { class: '.gx12', output: 'row-gap: 12px', define: 'Space out columns by 12px', responsive: true }, + { class: '.gx16', output: 'row-gap: 16px', define: 'Space out columns by 16px', responsive: true }, + { class: '.gx24', output: 'row-gap: 24px', define: 'Space out columns by 24px', responsive: true }, + { class: '.gx32', output: 'row-gap: 32px', define: 'Space out columns by 32px', responsive: true }, + { class: '.gx48', output: 'row-gap: 48px', define: 'Space out columns by 48px', responsive: true }, + { class: '.gx64', output: 'row-gap: 64px', define: 'Space out columns by 64px', responsive: true }, ]; const rowGapClasses: ClassTableRow[] = [ - { class: '.gy0', define: 'Add no space between rows', responsive: true }, - { class: '.gy1', define: 'Space out rows by 1px', responsive: true }, - { class: '.gy2', define: 'Space out rows by 2px', responsive: true }, - { class: '.gy4', define: 'Space out rows by 4px', responsive: true }, - { class: '.gy6', define: 'Space out rows by 6px', responsive: true }, - { class: '.gy8', define: 'Space out rows by 8px', responsive: true }, - { class: '.gy12', define: 'Space out rows by 12px', responsive: true }, - { class: '.gy16', define: 'Space out rows by 16px', responsive: true }, - { class: '.gy24', define: 'Space out rows by 24px', responsive: true }, - { class: '.gy32', define: 'Space out rows by 32px', responsive: true }, - { class: '.gy48', define: 'Space out rows by 48px', responsive: true }, - { class: '.gy64', define: 'Space out rows by 64px', responsive: true }, + { class: '.gy0', output: 'column-gap: 0', define: 'Add no space between rows', responsive: true }, + { class: '.gy1', output: 'column-gap: 1px', define: 'Space out rows by 1px', responsive: true }, + { class: '.gy2', output: 'column-gap: 2px', define: 'Space out rows by 2px', responsive: true }, + { class: '.gy4', output: 'column-gap: 4px', define: 'Space out rows by 4px', responsive: true }, + { class: '.gy6', output: 'column-gap: 6px', define: 'Space out rows by 6px', responsive: true }, + { class: '.gy8', output: 'column-gap: 8px', define: 'Space out rows by 8px', responsive: true }, + { class: '.gy12', output: 'column-gap: 12px', define: 'Space out rows by 12px', responsive: true }, + { class: '.gy16', output: 'column-gap: 16px', define: 'Space out rows by 16px', responsive: true }, + { class: '.gy24', output: 'column-gap: 24px', define: 'Space out rows by 24px', responsive: true }, + { class: '.gy32', output: 'column-gap: 32px', define: 'Space out rows by 32px', responsive: true }, + { class: '.gy48', output: 'column-gap: 48px', define: 'Space out rows by 48px', responsive: true }, + { class: '.gy64', output: 'column-gap: 64px', define: 'Space out rows by 64px', responsive: true }, ]; From 6fe00c8842f0155bad0a2486e1d2e521e31bcf5e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 1 Jul 2026 13:11:51 -0400 Subject: [PATCH 2/3] fix(gap): simplify selectors and add changeset --- .changeset/fresh-gaps-fix.md | 5 + .../__snapshots__/gap.less.test.ts.snap | 165 ++++-------------- packages/stacks-classic/lib/atomic/gap.less | 18 +- 3 files changed, 46 insertions(+), 142 deletions(-) create mode 100644 .changeset/fresh-gaps-fix.md diff --git a/.changeset/fresh-gaps-fix.md b/.changeset/fresh-gaps-fix.md new file mode 100644 index 0000000000..b52394a503 --- /dev/null +++ b/.changeset/fresh-gaps-fix.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks": patch +--- + +Fix atomic gap utilities so axis-specific classes emit targeted gap properties. diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap index 3093bbbde5..12fc226573 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap @@ -157,146 +157,47 @@ exports[`atomic: gap > should output all atomic gap classes 1`] = ` --_gap-y: var(--su64); } -.g0 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g1 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g2 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g4 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g6 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g8 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g12 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g16 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g24 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g32 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - -.g48 { - gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; -} - +.g0, +.g1, +.g2, +.g4, +.g6, +.g8, +.g12, +.g16, +.g24, +.g32, +.g48, .g64 { gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; } -.gx0 { - row-gap: var(--_gap-x) !important; -} - -.gx1 { - row-gap: var(--_gap-x) !important; -} - -.gx2 { - row-gap: var(--_gap-x) !important; -} - -.gx4 { - row-gap: var(--_gap-x) !important; -} - -.gx6 { - row-gap: var(--_gap-x) !important; -} - -.gx8 { - row-gap: var(--_gap-x) !important; -} - -.gx12 { - row-gap: var(--_gap-x) !important; -} - -.gx16 { - row-gap: var(--_gap-x) !important; -} - -.gx24 { - row-gap: var(--_gap-x) !important; -} - -.gx32 { - row-gap: var(--_gap-x) !important; -} - -.gx48 { - row-gap: var(--_gap-x) !important; -} - +.gx0, +.gx1, +.gx2, +.gx4, +.gx6, +.gx8, +.gx12, +.gx16, +.gx24, +.gx32, +.gx48, .gx64 { row-gap: var(--_gap-x) !important; } -.gy0 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy1 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy2 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy4 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy6 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy8 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy12 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy16 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy24 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy32 { - column-gap: var(--_gap-y, 0) !important; -} - -.gy48 { - column-gap: var(--_gap-y, 0) !important; -} - +.gy0, +.gy1, +.gy2, +.gy4, +.gy6, +.gy8, +.gy12, +.gy16, +.gy24, +.gy32, +.gy48, .gy64 { column-gap: var(--_gap-y, 0) !important; } diff --git a/packages/stacks-classic/lib/atomic/gap.less b/packages/stacks-classic/lib/atomic/gap.less index d923c24acf..fd48942bef 100644 --- a/packages/stacks-classic/lib/atomic/gap.less +++ b/packages/stacks-classic/lib/atomic/gap.less @@ -39,16 +39,14 @@ #stacks-internals #responsify('.gy48', { --_gap-y: var(--su48); }); #stacks-internals #responsify('.gy64', { --_gap-y: var(--su64); }); -@gap-values: 0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64; +.g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} -.generate-gap-classes(@prefix, @property, @property-value) { - each(@gap-values, { - .@{prefix}@{value} { - @{property}: @property-value !important; - } - }); +.gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64 { + row-gap: var(--_gap-x) !important; } -.generate-gap-classes(g, gap, ~"var(--_gap-y, 0) var(--_gap-x, 0)"); -.generate-gap-classes(gx, row-gap, ~"var(--_gap-x)"); -.generate-gap-classes(gy, column-gap, ~"var(--_gap-y, 0)"); +.gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64 { + column-gap: var(--_gap-y, 0) !important; +} From 7f54ac6516832794a524f1446582dcbb4511cdf0 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 2 Jul 2026 12:41:49 -0400 Subject: [PATCH 3/3] update snapshot since last merge --- .../__snapshots__/stacks.less.test.ts.snap | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/stacks-classic/lib/__snapshots__/stacks.less.test.ts.snap b/packages/stacks-classic/lib/__snapshots__/stacks.less.test.ts.snap index 17a2aad7b6..fae5d0443b 100644 --- a/packages/stacks-classic/lib/__snapshots__/stacks.less.test.ts.snap +++ b/packages/stacks-classic/lib/__snapshots__/stacks.less.test.ts.snap @@ -8723,6 +8723,20 @@ p { .gy64 { --_gap-y: var(--su64); } +.g0, +.g1, +.g2, +.g4, +.g6, +.g8, +.g12, +.g16, +.g24, +.g32, +.g48, +.g64 { + gap: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} .gx0, .gx1, .gx2, @@ -8734,7 +8748,9 @@ p { .gx24, .gx32, .gx48, -.gx64, +.gx64 { + row-gap: var(--_gap-x) !important; +} .gy0, .gy1, .gy2, @@ -8746,20 +8762,8 @@ p { .gy24, .gy32, .gy48, -.gy64, -.g0, -.g1, -.g2, -.g4, -.g6, -.g8, -.g12, -.g16, -.g24, -.g32, -.g48, -.g64 { - gap: var(--_gap-y, 0) var(--_gap-x, 0); +.gy64 { + column-gap: var(--_gap-y, 0) !important; } .g-af-dense { grid-auto-flow: dense;