From c2f23faade11cededcb4f825f2e7d9b9ba996d96 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 13:31:16 -0500 Subject: [PATCH 1/9] refactor(spacing): generate spacing atomic classes programatically This fixes the bug referenced in https://github.com/StackExchange/Stacks/pull/1652 --- .../__snapshots__/spacing.less.test.ts.snap | 2010 +++++++++++++++++ lib/atomic/spacing-mixins.less | 97 + lib/atomic/spacing.less | 360 +-- lib/atomic/spacing.less.test.ts | 12 + 4 files changed, 2176 insertions(+), 303 deletions(-) create mode 100644 lib/atomic/__snapshots__/spacing.less.test.ts.snap create mode 100644 lib/atomic/spacing-mixins.less create mode 100644 lib/atomic/spacing.less.test.ts diff --git a/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/lib/atomic/__snapshots__/spacing.less.test.ts.snap new file mode 100644 index 0000000000..ba377b4867 --- /dev/null +++ b/lib/atomic/__snapshots__/spacing.less.test.ts.snap @@ -0,0 +1,2010 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: misc > should output all atomic css classes 1`] = ` +"body { + --su-base: 1; + --su-static0: 0px; + --su-static1: 1px; + --su-static2: 2px; + --su-static4: 4px; + --su-static6: 6px; + --su-static8: 8px; + --su-static12: 12px; + --su-static16: 16px; + --su-static24: 24px; + --su-static32: 32px; + --su-static48: 48px; + --su-static64: 64px; + --su-static96: 96px; + --su-static128: 128px; + --su0: var(--su-static0); + --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base))); + --su2: calc(var(--su-static2) * var(--su-base)); + --su4: calc(var(--su-static4) * var(--su-base)); + --su6: calc(var(--su-static6) * var(--su-base)); + --su8: calc(var(--su-static8) * var(--su-base)); + --su12: calc(var(--su-static12) * var(--su-base)); + --su16: calc(var(--su-static16) * var(--su-base)); + --su24: calc(var(--su-static24) * var(--su-base)); + --su32: calc(var(--su-static32) * var(--su-base)); + --su48: calc(var(--su-static48) * var(--su-base)); + --su64: calc(var(--su-static64) * var(--su-base)); + --su96: calc(var(--su-static96) * var(--su-base)); + --su128: calc(var(--su-static128) * var(--su-base)); +} + +.m-auto { + margin: auto !important; +} + +.m0 { + margin: var(--su0) !important; +} + +.m1 { + margin: var(--su1) !important; +} + +.m2 { + margin: var(--su2) !important; +} + +.m4 { + margin: var(--su4) !important; +} + +.m6 { + margin: var(--su6) !important; +} + +.m8 { + margin: var(--su8) !important; +} + +.m12 { + margin: var(--su12) !important; +} + +.m16 { + margin: var(--su16) !important; +} + +.m24 { + margin: var(--su24) !important; +} + +.m32 { + margin: var(--su32) !important; +} + +.m48 { + margin: var(--su48) !important; +} + +.m64 { + margin: var(--su64) !important; +} + +.m96 { + margin: var(--su96) !important; +} + +.m128 { + margin: var(--su128) !important; +} + +.mn1 { + margin: calc(var(--su1) * -1) !important; +} + +.mn2 { + margin: calc(var(--su2) * -1) !important; +} + +.mn4 { + margin: calc(var(--su4) * -1) !important; +} + +.mn6 { + margin: calc(var(--su6) * -1) !important; +} + +.mn8 { + margin: calc(var(--su8) * -1) !important; +} + +.mn12 { + margin: calc(var(--su12) * -1) !important; +} + +.mn16 { + margin: calc(var(--su16) * -1) !important; +} + +.mn24 { + margin: calc(var(--su24) * -1) !important; +} + +.mn32 { + margin: calc(var(--su32) * -1) !important; +} + +.mn48 { + margin: calc(var(--su48) * -1) !important; +} + +.mn64 { + margin: calc(var(--su64) * -1) !important; +} + +.mn96 { + margin: calc(var(--su96) * -1) !important; +} + +.mn128 { + margin: calc(var(--su128) * -1) !important; +} + +.mn50 { + margin: -50% !important; +} + +.mn100 { + margin: -100% !important; +} + +.m50 { + margin: 50% !important; +} + +.m100 { + margin: 100% !important; +} + +.mn50 { + margin: -50% !important; +} + +.mn100 { + margin: -100% !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mt0 { + margin-top: var(--su0) !important; +} + +.mt1 { + margin-top: var(--su1) !important; +} + +.mt2 { + margin-top: var(--su2) !important; +} + +.mt4 { + margin-top: var(--su4) !important; +} + +.mt6 { + margin-top: var(--su6) !important; +} + +.mt8 { + margin-top: var(--su8) !important; +} + +.mt12 { + margin-top: var(--su12) !important; +} + +.mt16 { + margin-top: var(--su16) !important; +} + +.mt24 { + margin-top: var(--su24) !important; +} + +.mt32 { + margin-top: var(--su32) !important; +} + +.mt48 { + margin-top: var(--su48) !important; +} + +.mt64 { + margin-top: var(--su64) !important; +} + +.mt96 { + margin-top: var(--su96) !important; +} + +.mt128 { + margin-top: var(--su128) !important; +} + +.mtn1 { + margin-top: calc(var(--su1) * -1) !important; +} + +.mtn2 { + margin-top: calc(var(--su2) * -1) !important; +} + +.mtn4 { + margin-top: calc(var(--su4) * -1) !important; +} + +.mtn6 { + margin-top: calc(var(--su6) * -1) !important; +} + +.mtn8 { + margin-top: calc(var(--su8) * -1) !important; +} + +.mtn12 { + margin-top: calc(var(--su12) * -1) !important; +} + +.mtn16 { + margin-top: calc(var(--su16) * -1) !important; +} + +.mtn24 { + margin-top: calc(var(--su24) * -1) !important; +} + +.mtn32 { + margin-top: calc(var(--su32) * -1) !important; +} + +.mtn48 { + margin-top: calc(var(--su48) * -1) !important; +} + +.mtn64 { + margin-top: calc(var(--su64) * -1) !important; +} + +.mtn96 { + margin-top: calc(var(--su96) * -1) !important; +} + +.mtn128 { + margin-top: calc(var(--su128) * -1) !important; +} + +.mtn50 { + margin-top: -50% !important; +} + +.mtn100 { + margin-top: -100% !important; +} + +.mt50 { + margin-top: 50% !important; +} + +.mt100 { + margin-top: 100% !important; +} + +.mtn50 { + margin-top: -50% !important; +} + +.mtn100 { + margin-top: -100% !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mr0 { + margin-right: var(--su0) !important; +} + +.mr1 { + margin-right: var(--su1) !important; +} + +.mr2 { + margin-right: var(--su2) !important; +} + +.mr4 { + margin-right: var(--su4) !important; +} + +.mr6 { + margin-right: var(--su6) !important; +} + +.mr8 { + margin-right: var(--su8) !important; +} + +.mr12 { + margin-right: var(--su12) !important; +} + +.mr16 { + margin-right: var(--su16) !important; +} + +.mr24 { + margin-right: var(--su24) !important; +} + +.mr32 { + margin-right: var(--su32) !important; +} + +.mr48 { + margin-right: var(--su48) !important; +} + +.mr64 { + margin-right: var(--su64) !important; +} + +.mr96 { + margin-right: var(--su96) !important; +} + +.mr128 { + margin-right: var(--su128) !important; +} + +.mrn1 { + margin-right: calc(var(--su1) * -1) !important; +} + +.mrn2 { + margin-right: calc(var(--su2) * -1) !important; +} + +.mrn4 { + margin-right: calc(var(--su4) * -1) !important; +} + +.mrn6 { + margin-right: calc(var(--su6) * -1) !important; +} + +.mrn8 { + margin-right: calc(var(--su8) * -1) !important; +} + +.mrn12 { + margin-right: calc(var(--su12) * -1) !important; +} + +.mrn16 { + margin-right: calc(var(--su16) * -1) !important; +} + +.mrn24 { + margin-right: calc(var(--su24) * -1) !important; +} + +.mrn32 { + margin-right: calc(var(--su32) * -1) !important; +} + +.mrn48 { + margin-right: calc(var(--su48) * -1) !important; +} + +.mrn64 { + margin-right: calc(var(--su64) * -1) !important; +} + +.mrn96 { + margin-right: calc(var(--su96) * -1) !important; +} + +.mrn128 { + margin-right: calc(var(--su128) * -1) !important; +} + +.mrn50 { + margin-right: -50% !important; +} + +.mrn100 { + margin-right: -100% !important; +} + +.mr50 { + margin-right: 50% !important; +} + +.mr100 { + margin-right: 100% !important; +} + +.mrn50 { + margin-right: -50% !important; +} + +.mrn100 { + margin-right: -100% !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.mb0 { + margin-bottom: var(--su0) !important; +} + +.mb1 { + margin-bottom: var(--su1) !important; +} + +.mb2 { + margin-bottom: var(--su2) !important; +} + +.mb4 { + margin-bottom: var(--su4) !important; +} + +.mb6 { + margin-bottom: var(--su6) !important; +} + +.mb8 { + margin-bottom: var(--su8) !important; +} + +.mb12 { + margin-bottom: var(--su12) !important; +} + +.mb16 { + margin-bottom: var(--su16) !important; +} + +.mb24 { + margin-bottom: var(--su24) !important; +} + +.mb32 { + margin-bottom: var(--su32) !important; +} + +.mb48 { + margin-bottom: var(--su48) !important; +} + +.mb64 { + margin-bottom: var(--su64) !important; +} + +.mb96 { + margin-bottom: var(--su96) !important; +} + +.mb128 { + margin-bottom: var(--su128) !important; +} + +.mbn1 { + margin-bottom: calc(var(--su1) * -1) !important; +} + +.mbn2 { + margin-bottom: calc(var(--su2) * -1) !important; +} + +.mbn4 { + margin-bottom: calc(var(--su4) * -1) !important; +} + +.mbn6 { + margin-bottom: calc(var(--su6) * -1) !important; +} + +.mbn8 { + margin-bottom: calc(var(--su8) * -1) !important; +} + +.mbn12 { + margin-bottom: calc(var(--su12) * -1) !important; +} + +.mbn16 { + margin-bottom: calc(var(--su16) * -1) !important; +} + +.mbn24 { + margin-bottom: calc(var(--su24) * -1) !important; +} + +.mbn32 { + margin-bottom: calc(var(--su32) * -1) !important; +} + +.mbn48 { + margin-bottom: calc(var(--su48) * -1) !important; +} + +.mbn64 { + margin-bottom: calc(var(--su64) * -1) !important; +} + +.mbn96 { + margin-bottom: calc(var(--su96) * -1) !important; +} + +.mbn128 { + margin-bottom: calc(var(--su128) * -1) !important; +} + +.mbn50 { + margin-bottom: -50% !important; +} + +.mbn100 { + margin-bottom: -100% !important; +} + +.mb50 { + margin-bottom: 50% !important; +} + +.mb100 { + margin-bottom: 100% !important; +} + +.mbn50 { + margin-bottom: -50% !important; +} + +.mbn100 { + margin-bottom: -100% !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.ml0 { + margin-left: var(--su0) !important; +} + +.ml1 { + margin-left: var(--su1) !important; +} + +.ml2 { + margin-left: var(--su2) !important; +} + +.ml4 { + margin-left: var(--su4) !important; +} + +.ml6 { + margin-left: var(--su6) !important; +} + +.ml8 { + margin-left: var(--su8) !important; +} + +.ml12 { + margin-left: var(--su12) !important; +} + +.ml16 { + margin-left: var(--su16) !important; +} + +.ml24 { + margin-left: var(--su24) !important; +} + +.ml32 { + margin-left: var(--su32) !important; +} + +.ml48 { + margin-left: var(--su48) !important; +} + +.ml64 { + margin-left: var(--su64) !important; +} + +.ml96 { + margin-left: var(--su96) !important; +} + +.ml128 { + margin-left: var(--su128) !important; +} + +.mln1 { + margin-left: calc(var(--su1) * -1) !important; +} + +.mln2 { + margin-left: calc(var(--su2) * -1) !important; +} + +.mln4 { + margin-left: calc(var(--su4) * -1) !important; +} + +.mln6 { + margin-left: calc(var(--su6) * -1) !important; +} + +.mln8 { + margin-left: calc(var(--su8) * -1) !important; +} + +.mln12 { + margin-left: calc(var(--su12) * -1) !important; +} + +.mln16 { + margin-left: calc(var(--su16) * -1) !important; +} + +.mln24 { + margin-left: calc(var(--su24) * -1) !important; +} + +.mln32 { + margin-left: calc(var(--su32) * -1) !important; +} + +.mln48 { + margin-left: calc(var(--su48) * -1) !important; +} + +.mln64 { + margin-left: calc(var(--su64) * -1) !important; +} + +.mln96 { + margin-left: calc(var(--su96) * -1) !important; +} + +.mln128 { + margin-left: calc(var(--su128) * -1) !important; +} + +.mln50 { + margin-left: -50% !important; +} + +.mln100 { + margin-left: -100% !important; +} + +.ml50 { + margin-left: 50% !important; +} + +.ml100 { + margin-left: 100% !important; +} + +.mln50 { + margin-left: -50% !important; +} + +.mln100 { + margin-left: -100% !important; +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.mx0 { + margin-left: var(--su0) !important; + margin-right: var(--su0) !important; +} + +.mx1 { + margin-left: var(--su1) !important; + margin-right: var(--su1) !important; +} + +.mx2 { + margin-left: var(--su2) !important; + margin-right: var(--su2) !important; +} + +.mx4 { + margin-left: var(--su4) !important; + margin-right: var(--su4) !important; +} + +.mx6 { + margin-left: var(--su6) !important; + margin-right: var(--su6) !important; +} + +.mx8 { + margin-left: var(--su8) !important; + margin-right: var(--su8) !important; +} + +.mx12 { + margin-left: var(--su12) !important; + margin-right: var(--su12) !important; +} + +.mx16 { + margin-left: var(--su16) !important; + margin-right: var(--su16) !important; +} + +.mx24 { + margin-left: var(--su24) !important; + margin-right: var(--su24) !important; +} + +.mx32 { + margin-left: var(--su32) !important; + margin-right: var(--su32) !important; +} + +.mx48 { + margin-left: var(--su48) !important; + margin-right: var(--su48) !important; +} + +.mx64 { + margin-left: var(--su64) !important; + margin-right: var(--su64) !important; +} + +.mx96 { + margin-left: var(--su96) !important; + margin-right: var(--su96) !important; +} + +.mx128 { + margin-left: var(--su128) !important; + margin-right: var(--su128) !important; +} + +.my0 { + margin-top: var(--su0) !important; + margin-bottom: var(--su0) !important; +} + +.my1 { + margin-top: var(--su1) !important; + margin-bottom: var(--su1) !important; +} + +.my2 { + margin-top: var(--su2) !important; + margin-bottom: var(--su2) !important; +} + +.my4 { + margin-top: var(--su4) !important; + margin-bottom: var(--su4) !important; +} + +.my6 { + margin-top: var(--su6) !important; + margin-bottom: var(--su6) !important; +} + +.my8 { + margin-top: var(--su8) !important; + margin-bottom: var(--su8) !important; +} + +.my12 { + margin-top: var(--su12) !important; + margin-bottom: var(--su12) !important; +} + +.my16 { + margin-top: var(--su16) !important; + margin-bottom: var(--su16) !important; +} + +.my24 { + margin-top: var(--su24) !important; + margin-bottom: var(--su24) !important; +} + +.my32 { + margin-top: var(--su32) !important; + margin-bottom: var(--su32) !important; +} + +.my48 { + margin-top: var(--su48) !important; + margin-bottom: var(--su48) !important; +} + +.my64 { + margin-top: var(--su64) !important; + margin-bottom: var(--su64) !important; +} + +.my96 { + margin-top: var(--su96) !important; + margin-bottom: var(--su96) !important; +} + +.my128 { + margin-top: var(--su128) !important; + margin-bottom: var(--su128) !important; +} + +.mxn1 { + margin-left: calc(var(--su1) * -1) !important; + margin-right: calc(var(--su1) * -1) !important; +} + +.mxn2 { + margin-left: calc(var(--su2) * -1) !important; + margin-right: calc(var(--su2) * -1) !important; +} + +.mxn4 { + margin-left: calc(var(--su4) * -1) !important; + margin-right: calc(var(--su4) * -1) !important; +} + +.mxn6 { + margin-left: calc(var(--su6) * -1) !important; + margin-right: calc(var(--su6) * -1) !important; +} + +.mxn8 { + margin-left: calc(var(--su8) * -1) !important; + margin-right: calc(var(--su8) * -1) !important; +} + +.mxn12 { + margin-left: calc(var(--su12) * -1) !important; + margin-right: calc(var(--su12) * -1) !important; +} + +.mxn16 { + margin-left: calc(var(--su16) * -1) !important; + margin-right: calc(var(--su16) * -1) !important; +} + +.mxn24 { + margin-left: calc(var(--su24) * -1) !important; + margin-right: calc(var(--su24) * -1) !important; +} + +.mxn32 { + margin-left: calc(var(--su32) * -1) !important; + margin-right: calc(var(--su32) * -1) !important; +} + +.mxn48 { + margin-left: calc(var(--su48) * -1) !important; + margin-right: calc(var(--su48) * -1) !important; +} + +.mxn64 { + margin-left: calc(var(--su64) * -1) !important; + margin-right: calc(var(--su64) * -1) !important; +} + +.mxn96 { + margin-left: calc(var(--su96) * -1) !important; + margin-right: calc(var(--su96) * -1) !important; +} + +.mxn128 { + margin-left: calc(var(--su128) * -1) !important; + margin-right: calc(var(--su128) * -1) !important; +} + +.myn1 { + margin-top: calc(var(--su1) * -1) !important; + margin-bottom: calc(var(--su1) * -1) !important; +} + +.myn2 { + margin-top: calc(var(--su2) * -1) !important; + margin-bottom: calc(var(--su2) * -1) !important; +} + +.myn4 { + margin-top: calc(var(--su4) * -1) !important; + margin-bottom: calc(var(--su4) * -1) !important; +} + +.myn6 { + margin-top: calc(var(--su6) * -1) !important; + margin-bottom: calc(var(--su6) * -1) !important; +} + +.myn8 { + margin-top: calc(var(--su8) * -1) !important; + margin-bottom: calc(var(--su8) * -1) !important; +} + +.myn12 { + margin-top: calc(var(--su12) * -1) !important; + margin-bottom: calc(var(--su12) * -1) !important; +} + +.myn16 { + margin-top: calc(var(--su16) * -1) !important; + margin-bottom: calc(var(--su16) * -1) !important; +} + +.myn24 { + margin-top: calc(var(--su24) * -1) !important; + margin-bottom: calc(var(--su24) * -1) !important; +} + +.myn32 { + margin-top: calc(var(--su32) * -1) !important; + margin-bottom: calc(var(--su32) * -1) !important; +} + +.myn48 { + margin-top: calc(var(--su48) * -1) !important; + margin-bottom: calc(var(--su48) * -1) !important; +} + +.myn64 { + margin-top: calc(var(--su64) * -1) !important; + margin-bottom: calc(var(--su64) * -1) !important; +} + +.myn96 { + margin-top: calc(var(--su96) * -1) !important; + margin-bottom: calc(var(--su96) * -1) !important; +} + +.myn128 { + margin-top: calc(var(--su128) * -1) !important; + margin-bottom: calc(var(--su128) * -1) !important; +} + +.mn50 { + margin-top: -50% !important; + margin-bottom: -50% !important; +} + +.mn100 { + margin-top: -100% !important; + margin-bottom: -100% !important; +} + +.p0 { + padding: var(--su0) !important; +} + +.p1 { + padding: var(--su1) !important; +} + +.p2 { + padding: var(--su2) !important; +} + +.p4 { + padding: var(--su4) !important; +} + +.p6 { + padding: var(--su6) !important; +} + +.p8 { + padding: var(--su8) !important; +} + +.p12 { + padding: var(--su12) !important; +} + +.p16 { + padding: var(--su16) !important; +} + +.p24 { + padding: var(--su24) !important; +} + +.p32 { + padding: var(--su32) !important; +} + +.p48 { + padding: var(--su48) !important; +} + +.p64 { + padding: var(--su64) !important; +} + +.p96 { + padding: var(--su96) !important; +} + +.p128 { + padding: var(--su128) !important; +} + +.pt0 { + padding-top: var(--su0) !important; +} + +.pt1 { + padding-top: var(--su1) !important; +} + +.pt2 { + padding-top: var(--su2) !important; +} + +.pt4 { + padding-top: var(--su4) !important; +} + +.pt6 { + padding-top: var(--su6) !important; +} + +.pt8 { + padding-top: var(--su8) !important; +} + +.pt12 { + padding-top: var(--su12) !important; +} + +.pt16 { + padding-top: var(--su16) !important; +} + +.pt24 { + padding-top: var(--su24) !important; +} + +.pt32 { + padding-top: var(--su32) !important; +} + +.pt48 { + padding-top: var(--su48) !important; +} + +.pt64 { + padding-top: var(--su64) !important; +} + +.pt96 { + padding-top: var(--su96) !important; +} + +.pt128 { + padding-top: var(--su128) !important; +} + +.pr0 { + padding-right: var(--su0) !important; +} + +.pr1 { + padding-right: var(--su1) !important; +} + +.pr2 { + padding-right: var(--su2) !important; +} + +.pr4 { + padding-right: var(--su4) !important; +} + +.pr6 { + padding-right: var(--su6) !important; +} + +.pr8 { + padding-right: var(--su8) !important; +} + +.pr12 { + padding-right: var(--su12) !important; +} + +.pr16 { + padding-right: var(--su16) !important; +} + +.pr24 { + padding-right: var(--su24) !important; +} + +.pr32 { + padding-right: var(--su32) !important; +} + +.pr48 { + padding-right: var(--su48) !important; +} + +.pr64 { + padding-right: var(--su64) !important; +} + +.pr96 { + padding-right: var(--su96) !important; +} + +.pr128 { + padding-right: var(--su128) !important; +} + +.pb0 { + padding-bottom: var(--su0) !important; +} + +.pb1 { + padding-bottom: var(--su1) !important; +} + +.pb2 { + padding-bottom: var(--su2) !important; +} + +.pb4 { + padding-bottom: var(--su4) !important; +} + +.pb6 { + padding-bottom: var(--su6) !important; +} + +.pb8 { + padding-bottom: var(--su8) !important; +} + +.pb12 { + padding-bottom: var(--su12) !important; +} + +.pb16 { + padding-bottom: var(--su16) !important; +} + +.pb24 { + padding-bottom: var(--su24) !important; +} + +.pb32 { + padding-bottom: var(--su32) !important; +} + +.pb48 { + padding-bottom: var(--su48) !important; +} + +.pb64 { + padding-bottom: var(--su64) !important; +} + +.pb96 { + padding-bottom: var(--su96) !important; +} + +.pb128 { + padding-bottom: var(--su128) !important; +} + +.pl0 { + padding-left: var(--su0) !important; +} + +.pl1 { + padding-left: var(--su1) !important; +} + +.pl2 { + padding-left: var(--su2) !important; +} + +.pl4 { + padding-left: var(--su4) !important; +} + +.pl6 { + padding-left: var(--su6) !important; +} + +.pl8 { + padding-left: var(--su8) !important; +} + +.pl12 { + padding-left: var(--su12) !important; +} + +.pl16 { + padding-left: var(--su16) !important; +} + +.pl24 { + padding-left: var(--su24) !important; +} + +.pl32 { + padding-left: var(--su32) !important; +} + +.pl48 { + padding-left: var(--su48) !important; +} + +.pl64 { + padding-left: var(--su64) !important; +} + +.pl96 { + padding-left: var(--su96) !important; +} + +.pl128 { + padding-left: var(--su128) !important; +} + +.px0 { + padding-left: var(--su0) !important; + padding-right: var(--su0) !important; +} + +.px1 { + padding-left: var(--su1) !important; + padding-right: var(--su1) !important; +} + +.px2 { + padding-left: var(--su2) !important; + padding-right: var(--su2) !important; +} + +.px4 { + padding-left: var(--su4) !important; + padding-right: var(--su4) !important; +} + +.px6 { + padding-left: var(--su6) !important; + padding-right: var(--su6) !important; +} + +.px8 { + padding-left: var(--su8) !important; + padding-right: var(--su8) !important; +} + +.px12 { + padding-left: var(--su12) !important; + padding-right: var(--su12) !important; +} + +.px16 { + padding-left: var(--su16) !important; + padding-right: var(--su16) !important; +} + +.px24 { + padding-left: var(--su24) !important; + padding-right: var(--su24) !important; +} + +.px32 { + padding-left: var(--su32) !important; + padding-right: var(--su32) !important; +} + +.px48 { + padding-left: var(--su48) !important; + padding-right: var(--su48) !important; +} + +.px64 { + padding-left: var(--su64) !important; + padding-right: var(--su64) !important; +} + +.px96 { + padding-left: var(--su96) !important; + padding-right: var(--su96) !important; +} + +.px128 { + padding-left: var(--su128) !important; + padding-right: var(--su128) !important; +} + +.py0 { + padding-top: var(--su0) !important; + padding-bottom: var(--su0) !important; +} + +.py1 { + padding-top: var(--su1) !important; + padding-bottom: var(--su1) !important; +} + +.py2 { + padding-top: var(--su2) !important; + padding-bottom: var(--su2) !important; +} + +.py4 { + padding-top: var(--su4) !important; + padding-bottom: var(--su4) !important; +} + +.py6 { + padding-top: var(--su6) !important; + padding-bottom: var(--su6) !important; +} + +.py8 { + padding-top: var(--su8) !important; + padding-bottom: var(--su8) !important; +} + +.py12 { + padding-top: var(--su12) !important; + padding-bottom: var(--su12) !important; +} + +.py16 { + padding-top: var(--su16) !important; + padding-bottom: var(--su16) !important; +} + +.py24 { + padding-top: var(--su24) !important; + padding-bottom: var(--su24) !important; +} + +.py32 { + padding-top: var(--su32) !important; + padding-bottom: var(--su32) !important; +} + +.py48 { + padding-top: var(--su48) !important; + padding-bottom: var(--su48) !important; +} + +.py64 { + padding-top: var(--su64) !important; + padding-bottom: var(--su64) !important; +} + +.py96 { + padding-top: var(--su96) !important; + padding-bottom: var(--su96) !important; +} + +.py128 { + padding-top: var(--su128) !important; + padding-bottom: var(--su128) !important; +} + +.t0 { + top: var(--su0) !important; +} + +.t1 { + top: var(--su1) !important; +} + +.t2 { + top: var(--su2) !important; +} + +.t4 { + top: var(--su4) !important; +} + +.t6 { + top: var(--su6) !important; +} + +.t8 { + top: var(--su8) !important; +} + +.t12 { + top: var(--su12) !important; +} + +.t16 { + top: var(--su16) !important; +} + +.t24 { + top: var(--su24) !important; +} + +.t32 { + top: var(--su32) !important; +} + +.t48 { + top: var(--su48) !important; +} + +.t64 { + top: var(--su64) !important; +} + +.t96 { + top: var(--su96) !important; +} + +.t128 { + top: var(--su128) !important; +} + +.tn1 { + top: calc(var(--su1) * -1) !important; +} + +.tn2 { + top: calc(var(--su2) * -1) !important; +} + +.tn4 { + top: calc(var(--su4) * -1) !important; +} + +.tn6 { + top: calc(var(--su6) * -1) !important; +} + +.tn8 { + top: calc(var(--su8) * -1) !important; +} + +.tn12 { + top: calc(var(--su12) * -1) !important; +} + +.tn16 { + top: calc(var(--su16) * -1) !important; +} + +.tn24 { + top: calc(var(--su24) * -1) !important; +} + +.tn32 { + top: calc(var(--su32) * -1) !important; +} + +.tn48 { + top: calc(var(--su48) * -1) !important; +} + +.tn64 { + top: calc(var(--su64) * -1) !important; +} + +.tn96 { + top: calc(var(--su96) * -1) !important; +} + +.tn128 { + top: calc(var(--su128) * -1) !important; +} + +.tn50 { + top: -50% !important; +} + +.tn100 { + top: -100% !important; +} + +.t50 { + top: 50% !important; +} + +.t100 { + top: 100% !important; +} + +.tn50 { + top: -50% !important; +} + +.tn100 { + top: -100% !important; +} + +.r0 { + right: var(--su0) !important; +} + +.r1 { + right: var(--su1) !important; +} + +.r2 { + right: var(--su2) !important; +} + +.r4 { + right: var(--su4) !important; +} + +.r6 { + right: var(--su6) !important; +} + +.r8 { + right: var(--su8) !important; +} + +.r12 { + right: var(--su12) !important; +} + +.r16 { + right: var(--su16) !important; +} + +.r24 { + right: var(--su24) !important; +} + +.r32 { + right: var(--su32) !important; +} + +.r48 { + right: var(--su48) !important; +} + +.r64 { + right: var(--su64) !important; +} + +.r96 { + right: var(--su96) !important; +} + +.r128 { + right: var(--su128) !important; +} + +.rn1 { + right: calc(var(--su1) * -1) !important; +} + +.rn2 { + right: calc(var(--su2) * -1) !important; +} + +.rn4 { + right: calc(var(--su4) * -1) !important; +} + +.rn6 { + right: calc(var(--su6) * -1) !important; +} + +.rn8 { + right: calc(var(--su8) * -1) !important; +} + +.rn12 { + right: calc(var(--su12) * -1) !important; +} + +.rn16 { + right: calc(var(--su16) * -1) !important; +} + +.rn24 { + right: calc(var(--su24) * -1) !important; +} + +.rn32 { + right: calc(var(--su32) * -1) !important; +} + +.rn48 { + right: calc(var(--su48) * -1) !important; +} + +.rn64 { + right: calc(var(--su64) * -1) !important; +} + +.rn96 { + right: calc(var(--su96) * -1) !important; +} + +.rn128 { + right: calc(var(--su128) * -1) !important; +} + +.rn50 { + right: -50% !important; +} + +.rn100 { + right: -100% !important; +} + +.r50 { + right: 50% !important; +} + +.r100 { + right: 100% !important; +} + +.rn50 { + right: -50% !important; +} + +.rn100 { + right: -100% !important; +} + +.b0 { + bottom: var(--su0) !important; +} + +.b1 { + bottom: var(--su1) !important; +} + +.b2 { + bottom: var(--su2) !important; +} + +.b4 { + bottom: var(--su4) !important; +} + +.b6 { + bottom: var(--su6) !important; +} + +.b8 { + bottom: var(--su8) !important; +} + +.b12 { + bottom: var(--su12) !important; +} + +.b16 { + bottom: var(--su16) !important; +} + +.b24 { + bottom: var(--su24) !important; +} + +.b32 { + bottom: var(--su32) !important; +} + +.b48 { + bottom: var(--su48) !important; +} + +.b64 { + bottom: var(--su64) !important; +} + +.b96 { + bottom: var(--su96) !important; +} + +.b128 { + bottom: var(--su128) !important; +} + +.bn1 { + bottom: calc(var(--su1) * -1) !important; +} + +.bn2 { + bottom: calc(var(--su2) * -1) !important; +} + +.bn4 { + bottom: calc(var(--su4) * -1) !important; +} + +.bn6 { + bottom: calc(var(--su6) * -1) !important; +} + +.bn8 { + bottom: calc(var(--su8) * -1) !important; +} + +.bn12 { + bottom: calc(var(--su12) * -1) !important; +} + +.bn16 { + bottom: calc(var(--su16) * -1) !important; +} + +.bn24 { + bottom: calc(var(--su24) * -1) !important; +} + +.bn32 { + bottom: calc(var(--su32) * -1) !important; +} + +.bn48 { + bottom: calc(var(--su48) * -1) !important; +} + +.bn64 { + bottom: calc(var(--su64) * -1) !important; +} + +.bn96 { + bottom: calc(var(--su96) * -1) !important; +} + +.bn128 { + bottom: calc(var(--su128) * -1) !important; +} + +.bn50 { + bottom: -50% !important; +} + +.bn100 { + bottom: -100% !important; +} + +.b50 { + bottom: 50% !important; +} + +.b100 { + bottom: 100% !important; +} + +.bn50 { + bottom: -50% !important; +} + +.bn100 { + bottom: -100% !important; +} + +.l0 { + left: var(--su0) !important; +} + +.l1 { + left: var(--su1) !important; +} + +.l2 { + left: var(--su2) !important; +} + +.l4 { + left: var(--su4) !important; +} + +.l6 { + left: var(--su6) !important; +} + +.l8 { + left: var(--su8) !important; +} + +.l12 { + left: var(--su12) !important; +} + +.l16 { + left: var(--su16) !important; +} + +.l24 { + left: var(--su24) !important; +} + +.l32 { + left: var(--su32) !important; +} + +.l48 { + left: var(--su48) !important; +} + +.l64 { + left: var(--su64) !important; +} + +.l96 { + left: var(--su96) !important; +} + +.l128 { + left: var(--su128) !important; +} + +.ln1 { + left: calc(var(--su1) * -1) !important; +} + +.ln2 { + left: calc(var(--su2) * -1) !important; +} + +.ln4 { + left: calc(var(--su4) * -1) !important; +} + +.ln6 { + left: calc(var(--su6) * -1) !important; +} + +.ln8 { + left: calc(var(--su8) * -1) !important; +} + +.ln12 { + left: calc(var(--su12) * -1) !important; +} + +.ln16 { + left: calc(var(--su16) * -1) !important; +} + +.ln24 { + left: calc(var(--su24) * -1) !important; +} + +.ln32 { + left: calc(var(--su32) * -1) !important; +} + +.ln48 { + left: calc(var(--su48) * -1) !important; +} + +.ln64 { + left: calc(var(--su64) * -1) !important; +} + +.ln96 { + left: calc(var(--su96) * -1) !important; +} + +.ln128 { + left: calc(var(--su128) * -1) !important; +} + +.ln50 { + left: -50% !important; +} + +.ln100 { + left: -100% !important; +} + +.l50 { + left: 50% !important; +} + +.l100 { + left: 100% !important; +} + +.ln50 { + left: -50% !important; +} + +.ln100 { + left: -100% !important; +} + +.i0 { + inset: var(--su0) !important; +} + +.i1 { + inset: var(--su1) !important; +} + +.i2 { + inset: var(--su2) !important; +} + +.i4 { + inset: var(--su4) !important; +} + +.i6 { + inset: var(--su6) !important; +} + +.i8 { + inset: var(--su8) !important; +} + +.i12 { + inset: var(--su12) !important; +} + +.i16 { + inset: var(--su16) !important; +} + +.i24 { + inset: var(--su24) !important; +} + +.i32 { + inset: var(--su32) !important; +} + +.i48 { + inset: var(--su48) !important; +} + +.i64 { + inset: var(--su64) !important; +} + +.i96 { + inset: var(--su96) !important; +} + +.i128 { + inset: var(--su128) !important; +} +" +`; diff --git a/lib/atomic/spacing-mixins.less b/lib/atomic/spacing-mixins.less new file mode 100644 index 0000000000..f013ca814f --- /dev/null +++ b/lib/atomic/spacing-mixins.less @@ -0,0 +1,97 @@ +.generate-responsive-spacing(@prefix, @property, @includeNegative: false, @type: px) { + & when (@type = px) { + #stacks-internals #build-classes( + responsive, + @prefix, + { .template(@value) { @{property}: var(~"--su@{value}") !important; } }, + 0 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + + & when (@includeNegative = true) { + #stacks-internals #build-classes( + responsive, + ~"@{prefix}n", + { .template(@value) { @{property}: calc(var(~"--su@{value}") * -1) !important; } }, + 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + } + } + & when (@type = percent) { + #stacks-internals #build-classes( + responsive, + @prefix, + { .template(@value) { @{property}: @value !important; } }, + 50% 100% + ); + } + & when (@includeNegative = true) { + #stacks-internals #build-classes( + responsive, + ~"@{prefix}n", + { .template(@value) { @{property}: -@value !important; } }, + 50% 100% + ); + } +} + +.generate-responsive-xy-spacing(@prefix, @property, @includeNegative: false, @type: px) { + & when (@type = px) { + #stacks-internals #build-classes( + ~"@{prefix}x", + { .template(@value) { + @{property}-left: var(~"--su@{value}") !important; + @{property}-right: var(~"--su@{value}") !important; + } }, + 0 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + #stacks-internals #build-classes( + ~"@{prefix}y", + { .template(@value) { + @{property}-top: var(~"--su@{value}") !important; + @{property}-bottom: var(~"--su@{value}") !important; + } }, + 0 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + + & when (@includeNegative = true) { + #stacks-internals #build-classes( + ~"@{prefix}xn", + { .template(@value) { + @{property}-left: calc(var(~"--su@{value}") * -1) !important; + @{property}-right: calc(var(~"--su@{value}") * -1) !important; + } }, + 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + #stacks-internals #build-classes( + ~"@{prefix}yn", + { .template(@value) { + @{property}-top: calc(var(~"--su@{value}") * -1) !important; + @{property}-bottom: calc(var(~"--su@{value}") * -1) !important; } }, + 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + } + } + + & when (@type = percent) { + #stacks-internals #build-classes( + responsive, + @prefix, + { .template(@value) { + @{property}-top: @value !important; + @{property}-bottom: @value !important; + } }, + 50% 100% + ); + } + & when (@includeNegative = true) { + #stacks-internals #build-classes( + responsive, + ~"@{prefix}n", + { .template(@value) { + @{property}-top: -@value !important; + @{property}-bottom: -@value !important; + } }, + 50% 100% + ); + } +} diff --git a/lib/atomic/spacing.less b/lib/atomic/spacing.less index 2623b6d033..ccd4d737c3 100644 --- a/lib/atomic/spacing.less +++ b/lib/atomic/spacing.less @@ -1,21 +1,10 @@ -// -// STACK OVERFLOW -// SPACING -// -// This CSS comes from Stacks, our CSS & Pattern library for rapidly building -// Stack Overflow. For documentation of all these classes and how to contribute, -// visit https://stackoverflow.design/ -// -// • SPACING UNIT CSS VARIABLES -// • MARGIN -// • PADDING -// • POSITIONING -// -// ============================================================================ -// $ SPACING UNITS CSS VARIABLES -// ---------------------------------------------------------------------------- +@import (reference) "../base/internal.less"; +@import (reference) "./spacing-mixins.less"; + +// SPACING UNITS CSS CUSTOM PROPERTIES body { --su-base: 1; + --su-static0: 0px; --su-static1: 1px; --su-static2: 2px; --su-static4: 4px; @@ -30,6 +19,7 @@ body { --su-static96: 96px; --su-static128: 128px; + --su0: var(--su-static0); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px). --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base))); --su2: calc(var(--su-static2) * var(--su-base)); @@ -46,297 +36,61 @@ body { --su128: calc(var(--su-static128) * var(--su-base)); } -// ============================================================================ -// $ MARGIN -// ---------------------------------------------------------------------------- -// $$ 0 margin -.m0 { margin: 0 !important; } -.mt0 { margin-top: 0 !important; } -.mr0 { margin-right: 0 !important; } -.mb0 { margin-bottom: 0 !important; } -.ml0 { margin-left: 0 !important; } -.mx0 { margin-left: 0 !important; margin-right: 0 !important; } -.my0 { margin-top: 0 !important; margin-bottom: 0 !important; } - -// $$ auto margin +// MARGIN +// Margin .m-auto { margin: auto !important; } +.generate-responsive-spacing('.m', margin, true); +.generate-responsive-spacing('.m', margin, true, percent); + +// Margin top .mt-auto { margin-top: auto !important; } +.generate-responsive-spacing('.mt', margin-top, true); +.generate-responsive-spacing('.mt', margin-top, true, percent); + +// Margin right .mr-auto { margin-right: auto !important; } +.generate-responsive-spacing('.mr', margin-right, true); +.generate-responsive-spacing('.mr', margin-right, true, percent); + +// Margin bottom .mb-auto { margin-bottom: auto !important; } +.generate-responsive-spacing('.mb', margin-bottom, true); +.generate-responsive-spacing('.mb', margin-bottom, true, percent); + +// Margin left .ml-auto { margin-left: auto !important; } +.generate-responsive-spacing('.ml', margin-left, true); +.generate-responsive-spacing('.ml', margin-left, true, percent); + +// Margin x-axis, y-axis .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } - -// $$ Margin -#stacks-internals #build-classes( - responsive, - '.m', - { .template(@value) { margin: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.m0', { margin: 0 !important; }); - -// $$ Margin negative -#stacks-internals #build-classes( - responsive, - '.mn', - { .template(@value) { margin: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Top margin -#stacks-internals #build-classes( - responsive, - '.mt', - { .template(@value) { margin-top: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.mt0', { margin-top: 0 !important; }); - -// $$ Top margin negative -#stacks-internals #build-classes( - responsive, - '.mtn', - { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Right margin -#stacks-internals #build-classes( - responsive, - '.mr', - { .template(@value) { margin-right: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.mr0', { margin-right: 0 !important; }); - -// $$ Right margin negative -#stacks-internals #build-classes( - responsive, - '.mrn', - { .template(@value) { margin-right: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Bottom margin -#stacks-internals #build-classes( - responsive, - '.mb', - { .template(@value) { margin-bottom: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.mb0', { margin-bottom: 0 !important; }); - -// $$ Bottom margin negative -#stacks-internals #build-classes( - responsive, - '.mbn', - { .template(@value) { margin-bottom: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Left margin -#stacks-internals #build-classes( - responsive, - '.ml', - { .template(@value) { margin-left: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.ml0', { margin-left: 0 !important; }); - -// $$ Left margin negative -#stacks-internals #build-classes( - responsive, - '.mln', - { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #build-classes( - '.mx', { .template(@value) { margin-left: var(~"--su@{value}") !important; margin-right: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #build-classes( - '.mxn', { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; margin-right: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #build-classes( - '.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #build-classes( - '.myn', { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; margin-bottom: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// ============================================================================ -// $ PADDING -// ---------------------------------------------------------------------------- - -// $$ 0 padding -.p0 { padding: 0 !important; } -.pt0 { padding-top: 0 !important; } -.pr0 { padding-right: 0 !important; } -.pb0 { padding-bottom: 0 !important; } -.pl0 { padding-left: 0 !important; } -.px0 { padding-left: 0 !important; padding-right: 0 !important; } -.py0 { padding-top: 0 !important; padding-bottom: 0 !important; } - -#stacks-internals #build-classes( - responsive, - '.p', { .template(@value) { padding: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.p0', { padding: 0 !important; }); - -// $$ Top Padding -#stacks-internals #build-classes( - responsive, - '.pt', { .template(@value) { padding-top: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.pt0', { padding-top: 0 !important; }); - -// $$ Right Padding -#stacks-internals #build-classes( - responsive, - '.pr', { .template(@value) { padding-right: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Bottom Padding -#stacks-internals #build-classes( - responsive, - '.pb', { .template(@value) { padding-bottom: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.pr0', { padding-right: 0 !important; }); - -// $$ Left Padding -#stacks-internals #build-classes( - responsive, - '.pl', { .template(@value) { padding-left: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -#stacks-internals #responsify('.pl0', { padding-left: 0 !important; }); - -// $$ X-Axis Padding -#stacks-internals #build-classes( - '.px', { .template(@value) { padding-left: var(~"--su@{value}") !important; padding-right: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Y-Axis Padding -#stacks-internals #build-classes( - '.py', { .template(@value) { padding-top: var(~"--su@{value}") !important; padding-bottom: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// ============================================================================ -// $ POSITIONING -// ---------------------------------------------------------------------------- - -// $$ Top -#stacks-internals #build-classes( - responsive, - '.t', { .template(@value) { top: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Top 0, percent -#stacks-internals #build-classes( - '.t', { .template(@value) { top: @value !important; } }, - 0 50% -50% 100% -100% -); - -// $$ Top negative -#stacks-internals #build-classes( - responsive, - '.tn', { .template(@value) { top: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Right -#stacks-internals #build-classes( - responsive, - '.r', { .template(@value) { right: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Right 0, percent -#stacks-internals #build-classes( - '.r', { .template(@value) { right: @value !important; } }, - 0 50% -50% 100% -100% -); - -// $$ Right negative -#stacks-internals #build-classes( - responsive, - '.rn', { .template(@value) { right: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Bottom -#stacks-internals #build-classes( - responsive, - '.b', { .template(@value) { bottom: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Bottom 0, percent -#stacks-internals #build-classes( - '.b', { .template(@value) { bottom: @value !important; } }, - 0 50% -50% 100% -100% -); - -// $$ Bottom negative -#stacks-internals #build-classes( - responsive, - '.bn', { .template(@value) { bottom: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Left -#stacks-internals #build-classes( - responsive, - '.l', { .template(@value) { left: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Left 0, percent -#stacks-internals #build-classes( - '.l', { .template(@value) { left: @value !important; } }, - 0 50% -50% 100% -100% -); - -// $$ Left negative -#stacks-internals #build-classes( - responsive, - '.ln', { .template(@value) { left: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Inset -#stacks-internals #build-classes( - responsive, - '.i', { .template(@value) { inset: var(~"--su@{value}") !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 -); - -// $$ Inset 0 -#stacks-internals #build-classes( - '.i', { .template(@value) { inset: @value !important; } }, - 0 -); +.generate-responsive-xy-spacing('.m', margin, true); + +// PADDING +.generate-responsive-spacing('.p', padding); +.generate-responsive-spacing('.pt', padding-top); +.generate-responsive-spacing('.pr', padding-right); +.generate-responsive-spacing('.pb', padding-bottom); +.generate-responsive-spacing('.pl', padding-left); +.generate-responsive-xy-spacing('.p', padding); + +// POSITIONING +// Inset +.generate-responsive-spacing('.i', inset); + +// Top +.generate-responsive-spacing('.t', top, true); +.generate-responsive-spacing('.t', top, true, percent); + +// Right +.generate-responsive-spacing('.r', right, true); +.generate-responsive-spacing('.r', right, true, percent); + +// Bottom +.generate-responsive-spacing('.b', bottom, true); +.generate-responsive-spacing('.b', bottom, true, percent); + +// Left +.generate-responsive-spacing('.l', left, true); +.generate-responsive-spacing('.l', left, true, percent); diff --git a/lib/atomic/spacing.less.test.ts b/lib/atomic/spacing.less.test.ts new file mode 100644 index 0000000000..f89473e7ec --- /dev/null +++ b/lib/atomic/spacing.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: misc", () => { + it("should output all atomic css classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/spacing.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); From 099e3d6f54f247309229de31573a4bc999a6b7fa Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 16:17:51 -0500 Subject: [PATCH 2/9] docs(spacing): separate position and spacing; refactor --- docs/_data/position.json | 89 ++++++ docs/_data/spacing.json | 550 +++++++------------------------- docs/product/base/position.html | 6 +- docs/product/base/spacing.html | 143 ++++----- 4 files changed, 264 insertions(+), 524 deletions(-) create mode 100755 docs/_data/position.json diff --git a/docs/_data/position.json b/docs/_data/position.json new file mode 100755 index 0000000000..83437f92be --- /dev/null +++ b/docs/_data/position.json @@ -0,0 +1,89 @@ +{ + "position": [ + { + "prefix": "t", + "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "r", + "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "l", + "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "b", + "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "i", + "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", + "responsive": true + } + ], + "negative-position": [ + { + "prefix": "tn", + "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "rn", + "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "ln", + "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + }, + { + "prefix": "bn", + "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", + "responsive": true + } + ], + "position-definitions": [ + { + "term": "t", + "define": "top" + }, + { + "term": "r", + "define": "right" + }, + { + "term": "b", + "define": "bottom" + }, + { + "term": "l", + "define": "left" + }, + { + "term": "i", + "define": "inset" + }, + { + "term": "tn", + "define": "negative top" + }, + { + "term": "rn", + "define": "negative right" + }, + { + "term": "bn", + "define": "negative bottom" + }, + { + "term": "ln", + "define": "negative left" + } + ] +} \ No newline at end of file diff --git a/docs/_data/spacing.json b/docs/_data/spacing.json index 13d35f595c..d1438bd8bc 100755 --- a/docs/_data/spacing.json +++ b/docs/_data/spacing.json @@ -1,446 +1,110 @@ { - "margin": [ - { - "prefix": "m", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "mt", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "mr", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "ml", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "mb", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "mx", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": false - }, - { - "prefix": "my", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": false - } - ], - "negative-margin": [ - { - "prefix": "mtn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - }, - { - "prefix": "mrn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - }, - { - "prefix": "mln", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - }, - { - "prefix": "mbn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - }, - { - "prefix": "mxn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - }, - { - "prefix": "myn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - } - ], - "padding": [ - { - "prefix": "p", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "pt", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "pr", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "pl", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "pb", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - }, - { - "prefix": "px", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": false - }, - { - "prefix": "py", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": false - } - ], - "position": [ - { - "prefix": "t", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "r", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "l", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "b", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "i", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128" - } - ], - "negative-position": [ - { - "prefix": "tn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "rn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "ln", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - }, - { - "prefix": "bn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100" - } - ], - "margin-definitions": [ - { - "term": "m", - "define": "margin", - "responsive": true - }, - { - "term": "mt", - "define": "margin-top", - "responsive": true - }, - { - "term": "mr", - "define": "margin-right", - "responsive": true - }, - { - "term": "mb", - "define": "margin-bottom", - "responsive": true - }, - { - "term": "ml", - "define": "margin-left", - "responsive": true - }, - { - "term": "mx", - "define": "margin x-axis (left, right)" - }, - { - "term": "my", - "define": "margin y-axis (top, bottom)" - }, - { - "term": "mxn", - "define": "negative margin x-axis" - }, - { - "term": "mtn", - "define": "negative margin-top" - }, - { - "term": "mrn", - "define": "negative margin-right" - }, - { - "term": "mbn", - "define": "negative margin-bottom" - }, - { - "term": "mln", - "define": "negative margin-left" - }, - { - "term": 0, - "define": "0;" - }, - { - "term": 1, - "define": "1px;" - }, - { - "term": 2, - "define": "2px;" - }, - { - "term": 4, - "define": "4px;" - }, - { - "term": 6, - "define": "6px;" - }, - { - "term": 8, - "define": "8px;" - }, - { - "term": 12, - "define": "12px;" - }, - { - "term": 16, - "define": "16px;" - }, - { - "term": 24, - "define": "24px;" - }, - { - "term": 32, - "define": "32px;" - }, - { - "term": 48, - "define": "48px;" - }, - { - "term": 64, - "define": "64px;" - }, - { - "term": 96, - "define": "96px;" - }, - { - "term": 128, - "define": "128px;" - } - ], - "padding-definitions": [ - { - "term": "p", - "define": "padding", - "responsive": true - }, - { - "term": "pt", - "define": "padding-top", - "responsive": true - }, - { - "term": "pr", - "define": "padding-right", - "responsive": true - }, - { - "term": "pb", - "define": "padding-bottom", - "responsive": true - }, - { - "term": "pl", - "define": "padding-left", - "responsive": true - }, - { - "term": "px", - "define": "padding x-axis (left, right)" - }, - { - "term": "py", - "define": "padding y-axis (top, bottom)" - }, - { - "term": 0, - "define": "padding: 0;" - }, - { - "term": 1, - "define": "padding: 1;" - }, - { - "term": 2, - "define": "padding: 2px;" - }, - { - "term": 4, - "define": "padding: 4px;" - }, - { - "term": 6, - "define": "padding: 6px;" - }, - { - "term": 8, - "define": "padding: 8px;" - }, - { - "term": 12, - "define": "padding: 12px;" - }, - { - "term": 16, - "define": "padding: 16px;" - }, - { - "term": 24, - "define": "padding: 24px;" - }, - { - "term": 32, - "define": "padding: 32px;" - }, - { - "term": 48, - "define": "padding: 48px;" - }, - { - "term": 64, - "define": "padding: 64px;" - }, - { - "term": 96, - "define": "padding: 96px;" - }, - { - "term": 128, - "define": "padding: 128px;" - } - ], - "position-definitions": [ - { - "term": "t", - "define": "top" - }, - { - "term": "r", - "define": "right" - }, - { - "term": "b", - "define": "bottom" - }, - { - "term": "l", - "define": "left" - }, - { - "term": "i", - "define": "inset" - }, - { - "term": "tn", - "define": "negative top" - }, - { - "term": "rn", - "define": "negative right" - }, - { - "term": "bn", - "define": "negative bottom" - }, - { - "term": "ln", - "define": "negative left" - }, - { - "term": 0, - "define": "0;" - }, - { - "term": 1, - "define": "1px;" - }, - { - "term": 2, - "define": "2px;" - }, - { - "term": 4, - "define": "4px;" - }, - { - "term": 6, - "define": "6px;" - }, - { - "term": 8, - "define": "8px;" - }, - { - "term": 12, - "define": "12px;" - }, - { - "term": 16, - "define": "16px;" - }, - { - "term": 24, - "define": "24px;" - }, - { - "term": 32, - "define": "32px;" - }, - { - "term": 48, - "define": "48px;" - }, - { - "term": 64, - "define": "64px;" - }, - { - "term": 96, - "define": "96px;" - }, - { - "term": 128, - "define": "128px;" - }, - { - "term": 50, - "define": "50%;" - }, - { - "term": 100, - "define": "100%;" + "margin": { + "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", + "values-negative": "1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", + "properties": "m, mt, mr, mb, ml, mx, my", + "definitions": [ + { + "term": "m", + "define": "margin", + "responsive": true + }, + { + "term": "mt", + "define": "margin-top", + "responsive": true + }, + { + "term": "mr", + "define": "margin-right", + "responsive": true + }, + { + "term": "mb", + "define": "margin-bottom", + "responsive": true + }, + { + "term": "ml", + "define": "margin-left", + "responsive": true + }, + { + "term": "mx", + "define": "margin x-axis (left, right)", + "responsive": true + }, + { + "term": "my", + "define": "margin y-axis (top, bottom)", + "responsive": true + }, + { + "term": "mxn", + "define": "negative margin x-axis", + "responsive": true + }, + { + "term": "mtn", + "define": "negative margin-top", + "responsive": true + }, + { + "term": "mrn", + "define": "negative margin-right", + "responsive": true + }, + { + "term": "mbn", + "define": "negative margin-bottom", + "responsive": true + }, + { + "term": "mln", + "define": "negative margin-left", + "responsive": true + } + ] + }, + "padding": { + "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", + "properties": "p, pt, pr, pb, pl, px, py", + "definitions": [ + { + "term": "p", + "define": "padding", + "responsive": true + }, + { + "term": "pt", + "define": "padding-top", + "responsive": true + }, + { + "term": "pr", + "define": "padding-right", + "responsive": true + }, + { + "term": "pb", + "define": "padding-bottom", + "responsive": true + }, + { + "term": "pl", + "define": "padding-left", + "responsive": true + }, + { + "term": "px", + "define": "padding x-axis (left, right)", + "responsive": true + }, + { + "term": "py", + "define": "padding y-axis (top, bottom)", + "responsive": true + } + ] } - ] } \ No newline at end of file diff --git a/docs/product/base/position.html b/docs/product/base/position.html index 5fb596050d..a167166947 100644 --- a/docs/product/base/position.html +++ b/docs/product/base/position.html @@ -67,7 +67,7 @@ - {% for space in spacing.position-definitions %} + {% for space in position.position-definitions %} {{ space.term }} {{ space.define }} @@ -137,7 +137,7 @@ - {% for class in spacing.position %} + {% for class in position.position %} {% assign prefix-value = class.values | split: ", " %} {{ class.prefix }} @@ -174,7 +174,7 @@ - {% for class in spacing.negative-position %} + {% for class in position.negative-position %} {% assign prefix-value = class.values | split: ", " %} {{ class.prefix }} diff --git a/docs/product/base/spacing.html b/docs/product/base/spacing.html index d518f8728c..0e5c19bfbd 100644 --- a/docs/product/base/spacing.html +++ b/docs/product/base/spacing.html @@ -19,7 +19,7 @@ - {% for space in spacing.margin-definitions %} + {% for space in spacing.margin.definitions %} {{ space.term }} {{ space.define }} @@ -34,8 +34,11 @@ - {% header "h3", "Margin classes" %} -
+{% header "h3", "Margin classes" %} +{% assign margin-properties = spacing.margin.properties | split: ", " %} +{% assign margin-values = spacing.margin.values | split: ", " %} +{% assign margin-values-negative = spacing.margin.values-negative | split: ", " %} +
{% highlight html %}
… @@ -52,36 +55,26 @@ - 0 - 1px - 2px - 4px - 6px - 8px - 12px - 16px - 24px - 32px - 48px - 64px - 96px - 128px - Responsive? + {% for value in margin-values %} + {{ value }} + {% endfor %} - {% for class in spacing.margin %} - {% assign prefix-value = class.values | split: ", " %} + {% for className in margin-properties %} - {{ class.prefix }} - {% for values in prefix-value %} - .{{ class.prefix }}{{ values }} - {% endfor %} - - {% if class.responsive %} - {% icon "Checkmark", "fc-green-400" %} + {{ className }} + {% for value in margin-values %} + {% if className == "mx" or className == "my" %} + {% if value == "0" or value == "50%" or value == "100%" %} + - + {% else %} + .{{ className }}{{ value | replace: "px", "" }} + {% endif %} + {% else %} + .{{ className }}{{ value | replace: "px", "" | replace: "%", "" }} {% endif %} - + {% endfor %} {% endfor %} @@ -94,30 +87,31 @@ - -1px - -2px - -4px - -6px - -8px - -12px - -16px - -24px - -32px - -48px - -64px - -96px - -128px + {% for value in margin-values %} + {% if value != "0" %} + -{{ value }} + {% endif %} + {% endfor %} - {% for class in spacing.negative-margin %} - {% assign prefix-value = class.values | split: ", " %} - - {{ class.prefix }} - {% for values in prefix-value %} - .{{ class.prefix }}{{ values }} - {% endfor %} - + {% for className in margin-properties %} + + {{ className }}n + {% for value in margin-values %} + {% if value != "0" %} + {% if className == "mx" or className == "my" %} + {% if value == "0" or value == "50%" or value == "100%" %} + - + {% else %} + .{{ className }}n{{ value | replace: "px", "" }} + {% endif %} + {% else %} + .{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }} + {% endif %} + {% endif %} + {% endfor %} + {% endfor %} @@ -192,7 +186,7 @@ - {% for space in spacing.padding-definitions %} + {% for space in spacing.padding.definitions %} {{ space.term }} {{ space.define }} @@ -207,8 +201,11 @@
- {% header "h3", "Padding classes" %} -
+{% header "h3", "Padding classes" %} +{% assign padding-properties = spacing.padding.properties | split: ", " %} +{% assign padding-values = spacing.padding.values | split: ", " %} + +
{% highlight html %}
… @@ -224,37 +221,27 @@ - - - - - - - - - - - - - - - - + + {% for value in padding-values %} + + {% endfor %} - {% for class in spacing.padding %} - {% assign prefix-value = class.values | split: ", " %} + {% for className in padding-properties %} - - {% for values in prefix-value %} - - {% endfor %} - + {% for value in padding-values %} + {% if className == "px" or className == "py" %} + {% if value == "0" or value == "50%" or value == "100%" %} + + {% else %} + + {% endif %} + {% else %} + {% endif %} - + {% endfor %} {% endfor %} From 1cea779bb93f21dcc99eec593d3cb24885fedb29 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 18:36:21 -0500 Subject: [PATCH 3/9] Positioning cleanup --- docs/_data/position.json | 53 ++--------------------- docs/_data/spacing.json | 1 - docs/product/base/position.html | 75 ++++++++++++++------------------- docs/product/base/spacing.html | 24 +++++------ 4 files changed, 44 insertions(+), 109 deletions(-) diff --git a/docs/_data/position.json b/docs/_data/position.json index 83437f92be..c63c7c9a68 100755 --- a/docs/_data/position.json +++ b/docs/_data/position.json @@ -1,54 +1,7 @@ { - "position": [ - { - "prefix": "t", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "r", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "l", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "b", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "i", - "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128", - "responsive": true - } - ], - "negative-position": [ - { - "prefix": "tn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "rn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "ln", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - }, - { - "prefix": "bn", - "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100", - "responsive": true - } - ], - "position-definitions": [ + "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", + "properties": "t, r, b, l, i", + "definitions": [ { "term": "t", "define": "top" diff --git a/docs/_data/spacing.json b/docs/_data/spacing.json index d1438bd8bc..3bdda5c72a 100755 --- a/docs/_data/spacing.json +++ b/docs/_data/spacing.json @@ -1,7 +1,6 @@ { "margin": { "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", - "values-negative": "1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", "properties": "m, mt, mr, mb, ml, mx, my", "definitions": [ { diff --git a/docs/product/base/position.html b/docs/product/base/position.html index a167166947..37dfdc9e75 100644 --- a/docs/product/base/position.html +++ b/docs/product/base/position.html @@ -67,7 +67,7 @@ - {% for space in position.position-definitions %} + {% for space in position.definitions %} @@ -77,8 +77,11 @@
Prefix01px2px4px6px8px12px16px24px32px48px64px96px128pxResponsive?{{ value }}
{{ class.prefix }}.{{ class.prefix }}{{ values }} - {% if class.responsive %} - {% icon "Checkmark", "fc-green-400" %} + {{ className }}-.{{ className }}{{ value | replace: "px", "" }}.{{ className }}{{ value | replace: "px", "" | replace: "%", "" }}
{{ space.term }} {{ space.define }}
- {% header "h3", "Coordinate examples" %} -
+{% assign position-properties = position.properties | split: ", " %} +{% assign position-values = position.values | split: ", " %} + +{% header "h3", "Coordinate examples" %} +
{% highlight html %}
…
…
@@ -118,31 +121,25 @@ Prefix - 0 - 1px - 2px - 4px - 6px - 8px - 12px - 16px - 24px - 32px - 48px - 64px - 96px - 128px - 50% - 100% + {% for value in position-values %} + {{ value }} + {% endfor %} - {% for class in position.position %} - {% assign prefix-value = class.values | split: ", " %} + {% for className in position-properties %} - {{ class.prefix }} - {% for values in prefix-value %} - .{{ class.prefix }}{{ values }} + {{ className }} + {% for value in position-values %} + {% if className == "i" %} + {% if value == "50%" or value == "100%" %} + - + {% else %} + .{{ className }}{{ value | replace: "px", "" }} + {% endif %} + {% else %} + .{{ className }}{{ value | replace: "px", "" | replace: "%", "" }} + {% endif %} {% endfor %} {% endfor %} @@ -150,36 +147,26 @@
+ {% assign position-properties-negative = position.properties | replace: ", i", "" | split: ", " %} + {% assign position-values-negative = position.values | replace: "0, ", "" | split: ", " %} + {% header "h2", "Negative coordinates" %}
- - - - - - - - - - - - - - - + {% for value in position-values-negative %} + + {% endfor %} - {% for class in position.negative-position %} - {% assign prefix-value = class.values | split: ", " %} + {% for className in position-properties-negative %} - - {% for values in prefix-value %} - + + {% for value in position-values-negative %} + {% endfor %} {% endfor %} diff --git a/docs/product/base/spacing.html b/docs/product/base/spacing.html index 0e5c19bfbd..7fdb145dd2 100644 --- a/docs/product/base/spacing.html +++ b/docs/product/base/spacing.html @@ -37,7 +37,7 @@ {% header "h3", "Margin classes" %} {% assign margin-properties = spacing.margin.properties | split: ", " %} {% assign margin-values = spacing.margin.values | split: ", " %} -{% assign margin-values-negative = spacing.margin.values-negative | split: ", " %} +{% assign margin-values-negative = spacing.margin.values | replace: "0, ", "" | split: ", " %}
{% highlight html %}
@@ -87,10 +87,8 @@
- {% for value in margin-values %} - {% if value != "0" %} - - {% endif %} + {% for value in margin-values-negative %} + {% endfor %} @@ -98,17 +96,15 @@ {% for className in margin-properties %} - {% for value in margin-values %} - {% if value != "0" %} - {% if className == "mx" or className == "my" %} - {% if value == "0" or value == "50%" or value == "100%" %} - - {% else %} - - {% endif %} + {% for value in margin-values-negative %} + {% if className == "mx" or className == "my" %} + {% if value == "0" or value == "50%" or value == "100%" %} + {% else %} - + {% endif %} + {% else %} + {% endif %} {% endfor %} From 1a8c4b7ca02d2e3255f28e3f44826ca155617efe Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 18:40:29 -0500 Subject: [PATCH 4/9] update snapshot --- .../__snapshots__/spacing.less.test.ts.snap | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/lib/atomic/__snapshots__/spacing.less.test.ts.snap index ba377b4867..c0a9bf2d56 100644 --- a/lib/atomic/__snapshots__/spacing.less.test.ts.snap +++ b/lib/atomic/__snapshots__/spacing.less.test.ts.snap @@ -1423,6 +1423,62 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` padding-bottom: var(--su128) !important; } +.i0 { + inset: var(--su0) !important; +} + +.i1 { + inset: var(--su1) !important; +} + +.i2 { + inset: var(--su2) !important; +} + +.i4 { + inset: var(--su4) !important; +} + +.i6 { + inset: var(--su6) !important; +} + +.i8 { + inset: var(--su8) !important; +} + +.i12 { + inset: var(--su12) !important; +} + +.i16 { + inset: var(--su16) !important; +} + +.i24 { + inset: var(--su24) !important; +} + +.i32 { + inset: var(--su32) !important; +} + +.i48 { + inset: var(--su48) !important; +} + +.i64 { + inset: var(--su64) !important; +} + +.i96 { + inset: var(--su96) !important; +} + +.i128 { + inset: var(--su128) !important; +} + .t0 { top: var(--su0) !important; } @@ -1950,61 +2006,5 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` .ln100 { left: -100% !important; } - -.i0 { - inset: var(--su0) !important; -} - -.i1 { - inset: var(--su1) !important; -} - -.i2 { - inset: var(--su2) !important; -} - -.i4 { - inset: var(--su4) !important; -} - -.i6 { - inset: var(--su6) !important; -} - -.i8 { - inset: var(--su8) !important; -} - -.i12 { - inset: var(--su12) !important; -} - -.i16 { - inset: var(--su16) !important; -} - -.i24 { - inset: var(--su24) !important; -} - -.i32 { - inset: var(--su32) !important; -} - -.i48 { - inset: var(--su48) !important; -} - -.i64 { - inset: var(--su64) !important; -} - -.i96 { - inset: var(--su96) !important; -} - -.i128 { - inset: var(--su128) !important; -} " `; From 5efa6a5a65fd92404cabe9756616fd70b93eb30e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 18:45:40 -0500 Subject: [PATCH 5/9] Relocate spacing-mixins.less --- lib/atomic/spacing.less | 2 +- lib/{atomic => exports}/spacing-mixins.less | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) rename lib/{atomic => exports}/spacing-mixins.less (98%) diff --git a/lib/atomic/spacing.less b/lib/atomic/spacing.less index ccd4d737c3..5e93c0cdb7 100644 --- a/lib/atomic/spacing.less +++ b/lib/atomic/spacing.less @@ -1,5 +1,5 @@ @import (reference) "../base/internal.less"; -@import (reference) "./spacing-mixins.less"; +@import (reference) "../exports/spacing-mixins.less"; // SPACING UNITS CSS CUSTOM PROPERTIES body { diff --git a/lib/atomic/spacing-mixins.less b/lib/exports/spacing-mixins.less similarity index 98% rename from lib/atomic/spacing-mixins.less rename to lib/exports/spacing-mixins.less index f013ca814f..d3de6f5869 100644 --- a/lib/atomic/spacing-mixins.less +++ b/lib/exports/spacing-mixins.less @@ -1,3 +1,4 @@ +// TODO document .generate-responsive-spacing(@prefix, @property, @includeNegative: false, @type: px) { & when (@type = px) { #stacks-internals #build-classes( @@ -34,6 +35,7 @@ } } +// TODO document .generate-responsive-xy-spacing(@prefix, @property, @includeNegative: false, @type: px) { & when (@type = px) { #stacks-internals #build-classes( From a68106c1305270c3cfa179644c63f6617ae28eca Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 23 Feb 2024 16:03:32 -0500 Subject: [PATCH 6/9] Add less mixin definitions; rename mixins --- lib/atomic/spacing.less | 52 ++++++++++++++++----------------- lib/exports/spacing-mixins.less | 31 +++++++++++++++++--- 2 files changed, 53 insertions(+), 30 deletions(-) diff --git a/lib/atomic/spacing.less b/lib/atomic/spacing.less index 5e93c0cdb7..80b5c313da 100644 --- a/lib/atomic/spacing.less +++ b/lib/atomic/spacing.less @@ -39,58 +39,58 @@ body { // MARGIN // Margin .m-auto { margin: auto !important; } -.generate-responsive-spacing('.m', margin, true); -.generate-responsive-spacing('.m', margin, true, percent); +.generate-spacing('.m', margin, true); +.generate-spacing('.m', margin, true, percent); // Margin top .mt-auto { margin-top: auto !important; } -.generate-responsive-spacing('.mt', margin-top, true); -.generate-responsive-spacing('.mt', margin-top, true, percent); +.generate-spacing('.mt', margin-top, true); +.generate-spacing('.mt', margin-top, true, percent); // Margin right .mr-auto { margin-right: auto !important; } -.generate-responsive-spacing('.mr', margin-right, true); -.generate-responsive-spacing('.mr', margin-right, true, percent); +.generate-spacing('.mr', margin-right, true); +.generate-spacing('.mr', margin-right, true, percent); // Margin bottom .mb-auto { margin-bottom: auto !important; } -.generate-responsive-spacing('.mb', margin-bottom, true); -.generate-responsive-spacing('.mb', margin-bottom, true, percent); +.generate-spacing('.mb', margin-bottom, true); +.generate-spacing('.mb', margin-bottom, true, percent); // Margin left .ml-auto { margin-left: auto !important; } -.generate-responsive-spacing('.ml', margin-left, true); -.generate-responsive-spacing('.ml', margin-left, true, percent); +.generate-spacing('.ml', margin-left, true); +.generate-spacing('.ml', margin-left, true, percent); // Margin x-axis, y-axis .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } -.generate-responsive-xy-spacing('.m', margin, true); +.generate-xy-spacing('.m', margin, true); // PADDING -.generate-responsive-spacing('.p', padding); -.generate-responsive-spacing('.pt', padding-top); -.generate-responsive-spacing('.pr', padding-right); -.generate-responsive-spacing('.pb', padding-bottom); -.generate-responsive-spacing('.pl', padding-left); -.generate-responsive-xy-spacing('.p', padding); +.generate-spacing('.p', padding); +.generate-spacing('.pt', padding-top); +.generate-spacing('.pr', padding-right); +.generate-spacing('.pb', padding-bottom); +.generate-spacing('.pl', padding-left); +.generate-xy-spacing('.p', padding); // POSITIONING // Inset -.generate-responsive-spacing('.i', inset); +.generate-spacing('.i', inset); // Top -.generate-responsive-spacing('.t', top, true); -.generate-responsive-spacing('.t', top, true, percent); +.generate-spacing('.t', top, true); +.generate-spacing('.t', top, true, percent); // Right -.generate-responsive-spacing('.r', right, true); -.generate-responsive-spacing('.r', right, true, percent); +.generate-spacing('.r', right, true); +.generate-spacing('.r', right, true, percent); // Bottom -.generate-responsive-spacing('.b', bottom, true); -.generate-responsive-spacing('.b', bottom, true, percent); +.generate-spacing('.b', bottom, true); +.generate-spacing('.b', bottom, true, percent); // Left -.generate-responsive-spacing('.l', left, true); -.generate-responsive-spacing('.l', left, true, percent); +.generate-spacing('.l', left, true); +.generate-spacing('.l', left, true, percent); diff --git a/lib/exports/spacing-mixins.less b/lib/exports/spacing-mixins.less index d3de6f5869..6fc80c282f 100644 --- a/lib/exports/spacing-mixins.less +++ b/lib/exports/spacing-mixins.less @@ -1,5 +1,17 @@ -// TODO document -.generate-responsive-spacing(@prefix, @property, @includeNegative: false, @type: px) { +/** + * Generate base and responsive atomic spacing classes. + * + * Usage example: + * .generate-spacing('.m', margin, true); + * .generate-spacing('.ml', margin-left, true, percent); + * .generate-spacing('.pr', padding-right); + * + * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc). + * @property - (required) What CSS property to generate (e.g. `margin`, `padding-right`, etc). + * @includeNegative: bool - Boolean to include generation of negative value classes. + * @type: px | percent - What set of value to generate. + */ +.generate-spacing(@prefix, @property, @includeNegative: false, @type: px) { & when (@type = px) { #stacks-internals #build-classes( responsive, @@ -35,8 +47,19 @@ } } -// TODO document -.generate-responsive-xy-spacing(@prefix, @property, @includeNegative: false, @type: px) { +/** + * Generate base and responsive atomic axis-specific spacing classes. + * + * Usage example: + * .generate-xy-spacing('.m', margin, true); + * .generate-xy-spacing('.p', padding); + * + * @prefix - (required) What prefix to generate (e.g. `.m`, `.p`, etc). + * @property - (required) What CSS property to generate (e.g. `margin`, `padding`, etc). + * @includeNegative: bool - Boolean to include generation of negative value classes. + * @type: px | percent - What set of value to generate. + */ + .generate-xy-spacing(@prefix, @property, @includeNegative: false, @type: px) { & when (@type = px) { #stacks-internals #build-classes( ~"@{prefix}x", From f27de8a1209c8e1e1b6447373980d6cefa256c7e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 23 Feb 2024 16:07:11 -0500 Subject: [PATCH 7/9] Improve position docs --- docs/product/base/position.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/product/base/position.html b/docs/product/base/position.html index 37dfdc9e75..012e96458c 100644 --- a/docs/product/base/position.html +++ b/docs/product/base/position.html @@ -64,6 +64,7 @@ + @@ -71,6 +72,9 @@ + {% endfor %} From 01b59cfadc924b3c2f3b2d5872cbaba7e7b63b86 Mon Sep 17 00:00:00 2001 From: Giamir Buoncristiani Date: Fri, 1 Mar 2024 15:34:59 +0100 Subject: [PATCH 8/9] refactor(spacing): simplify mixin and remove a couple of extra classes created by mistake --- .../__snapshots__/spacing.less.test.ts.snap | 212 ++++++------------ lib/atomic/spacing.less | 6 +- lib/exports/spacing-mixins.less | 115 +++------- 3 files changed, 99 insertions(+), 234 deletions(-) diff --git a/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/lib/atomic/__snapshots__/spacing.less.test.ts.snap index c0a9bf2d56..914cb48c0c 100644 --- a/lib/atomic/__snapshots__/spacing.less.test.ts.snap +++ b/lib/atomic/__snapshots__/spacing.less.test.ts.snap @@ -145,14 +145,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin: calc(var(--su128) * -1) !important; } -.mn50 { - margin: -50% !important; -} - -.mn100 { - margin: -100% !important; -} - .m50 { margin: 50% !important; } @@ -281,14 +273,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-top: calc(var(--su128) * -1) !important; } -.mtn50 { - margin-top: -50% !important; -} - -.mtn100 { - margin-top: -100% !important; -} - .mt50 { margin-top: 50% !important; } @@ -417,14 +401,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-right: calc(var(--su128) * -1) !important; } -.mrn50 { - margin-right: -50% !important; -} - -.mrn100 { - margin-right: -100% !important; -} - .mr50 { margin-right: 50% !important; } @@ -553,14 +529,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-bottom: calc(var(--su128) * -1) !important; } -.mbn50 { - margin-bottom: -50% !important; -} - -.mbn100 { - margin-bottom: -100% !important; -} - .mb50 { margin-bottom: 50% !important; } @@ -689,14 +657,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-left: calc(var(--su128) * -1) !important; } -.mln50 { - margin-left: -50% !important; -} - -.mln100 { - margin-left: -100% !important; -} - .ml50 { margin-left: 50% !important; } @@ -793,6 +753,71 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-right: var(--su128) !important; } +.mxn1 { + margin-left: calc(var(--su1) * -1) !important; + margin-right: calc(var(--su1) * -1) !important; +} + +.mxn2 { + margin-left: calc(var(--su2) * -1) !important; + margin-right: calc(var(--su2) * -1) !important; +} + +.mxn4 { + margin-left: calc(var(--su4) * -1) !important; + margin-right: calc(var(--su4) * -1) !important; +} + +.mxn6 { + margin-left: calc(var(--su6) * -1) !important; + margin-right: calc(var(--su6) * -1) !important; +} + +.mxn8 { + margin-left: calc(var(--su8) * -1) !important; + margin-right: calc(var(--su8) * -1) !important; +} + +.mxn12 { + margin-left: calc(var(--su12) * -1) !important; + margin-right: calc(var(--su12) * -1) !important; +} + +.mxn16 { + margin-left: calc(var(--su16) * -1) !important; + margin-right: calc(var(--su16) * -1) !important; +} + +.mxn24 { + margin-left: calc(var(--su24) * -1) !important; + margin-right: calc(var(--su24) * -1) !important; +} + +.mxn32 { + margin-left: calc(var(--su32) * -1) !important; + margin-right: calc(var(--su32) * -1) !important; +} + +.mxn48 { + margin-left: calc(var(--su48) * -1) !important; + margin-right: calc(var(--su48) * -1) !important; +} + +.mxn64 { + margin-left: calc(var(--su64) * -1) !important; + margin-right: calc(var(--su64) * -1) !important; +} + +.mxn96 { + margin-left: calc(var(--su96) * -1) !important; + margin-right: calc(var(--su96) * -1) !important; +} + +.mxn128 { + margin-left: calc(var(--su128) * -1) !important; + margin-right: calc(var(--su128) * -1) !important; +} + .my0 { margin-top: var(--su0) !important; margin-bottom: var(--su0) !important; @@ -863,71 +888,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-bottom: var(--su128) !important; } -.mxn1 { - margin-left: calc(var(--su1) * -1) !important; - margin-right: calc(var(--su1) * -1) !important; -} - -.mxn2 { - margin-left: calc(var(--su2) * -1) !important; - margin-right: calc(var(--su2) * -1) !important; -} - -.mxn4 { - margin-left: calc(var(--su4) * -1) !important; - margin-right: calc(var(--su4) * -1) !important; -} - -.mxn6 { - margin-left: calc(var(--su6) * -1) !important; - margin-right: calc(var(--su6) * -1) !important; -} - -.mxn8 { - margin-left: calc(var(--su8) * -1) !important; - margin-right: calc(var(--su8) * -1) !important; -} - -.mxn12 { - margin-left: calc(var(--su12) * -1) !important; - margin-right: calc(var(--su12) * -1) !important; -} - -.mxn16 { - margin-left: calc(var(--su16) * -1) !important; - margin-right: calc(var(--su16) * -1) !important; -} - -.mxn24 { - margin-left: calc(var(--su24) * -1) !important; - margin-right: calc(var(--su24) * -1) !important; -} - -.mxn32 { - margin-left: calc(var(--su32) * -1) !important; - margin-right: calc(var(--su32) * -1) !important; -} - -.mxn48 { - margin-left: calc(var(--su48) * -1) !important; - margin-right: calc(var(--su48) * -1) !important; -} - -.mxn64 { - margin-left: calc(var(--su64) * -1) !important; - margin-right: calc(var(--su64) * -1) !important; -} - -.mxn96 { - margin-left: calc(var(--su96) * -1) !important; - margin-right: calc(var(--su96) * -1) !important; -} - -.mxn128 { - margin-left: calc(var(--su128) * -1) !important; - margin-right: calc(var(--su128) * -1) !important; -} - .myn1 { margin-top: calc(var(--su1) * -1) !important; margin-bottom: calc(var(--su1) * -1) !important; @@ -993,16 +953,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` margin-bottom: calc(var(--su128) * -1) !important; } -.mn50 { - margin-top: -50% !important; - margin-bottom: -50% !important; -} - -.mn100 { - margin-top: -100% !important; - margin-bottom: -100% !important; -} - .p0 { padding: var(--su0) !important; } @@ -1587,14 +1537,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` top: calc(var(--su128) * -1) !important; } -.tn50 { - top: -50% !important; -} - -.tn100 { - top: -100% !important; -} - .t50 { top: 50% !important; } @@ -1719,14 +1661,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` right: calc(var(--su128) * -1) !important; } -.rn50 { - right: -50% !important; -} - -.rn100 { - right: -100% !important; -} - .r50 { right: 50% !important; } @@ -1851,14 +1785,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` bottom: calc(var(--su128) * -1) !important; } -.bn50 { - bottom: -50% !important; -} - -.bn100 { - bottom: -100% !important; -} - .b50 { bottom: 50% !important; } @@ -1983,14 +1909,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` left: calc(var(--su128) * -1) !important; } -.ln50 { - left: -50% !important; -} - -.ln100 { - left: -100% !important; -} - .l50 { left: 50% !important; } diff --git a/lib/atomic/spacing.less b/lib/atomic/spacing.less index 80b5c313da..54d7c385d9 100644 --- a/lib/atomic/spacing.less +++ b/lib/atomic/spacing.less @@ -65,7 +65,8 @@ body { // Margin x-axis, y-axis .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } -.generate-xy-spacing('.m', margin, true); +.generate-spacing('.mx'; margin-left, margin-right; true); +.generate-spacing('.my'; margin-top, margin-bottom; true); // PADDING .generate-spacing('.p', padding); @@ -73,7 +74,8 @@ body { .generate-spacing('.pr', padding-right); .generate-spacing('.pb', padding-bottom); .generate-spacing('.pl', padding-left); -.generate-xy-spacing('.p', padding); +.generate-spacing('.px'; padding-left, padding-right); +.generate-spacing('.py'; padding-top, padding-bottom); // POSITIONING // Inset diff --git a/lib/exports/spacing-mixins.less b/lib/exports/spacing-mixins.less index 6fc80c282f..f79196c5c8 100644 --- a/lib/exports/spacing-mixins.less +++ b/lib/exports/spacing-mixins.less @@ -4,119 +4,64 @@ * Usage example: * .generate-spacing('.m', margin, true); * .generate-spacing('.ml', margin-left, true, percent); + * .generate-spacing('.mx'; margin-left, margin-right; true); * .generate-spacing('.pr', padding-right); * * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc). - * @property - (required) What CSS property to generate (e.g. `margin`, `padding-right`, etc). + * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc). * @includeNegative: bool - Boolean to include generation of negative value classes. * @type: px | percent - What set of value to generate. */ -.generate-spacing(@prefix, @property, @includeNegative: false, @type: px) { +.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) { & when (@type = px) { #stacks-internals #build-classes( responsive, @prefix, - { .template(@value) { @{property}: var(~"--su@{value}") !important; } }, + { .template(@value) { + each(@properties, #(@prop) { + @{prop}: var(~"--su@{value}") !important; + }) + } }, 0 1 2 4 6 8 12 16 24 32 48 64 96 128 ); & when (@includeNegative = true) { - #stacks-internals #build-classes( - responsive, - ~"@{prefix}n", - { .template(@value) { @{property}: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 - ); - } + #stacks-internals #build-classes( + responsive, + ~"@{prefix}n", + { .template(@value) { + each(@properties, #(@prop) { + @{prop}: calc(var(~"--su@{value}") * -1) !important; + }) + } }, + 1 2 4 6 8 12 16 24 32 48 64 96 128 + ); + } } + & when (@type = percent) { #stacks-internals #build-classes( responsive, @prefix, - { .template(@value) { @{property}: @value !important; } }, + { .template(@value) { + each(@properties, #(@prop) { + @{prop}: @value !important; + }) + } }, 50% 100% ); - } - & when (@includeNegative = true) { - #stacks-internals #build-classes( - responsive, - ~"@{prefix}n", - { .template(@value) { @{property}: -@value !important; } }, - 50% 100% - ); - } -} - -/** - * Generate base and responsive atomic axis-specific spacing classes. - * - * Usage example: - * .generate-xy-spacing('.m', margin, true); - * .generate-xy-spacing('.p', padding); - * - * @prefix - (required) What prefix to generate (e.g. `.m`, `.p`, etc). - * @property - (required) What CSS property to generate (e.g. `margin`, `padding`, etc). - * @includeNegative: bool - Boolean to include generation of negative value classes. - * @type: px | percent - What set of value to generate. - */ - .generate-xy-spacing(@prefix, @property, @includeNegative: false, @type: px) { - & when (@type = px) { - #stacks-internals #build-classes( - ~"@{prefix}x", - { .template(@value) { - @{property}-left: var(~"--su@{value}") !important; - @{property}-right: var(~"--su@{value}") !important; - } }, - 0 1 2 4 6 8 12 16 24 32 48 64 96 128 - ); - #stacks-internals #build-classes( - ~"@{prefix}y", - { .template(@value) { - @{property}-top: var(~"--su@{value}") !important; - @{property}-bottom: var(~"--su@{value}") !important; - } }, - 0 1 2 4 6 8 12 16 24 32 48 64 96 128 - ); - & when (@includeNegative = true) { - #stacks-internals #build-classes( - ~"@{prefix}xn", - { .template(@value) { - @{property}-left: calc(var(~"--su@{value}") * -1) !important; - @{property}-right: calc(var(~"--su@{value}") * -1) !important; - } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 - ); - #stacks-internals #build-classes( - ~"@{prefix}yn", - { .template(@value) { - @{property}-top: calc(var(~"--su@{value}") * -1) !important; - @{property}-bottom: calc(var(~"--su@{value}") * -1) !important; } }, - 1 2 4 6 8 12 16 24 32 48 64 96 128 - ); - } - } - - & when (@type = percent) { - #stacks-internals #build-classes( - responsive, - @prefix, - { .template(@value) { - @{property}-top: @value !important; - @{property}-bottom: @value !important; - } }, - 50% 100% - ); - } - & when (@includeNegative = true) { + & when (@includeNegative = true) { #stacks-internals #build-classes( responsive, ~"@{prefix}n", { .template(@value) { - @{property}-top: -@value !important; - @{property}-bottom: -@value !important; + each(@properties, #(@prop) { + @{prop}: -@value !important; + }) } }, 50% 100% ); } + } } From 5e1bfb033d8deff8048216eb468103c6bdd151e3 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 1 Mar 2024 11:05:12 -0500 Subject: [PATCH 9/9] docs(spacing): add myn margin class abbr table Addresses https://github.com/StackExchange/Stacks/pull/1654#discussion_r1509040097 --- docs/_data/spacing.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/_data/spacing.json b/docs/_data/spacing.json index 3bdda5c72a..357fe22241 100755 --- a/docs/_data/spacing.json +++ b/docs/_data/spacing.json @@ -43,6 +43,11 @@ "define": "negative margin x-axis", "responsive": true }, + { + "term": "myn", + "define": "negative margin y-axis", + "responsive": true + }, { "term": "mtn", "define": "negative margin-top",
Prefix-1px-2px-4px-6px-8px-12px-16px-24px-32px-48px-64px-96px-128px-50%-100%-{{ value }}
{{ class.prefix }}.{{ class.prefix }}{{ values }}{{ className }}n.{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }}
-{{ value }}-{{ value }}
{{ className }}n-.{{ className }}n{{ value | replace: "px", "" }}-.{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }}.{{ className }}n{{ value | replace: "px", "" }}.{{ className }}n{{ value | replace: "px", "" | replace: "%", "" }}
Abbreviation DefinitionResponsive?
{{ space.term }} {{ space.define }} + {% icon "Checkmark", "fc-green-400" %} +