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/__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; 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..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,6 +157,21 @@ exports[`atomic: gap > should output all atomic gap classes 1`] = ` --_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, @@ -168,7 +183,10 @@ exports[`atomic: gap > should output all atomic gap classes 1`] = ` .gx24, .gx32, .gx48, -.gx64, +.gx64 { + row-gap: var(--_gap-x) !important; +} + .gy0, .gy1, .gy2, @@ -180,20 +198,8 @@ exports[`atomic: gap > should output all atomic gap classes 1`] = ` .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; } " `; diff --git a/packages/stacks-classic/lib/atomic/gap.less b/packages/stacks-classic/lib/atomic/gap.less index 1f45f77510..fd48942bef 100644 --- a/packages/stacks-classic/lib/atomic/gap.less +++ b/packages/stacks-classic/lib/atomic/gap.less @@ -39,8 +39,14 @@ #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: var(--_gap-y, 0) var(--_gap-x, 0) !important; +} + +.gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64 { + row-gap: var(--_gap-x) !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-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 }, ];