From b3e858f57e5a70c4413fe38819538168bff461e0 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 12 Jan 2026 19:04:11 -0500 Subject: [PATCH 01/18] feat(height, width): update to SHINE sizing --- MIGRATION_GUIDE.md | 4 + packages/stacks-classic/lib/atomic/flex.less | 17 +- .../lib/atomic/positioning.less | 25 ++ .../lib/atomic/positioning.less.test.ts | 12 + .../stacks-classic/lib/atomic/sizing.less | 87 ++++++ .../lib/atomic/sizing.less.test.ts | 12 + .../stacks-classic/lib/atomic/spacing.less | 97 ++----- .../lib/atomic/spacing.less.test.ts | 2 +- .../lib/atomic/width-height.less | 200 ++----------- .../stacks-classic/lib/base/internal.less | 8 +- .../lib/components/banner/banner.less | 2 +- .../lib/components/topbar/topbar.less | 6 +- .../lib/exports/constants-helpers.less | 4 - .../lib/exports/constants-type.less | 2 +- .../stacks-classic/lib/exports/mixins.less | 90 ++++++ .../lib/exports/spacing-mixins.less | 67 ----- .../stacks-classic/lib/stacks-static.less | 2 + packages/stacks-docs/_data/atomics.json | 171 +++++++++++ .../_data/{spacing.json => width-height.json} | 120 ++++++++ .../assets/less/stacks-documentation.less | 24 +- .../product/base/width-height.html | 273 ++++++------------ 21 files changed, 687 insertions(+), 538 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/positioning.less create mode 100644 packages/stacks-classic/lib/atomic/positioning.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/sizing.less create mode 100644 packages/stacks-classic/lib/atomic/sizing.less.test.ts delete mode 100644 packages/stacks-classic/lib/exports/spacing-mixins.less rename packages/stacks-docs/_data/{spacing.json => width-height.json} (61%) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index e83c26cc66..7611810361 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -23,6 +23,10 @@ - `.fs-category` removed - Atomic classes now have a predefined line-height associated to them +#### Width & Height +- Removed undocumented `.hmn0`, `.hmx0`, `.wmn0`, `.wmx0` +- Added `.hmn-screen`, `.wmn-screen` + ### Components #### Badge diff --git a/packages/stacks-classic/lib/atomic/flex.less b/packages/stacks-classic/lib/atomic/flex.less index 343fb78be7..6bc788412e 100644 --- a/packages/stacks-classic/lib/atomic/flex.less +++ b/packages/stacks-classic/lib/atomic/flex.less @@ -321,19 +321,15 @@ .ac-start { align-content: flex-start !important; } .ac-stretch { align-content: stretch !important; } -// -- ALIGN ITEMS -// Defines the default behavior for how child items align along -// the parent's cross axis. Think of it the cross-axis for -// justify-content. -// ---------------------------------------------------------------------------- +// Align items #stacks-internals #build-classes( - responsive, '.ai', { .template(@value) when (@value=start), (@value=end) { align-items: ~"flex-@{value}" !important; } .template(@value) when (default()) { align-items: @value !important; }; }, - baseline center end start stretch + baseline center end start stretch, + true ); // -- CENTER ITEMS @@ -345,18 +341,15 @@ .ai-center; } -// -- ALIGN SELF -// Allows child containers to re-align themselves regardless -// of the parent's main axis direction. -// ---------------------------------------------------------------------------- +// Align self #stacks-internals #build-classes( - responsive, '.as', { .template(@value) when (@value=start), (@value=end) { align-self: ~"flex-@{value}" !important; } .template(@value) when (default()) { align-self: @value !important; }; }, auto baseline center end start stretch + true ); // -- FLEX diff --git a/packages/stacks-classic/lib/atomic/positioning.less b/packages/stacks-classic/lib/atomic/positioning.less new file mode 100644 index 0000000000..1a0f272d76 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/positioning.less @@ -0,0 +1,25 @@ +@import (reference) "../base/internal.less"; +@import (reference) "../exports/mixins.less"; + +@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128; +@percent-values: 50% 100%; + +// POSITIONING +// Inset +.generate-sizing('.i', inset, @px-values, 'px'); + +// Top +.generate-sizing('.t', top, @px-values, 'px', true); +.generate-sizing('.t', top, @percent-values, 'percent', true); + +// Right +.generate-sizing('.r', right, @px-values, 'px', true); +.generate-sizing('.r', right, @percent-values, 'percent', true); + +// Bottom +.generate-sizing('.b', bottom, @px-values, 'px', true); +.generate-sizing('.b', bottom, @percent-values, 'percent', true); + +// Left +.generate-sizing('.l', left, @px-values, 'px', true); +.generate-sizing('.l', left, @percent-values, 'percent', true); diff --git a/packages/stacks-classic/lib/atomic/positioning.less.test.ts b/packages/stacks-classic/lib/atomic/positioning.less.test.ts new file mode 100644 index 0000000000..594c11959e --- /dev/null +++ b/packages/stacks-classic/lib/atomic/positioning.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: positioning", () => { + it("should output all atomic css classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/positioning.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/sizing.less b/packages/stacks-classic/lib/atomic/sizing.less new file mode 100644 index 0000000000..877f1559fa --- /dev/null +++ b/packages/stacks-classic/lib/atomic/sizing.less @@ -0,0 +1,87 @@ +@import (reference) "../base/internal.less"; + +// SIZING UNITS CSS CUSTOM PROPERTIES +body { + // TODO SPARK retain other sizing units (or alias them) for backward compatibility + --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), 0.063rem, 0.063rem); + --su2: 0.125rem; + --su4: 0.25rem; + --su6: 0.375rem; + --su8: 0.5rem; + --su12: 0.75rem; + --su16: 1rem; + --su24: 1.5rem; + --su32: 2rem; + --su48: 3rem; + --su64: 4rem; + --su96: 6rem; + --su128: 8rem; + --su256: 16rem; + --su344: 21.5rem; + --su448: 28rem; + --su512: 32rem; + --su640: 40rem; + --su768: 48rem; + --su848: 53rem; + --su960: 60rem; + --su1024: 64rem; + --su1120: 70rem; + --su1280: 80rem; + + // Negative sizing + // This is a common subset sizing units for negative values + --sun1: calc(var(--su1) * -1); + --sun2: calc(var(--su2) * -1); + --sun4: calc(var(--su4) * -1); + --sun6: calc(var(--su6) * -1); + --sun8: calc(var(--su8) * -1); + --sun12: calc(var(--su12) * -1); + --sun16: calc(var(--su16) * -1); + --sun24: calc(var(--su24) * -1); + --sun32: calc(var(--su32) * -1); + --sun48: calc(var(--su48) * -1); + --sun64: calc(var(--su64) * -1); + --sun96: calc(var(--su96) * -1); + --sun128: calc(var(--su128) * -1); + + // Size aliases + --su-mobile-min: var(--su344); + --su-popover: var(--su448); + --su-tablet: var(--su640); + --su-content: var(--su960); + --su-dashboard: var(--su1120); + --su-max: var(--su1280); + + // Static (aka px) sizing units + --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; + --su-static256: 256px; + --su-static344: 344px; + --su-static448: 448px; + --su-static512: 512px; + --su-static640: 640px; + --su-static768: 768px; + --su-static848: 848px; + --su-static960: 960px; + --su-static1024: 1024px; + --su-static1120: 1120px; + --su-static1280: 1280px; + + // Legacy sizing units for Stacks v2 + --s-full: 79rem; + --s-step: calc(var(--s-full) / 12); +} diff --git a/packages/stacks-classic/lib/atomic/sizing.less.test.ts b/packages/stacks-classic/lib/atomic/sizing.less.test.ts new file mode 100644 index 0000000000..cd03b81a52 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/sizing.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: sizing", () => { + it("should output all sizing custom properties", async () => { + const css = await renderLess(` + @import "./lib/atomic/sizing.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/spacing.less b/packages/stacks-classic/lib/atomic/spacing.less index 54d7c385d9..70076588c7 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less +++ b/packages/stacks-classic/lib/atomic/spacing.less @@ -1,98 +1,47 @@ @import (reference) "../base/internal.less"; -@import (reference) "../exports/spacing-mixins.less"; +@import (reference) "../exports/mixins.less"; -// SPACING UNITS CSS CUSTOM PROPERTIES -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); - // 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)); - --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)); -} +@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128; +@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128; +@percent-values: 50% 100%; // MARGIN // Margin .m-auto { margin: auto !important; } -.generate-spacing('.m', margin, true); -.generate-spacing('.m', margin, true, percent); +.generate-sizing('.m', margin, @px-values, 'px', true); +.generate-sizing('.m', margin, @percent-values, 'percent', true); // Margin top .mt-auto { margin-top: auto !important; } -.generate-spacing('.mt', margin-top, true); -.generate-spacing('.mt', margin-top, true, percent); +.generate-sizing('.mt', margin-top, @px-values, 'px', true); +.generate-sizing('.mt', margin-top, @percent-values, 'percent', true); // Margin right .mr-auto { margin-right: auto !important; } -.generate-spacing('.mr', margin-right, true); -.generate-spacing('.mr', margin-right, true, percent); +.generate-sizing('.mr', margin-right, @px-values, 'px', true); +.generate-sizing('.mr', margin-right, @percent-values, 'percent', true); // Margin bottom .mb-auto { margin-bottom: auto !important; } -.generate-spacing('.mb', margin-bottom, true); -.generate-spacing('.mb', margin-bottom, true, percent); +.generate-sizing('.mb', margin-bottom, @px-values, 'px', true); +.generate-sizing('.mb', margin-bottom, @percent-values, 'percent', true); // Margin left .ml-auto { margin-left: auto !important; } -.generate-spacing('.ml', margin-left, true); -.generate-spacing('.ml', margin-left, true, percent); +.generate-sizing('.ml', margin-left, @px-values, 'px', true); +.generate-sizing('.ml', margin-left, @percent-values, 'percent', true); // 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-spacing('.mx'; margin-left, margin-right; true); -.generate-spacing('.my'; margin-top, margin-bottom; true); +.generate-sizing('.mx', margin-left, margin-right; @px-values; 'px', true); +.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px', true); // 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-spacing('.px'; padding-left, padding-right); -.generate-spacing('.py'; padding-top, padding-bottom); - -// POSITIONING -// Inset -.generate-spacing('.i', inset); - -// Top -.generate-spacing('.t', top, true); -.generate-spacing('.t', top, true, percent); - -// Right -.generate-spacing('.r', right, true); -.generate-spacing('.r', right, true, percent); - -// Bottom -.generate-spacing('.b', bottom, true); -.generate-spacing('.b', bottom, true, percent); - -// Left -.generate-spacing('.l', left, true); -.generate-spacing('.l', left, true, percent); +.generate-sizing('.p', padding, @px-values, 'px'); +.generate-sizing('.pt', padding-top, @px-values, 'px'); +.generate-sizing('.pr', padding-right, @px-values, 'px'); +.generate-sizing('.pb', padding-bottom, @px-values, 'px'); +.generate-sizing('.pl', padding-left, @px-values, 'px'); +.generate-sizing('.px'; padding-left, padding-right; @px-values, 'px'); +.generate-sizing('.py'; padding-top, padding-bottom; @px-values, 'px'); diff --git a/packages/stacks-classic/lib/atomic/spacing.less.test.ts b/packages/stacks-classic/lib/atomic/spacing.less.test.ts index f89473e7ec..83a7920ef9 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less.test.ts +++ b/packages/stacks-classic/lib/atomic/spacing.less.test.ts @@ -1,7 +1,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; -describe("atomic: misc", () => { +describe("atomic: spacing", () => { it("should output all atomic css classes", async () => { const css = await renderLess(` @import "./lib/atomic/spacing.less"; diff --git a/packages/stacks-classic/lib/atomic/width-height.less b/packages/stacks-classic/lib/atomic/width-height.less index 0f7001fe9d..5ee80f92f3 100644 --- a/packages/stacks-classic/lib/atomic/width-height.less +++ b/packages/stacks-classic/lib/atomic/width-height.less @@ -1,194 +1,40 @@ -// -// STACK OVERFLOW -// WIDTH & HEIGHT -// -// 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/ -// -// • WIDTH -// • PERCENTAGE -// • STATIC -// • MAX-WIDTH -// • MIN-WIDTH -// • HEIGHT -// • PERCENTAGE -// • STATIC -// • MAX-HEIGHT -// • MIN-HEIGHT -// -// ============================================================================ -// $ WIDTH -// ---------------------------------------------------------------------------- -// $$ PERCENTAGE AND VIEWPORT UNITS -.w0 { width: 0 !important; } -.w10 { width: 10% !important; } -.w20 { width: 20% !important; } -#stacks-internals #responsify('.w25', { width: 25% !important; }); -.w30 { width: 30% !important; } -#stacks-internals #responsify('.w33', { width: 33.33333% !important; }); -.w40 { width: 40% !important; } -#stacks-internals #responsify('.w50', { width: 50% !important; }); -.w60 { width: 60% !important; } -#stacks-internals #responsify('.w66', { width: 66.66667% !important; }); -.w70 { width: 70% !important; } -#stacks-internals #responsify('.w75', { width: 75% !important; }); -.w80 { width: 80% !important; } -.w90 { width: 90% !important; } -#stacks-internals #responsify('.w100', { width: 100% !important; }); +@import (reference) "../exports/mixins.less"; + +// `width` properties +.generate-sizing('.w', width, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px'); +.generate-su-sizing('.ws', width); // Static sizing units +.generate-sizing('.w', width, 10% 20% 30% 40% 60% 70% 80% 90%, 'percent'); +.generate-sizing('.w', width, 25% 50% 75% 100%, 'percent', true); // responsive +#stacks-internals #responsify('.w33', { width: calc(100% / 3) !important; }); +#stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; }); #stacks-internals #responsify('.w-auto', { width: auto !important; }); #stacks-internals #responsify('.w-screen', { width: 100vw !important; }); - -// $$ STATIC -.ws0, -.w0 { width: 0 !important; } -.ws1 { width: var(--s-step) !important; } -.ws2 { width: calc(var(--s-step) * 2) !important; } -.ws3 { width: calc(var(--s-step) * 3) !important; } -.ws4 { width: calc(var(--s-step) * 4) !important; } -.ws5 { width: calc(var(--s-step) * 5) !important; } -.ws6 { width: calc(var(--s-step) * 6) !important; } -.ws7 { width: calc(var(--s-step) * 7) !important; } -.ws8 { width: calc(var(--s-step) * 8) !important; } -.ws9 { width: calc(var(--s-step) * 9) !important; } -.ws10 { width: calc(var(--s-step) * 10) !important; } -.ws11 { width: calc(var(--s-step) * 11) !important; } -.ws12 { width: var(--s-full) !important; } - -// $$ SPACING UNITS -.w2 { width: var(--su-static2) !important; } -.w4 { width: var(--su-static4) !important; } -.w6 { width: var(--su-static6) !important; } -.w8 { width: var(--su-static8) !important; } -.w12 { width: var(--su-static12) !important; } -.w16 { width: var(--su-static16) !important; } -.w24 { width: var(--su-static24) !important; } -.w32 { width: var(--su-static32) !important; } -.w48 { width: var(--su-static48) !important; } -.w64 { width: var(--su-static64) !important; } -.w96 { width: var(--su-static96) !important; } -.w128 { width: var(--su-static128) !important; } - -// ============================================================================ -// $ MAX-WIDTH -// ---------------------------------------------------------------------------- -.wmx0 { max-width: 0 !important; } -.wmx1 { max-width: var(--s-step) !important; } -.wmx2 { max-width: calc(var(--s-step) * 2) !important; } -.wmx25 { max-width: 25% !important; } -.wmx3 { max-width: calc(var(--s-step) * 3) !important; } -.wmx4 { max-width: calc(var(--s-step) * 4) !important; } -.wmx5 { max-width: calc(var(--s-step) * 5) !important; } -.wmx50 { max-width: 50% !important; } -.wmx6 { max-width: calc(var(--s-step) * 6) !important; } -.wmx7 { max-width: calc(var(--s-step) * 7) !important; } -.wmx75 { max-width: 75% !important; } -.wmx8 { max-width: calc(var(--s-step) * 8) !important; } -.wmx9 { max-width: calc(var(--s-step) * 9) !important; } -.wmx10 { max-width: calc(var(--s-step) * 10) !important; } -.wmx11 { max-width: calc(var(--s-step) * 11) !important; } -.wmx12 { max-width: var(--s-full) !important; } +// `max-width` properties +.generate-su-sizing('.wmx', max-width); // Static sizing units +.generate-sizing('.wmx', max-width, 25% 50% 75%, 'percent'); #stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); #stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); #stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); - -// ============================================================================ -// $ MIN-WIDTH -// ---------------------------------------------------------------------------- -.wmn0 { min-width: 0 !important; } -.wmn1 { min-width: var(--s-step) !important; } -.wmn2 { min-width: calc(var(--s-step) * 2) !important; } -.wmn25 { min-width: 25% !important; } -.wmn3 { min-width: calc(var(--s-step) * 3) !important; } -.wmn4 { min-width: calc(var(--s-step) * 4) !important; } -.wmn5 { min-width: calc(var(--s-step) * 5) !important; } -.wmn50 { min-width: 50% !important; } -.wmn6 { min-width: calc(var(--s-step) * 6) !important; } -.wmn7 { min-width: calc(var(--s-step) * 7) !important; } -.wmn75 { min-width: 75% !important; } -.wmn8 { min-width: calc(var(--s-step) * 8) !important; } -.wmn9 { min-width: calc(var(--s-step) * 9) !important; } -.wmn10 { min-width: calc(var(--s-step) * 10) !important; } -.wmn11 { min-width: calc(var(--s-step) * 11) !important; } -.wmn12 { min-width: var(--s-full) !important; } +// `min-width` properties +.generate-su-sizing('.wmn', min-width); +.generate-sizing('.wmn', min-width, 25% 50% 75%, 'percent'); #stacks-internals #responsify('.wmn100', { min-width: 100% !important; }); #stacks-internals #responsify('.wmn-initial', { min-width: initial !important; }); +#stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; }); -// ============================================================================ -// $ HEIGHT -// ---------------------------------------------------------------------------- -// $$ PERCENTAGE AND VIEWPORT UNITS -.h0 { height: 0 !important; } +// `height` properties +.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px'); +.generate-su-sizing('.hs', height); // Static sizing units #stacks-internals #responsify('.h100', { height: 100% !important; }); #stacks-internals #responsify('.h-auto', { height: auto !important; }); #stacks-internals #responsify('.h-screen', { height: 100vh !important; }); - -// $$ STATIC -.hs0, -.h0 { height: 0 !important; } -.hs1 { height: var(--s-step) !important; } -.hs2 { height: calc(var(--s-step) * 2) !important; } -.hs3 { height: calc(var(--s-step) * 3) !important; } -.hs4 { height: calc(var(--s-step) * 4) !important; } -.hs5 { height: calc(var(--s-step) * 5) !important; } -.hs6 { height: calc(var(--s-step) * 6) !important; } -.hs7 { height: calc(var(--s-step) * 7) !important; } -.hs8 { height: calc(var(--s-step) * 8) !important; } -.hs9 { height: calc(var(--s-step) * 9) !important; } -.hs10 { height: calc(var(--s-step) * 10) !important; } -.hs11 { height: calc(var(--s-step) * 11) !important; } -.hs12 { height: var(--s-full) !important; } - -// $$ SPACING UNITS -.h2 { height: var(--su-static2) !important; } -.h4 { height: var(--su-static4) !important; } -.h6 { height: var(--su-static6) !important; } -.h8 { height: var(--su-static8) !important; } -.h12 { height: var(--su-static12) !important; } -.h16 { height: var(--su-static16) !important; } -.h24 { height: var(--su-static24) !important; } -.h32 { height: var(--su-static32) !important; } -.h48 { height: var(--su-static48) !important; } -.h64 { height: var(--su-static64) !important; } -.h96 { height: var(--su-static96) !important; } -.h128 { height: var(--su-static128) !important; } - -// ============================================================================ -// $ MAX-HEIGHT -// ---------------------------------------------------------------------------- -.hmx0 { max-height: 0 !important; } -.hmx1 { max-height: var(--s-step) !important; } -.hmx2 { max-height: calc(var(--s-step) * 2) !important; } -.hmx3 { max-height: calc(var(--s-step) * 3) !important; } -.hmx4 { max-height: calc(var(--s-step) * 4) !important; } -.hmx5 { max-height: calc(var(--s-step) * 5) !important; } -.hmx6 { max-height: calc(var(--s-step) * 6) !important; } -.hmx7 { max-height: calc(var(--s-step) * 7) !important; } -.hmx8 { max-height: calc(var(--s-step) * 8) !important; } -.hmx9 { max-height: calc(var(--s-step) * 9) !important; } -.hmx10 { max-height: calc(var(--s-step) * 10) !important; } -.hmx11 { max-height: calc(var(--s-step) * 11) !important; } -.hmx12 { max-height: var(--s-full) !important; } +// `max-height` properties +.generate-su-sizing('.hmx', max-height); // Static sizing units #stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); #stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); #stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); - -// ============================================================================ -// $ MIN-HEIGHT -// ---------------------------------------------------------------------------- -.hmn0 { min-height: 0 !important; } -.hmn1 { min-height: var(--s-step) !important; } -.hmn2 { min-height: calc(var(--s-step) * 2) !important; } -.hmn3 { min-height: calc(var(--s-step) * 3) !important; } -.hmn4 { min-height: calc(var(--s-step) * 4) !important; } -.hmn5 { min-height: calc(var(--s-step) * 5) !important; } -.hmn6 { min-height: calc(var(--s-step) * 6) !important; } -.hmn7 { min-height: calc(var(--s-step) * 7) !important; } -.hmn8 { min-height: calc(var(--s-step) * 8) !important; } -.hmn9 { min-height: calc(var(--s-step) * 9) !important; } -.hmn10 { min-height: calc(var(--s-step) * 10) !important; } -.hmn11 { min-height: calc(var(--s-step) * 11) !important; } -.hmn12 { min-height: var(--s-full) !important; } +// `min-height` properties +.generate-su-sizing('.hmn', min-height); // Static sizing units #stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); #stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); #stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; }); diff --git a/packages/stacks-classic/lib/base/internal.less b/packages/stacks-classic/lib/base/internal.less index 0fa6f3b3d5..8131585fc6 100644 --- a/packages/stacks-classic/lib/base/internal.less +++ b/packages/stacks-classic/lib/base/internal.less @@ -164,12 +164,10 @@ // --------------------------------------------------------------------------- - #build-classes(@class-prefix, @rules, @values) { - #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values); - } - #build-classes(responsive, @class-prefix, @rules, @values) { - #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values); + #build-classes(@class-prefix, @rules, @values, @responsive: false) { + #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, @responsive, @values); } + #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) { @val: extract(@values, @start-index); & when (isnumber(@val)) { diff --git a/packages/stacks-classic/lib/components/banner/banner.less b/packages/stacks-classic/lib/components/banner/banner.less index 468b1211da..b48442bf40 100644 --- a/packages/stacks-classic/lib/components/banner/banner.less +++ b/packages/stacks-classic/lib/components/banner/banner.less @@ -29,7 +29,7 @@ & &--container { // When we want to keep hero content capped margin: 0 auto; - max-width: calc(var(--s-step) * 10); + max-width: var(--su1024); position: relative; width: 100%; } diff --git a/packages/stacks-classic/lib/components/topbar/topbar.less b/packages/stacks-classic/lib/components/topbar/topbar.less index 08d9783fa8..68f2969e9e 100644 --- a/packages/stacks-classic/lib/components/topbar/topbar.less +++ b/packages/stacks-classic/lib/components/topbar/topbar.less @@ -31,7 +31,7 @@ --_tb-searchbar-p: 0 var(--su8); --_tb-searchbar-open-d: unset; --_tb-searchbar-open-mxw: 0; - --_tb-searchbar-popover-wmn: calc(var(--s-step) * 4); + --_tb-searchbar-popover-wmn: var(--su448); --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16)); // CONTEXTUAL STYLES @@ -147,7 +147,7 @@ height: 100%; margin: 0 auto; max-width: 100%; - width: var(--s-full); + width: var(--su-max); } & &--content { @@ -414,7 +414,7 @@ align-self: stretch; color: var(--theme-topbar-select-color, var(--black-500)); margin-right: calc(var(--su-static1) * -1); //-1px - max-width: calc(var(--s-step) * 2) !important; // wmx2; + max-width: var(--su256) !important; } &.s-topbar--searchbar__open { diff --git a/packages/stacks-classic/lib/exports/constants-helpers.less b/packages/stacks-classic/lib/exports/constants-helpers.less index 29aac0b8f4..21103be301 100644 --- a/packages/stacks-classic/lib/exports/constants-helpers.less +++ b/packages/stacks-classic/lib/exports/constants-helpers.less @@ -50,10 +50,6 @@ body { --default-transition-duration: 0.1s; --transition-time: var(--default-transition-duration); - - // Sizing - --s-full: 79rem; // Based on a pixel size of 1264px; - --s-step: calc(var(--s-full) / 12); } // ============================================================================ diff --git a/packages/stacks-classic/lib/exports/constants-type.less b/packages/stacks-classic/lib/exports/constants-type.less index 1f64ca3297..81223c2d73 100644 --- a/packages/stacks-classic/lib/exports/constants-type.less +++ b/packages/stacks-classic/lib/exports/constants-type.less @@ -108,7 +108,7 @@ body { --fs-title: 1.375rem; // 22px --fs-headline1: 1.75rem; // 28px --fs-headline2: 2.25rem; // 36px - --fs-display1: 2.875rem; // 46px + --fs-display1: 2.875rem; // 46px --fs-display2: 3.625rem; // 58px --fs-display3: 4.5rem; // 72px --fs-display4: 6.25rem; // 100px diff --git a/packages/stacks-classic/lib/exports/mixins.less b/packages/stacks-classic/lib/exports/mixins.less index 31ac5b112c..c2128dbb14 100644 --- a/packages/stacks-classic/lib/exports/mixins.less +++ b/packages/stacks-classic/lib/exports/mixins.less @@ -268,6 +268,96 @@ } } +/** + * Generate base and responsive atomic sizing classes. + * + * Usage example: + * .generate-sizing('.m', margin, true); + * .generate-sizing('.ml', margin-left, true, percent); + * .generate-sizing('.mx'; margin-left, margin-right; true); + * .generate-sizing('.pr', padding-right); + * + * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, 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-sizing(@prefix, @properties, @values, @type: 'px', @responsive: false, @negative: false) { + & when (@type = 'px') { + #stacks-internals #build-classes( + @prefix, + { + .template(@value) { + each(@properties, .(@prop) { + @{prop}: var(~"--su@{value}") !important; + }); + } + }, + @values, + @responsive + ); + + & when (@negative = true) { + #stacks-internals #build-classes( + ~"@{prefix}n", + { + .template(@value) { + each(@properties, .(@prop) { + @{prop}: calc(var(~"--su@{value}") * -1) !important; + }); + } + }, + @values, + @responsive + ); + } + } + + & when (@type = 'percent') { + #stacks-internals #build-classes( + @prefix, + { + .template(@value) { + each(@properties, .(@prop) { + @{prop}: @value !important; + }); + } + }, + @values, + @responsive + ); + + & when (@negative = true) { + #stacks-internals #build-classes( + ~"@{prefix}n", + { + .template(@value) { + each(@properties, .(@prop) { + @{prop}: -@value !important; + }); + } + }, + @values, + @responsive + ); + } + } +} + +.generate-su-sizing(@prefix, @property) { + @su-values: 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280; + #stacks-internals #build-classes( + @prefix, + { + .template(@value) { + @su-value: extract(@su-values, @value); + @{property}: var(~"--su@{su-value}") !important; + } + }, + 1 2 3 4 5 6 7 8 9 10 11 12 + ); +} + // ============================================================================= // -- WEBKIT AUTOFILL // ----------------------------------------------------------------------------- diff --git a/packages/stacks-classic/lib/exports/spacing-mixins.less b/packages/stacks-classic/lib/exports/spacing-mixins.less deleted file mode 100644 index f79196c5c8..0000000000 --- a/packages/stacks-classic/lib/exports/spacing-mixins.less +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Generate base and responsive atomic spacing classes. - * - * 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). - * @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, @properties, @includeNegative: false, @type: px) { - & when (@type = px) { - #stacks-internals #build-classes( - responsive, - @prefix, - { .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) { - 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) { - each(@properties, #(@prop) { - @{prop}: @value !important; - }) - } }, - 50% 100% - ); - - & when (@includeNegative = true) { - #stacks-internals #build-classes( - responsive, - ~"@{prefix}n", - { .template(@value) { - each(@properties, #(@prop) { - @{prop}: -@value !important; - }) - } }, - 50% 100% - ); - } - } -} diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index 7c6b039bc0..f00ff682c6 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -63,7 +63,9 @@ @import "atomic/flex.less"; @import "atomic/gap.less"; @import "atomic/grid.less"; +@import "atomic/positioning.less"; @import "atomic/spacing.less"; +@import "atomic/sizing.less"; @import "atomic/typography.less"; @import "atomic/misc.less"; @import "atomic/width-height.less"; diff --git a/packages/stacks-docs/_data/atomics.json b/packages/stacks-docs/_data/atomics.json index b4ee3a7c22..8d74385583 100644 --- a/packages/stacks-docs/_data/atomics.json +++ b/packages/stacks-docs/_data/atomics.json @@ -298,6 +298,177 @@ "responsive": false } ], + "width-height": { + "percent": [ + { + "percentage": 10 + }, + { + "percentage": 20 + }, + { + "percentage": 25, + "responsive": true + }, + { + "percentage": 30 + }, + { + "percentage": 33, + "responsive": true + }, + { + "percentage": 40 + }, + { + "percentage": 50, + "responsive": true + }, + { + "percentage": 60 + }, + { + "percentage": 66 + }, + { + "percentage": 70 + }, + { + "percentage": 75, + "responsive": true + }, + { + "percentage": 80 + }, + { + "percentage": 90 + }, + { + "percentage": 100, + "responsive": true + } + ], + "px": [ + { + "rem": 0, + "px": 0 + }, + { + "rem": 0.063, + "px": 1 + }, + { + "rem": 0.125, + "px": 2 + }, + { + "rem": 0.25, + "px": 4 + }, + { + "rem": 0.375, + "px": 6 + }, + { + "rem": 0.5, + "px": 8 + }, + { + "rem": 0.75, + "px": 12 + }, + { + "rem": 1, + "px": 16 + }, + { + "rem": 1.5, + "px": 24 + }, + { + "rem": 2, + "px": 32 + }, + { + "rem": 3, + "px": 48 + }, + { + "rem": 4, + "px": 64 + }, + { + "rem": 6, + "px": 96 + }, + { + "rem": 8, + "px": 128 + } + ], + "sizing-units": [ + { + "level": 1, + "rem": 8, + "px": 128 + }, + { + "level": 2, + "rem": 16, + "px": 256 + }, + { + "level": 3, + "rem": 21.5, + "px": 344 + }, + { + "level": 4, + "rem": 28, + "px": 448 + }, + { + "level": 5, + "rem": 32, + "px": 512 + }, + { + "level": 6, + "rem": 40, + "px": 640 + }, + { + "level": 7, + "rem": 48, + "px": 768 + }, + { + "level": 8, + "rem": 53, + "px": 848 + }, + { + "level": 9, + "rem": 60, + "px": 960 + }, + { + "level": 10, + "rem": 64, + "px": 1024 + }, + { + "level": 11, + "rem": 70, + "px": 1120 + }, + { + "level": 12, + "rem": 80, + "px": 1280 + } + ] + }, "width": [ { "class": "w0", diff --git a/packages/stacks-docs/_data/spacing.json b/packages/stacks-docs/_data/width-height.json similarity index 61% rename from packages/stacks-docs/_data/spacing.json rename to packages/stacks-docs/_data/width-height.json index 357fe22241..42daced01f 100644 --- a/packages/stacks-docs/_data/spacing.json +++ b/packages/stacks-docs/_data/width-height.json @@ -1,4 +1,124 @@ { + "px": [ + { + "rem": 0, + "px": 0 + }, + { + "rem": 0.063, + "px": 1 + }, + { + "rem": 0.125, + "px": 2 + }, + { + "rem": 0.25, + "px": 4 + }, + { + "rem": 0.375, + "px": 6 + }, + { + "rem": 0.5, + "px": 8 + }, + { + "rem": 0.75, + "px": 12 + }, + { + "rem": 1, + "px": 16 + }, + { + "rem": 1.5, + "px": 24 + }, + { + "rem": 2, + "px": 32 + }, + { + "rem": 3, + "px": 48 + }, + { + "rem": 4, + "px": 64 + }, + { + "rem": 6, + "px": 96 + }, + { + "rem": 8, + "px": 128 + } + ], + "sizing-units": [ + { + "suffix": 1, + "rem": 8, + "px": 128 + }, + { + "suffix": 2, + "rem": 16, + "px": 256 + }, + { + "suffix": 3, + "rem": 21.5, + "px": 344 + }, + { + "suffix": 4, + "rem": 28, + "px": 448 + }, + { + "suffix": 5, + "rem": 32, + "px": 512 + }, + { + "suffix": 6, + "rem": 40, + "px": 640 + }, + { + "suffix": 7, + "rem": 48, + "px": 768 + }, + { + "suffix": 8, + "rem": 53, + "px": 848 + }, + { + "suffix": 9, + "rem": 60, + "px": 960 + }, + { + "suffix": 10, + "rem": 64, + "px": 1024 + }, + { + "suffix": 11, + "rem": 70, + "px": 1120 + }, + { + "suffix": 12, + "rem": 80, + "px": 1280 + } + ], "margin": { "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", "properties": "m, mt, mr, mb, ml, mx, my", diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index d096cc3d9d..933b786753 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -102,27 +102,27 @@ .toc { ol { .list-reset; - .d-flex; - .fd-column; + display: flex; + flex-direction: column; li { - .mb8; + margin-bottom: var(--su8); } li a { - .d-block; - .fs-body1; - .lh-sm; - .py2; + display: block; + font-size: var(--fs-body1); + line-height: var(--lh-sm); + padding-top: var(--su2); + padding-bottom: var(--su2); } ol { - .pt6; + padding-top: var(--su6); li { - .p2; - .pl12; - .mb0; + margin-bottom: var(--su0); + padding: var(--su2) var(--su2) var(--su2) var(--su12); } } } @@ -348,7 +348,7 @@ .ds-dropdown-menu { width: 100% !important; max-width: 100% !important; - min-width: calc(var(--s-step) * 3); + min-width: var(--su344); } .algolia-docsearch-footer { diff --git a/packages/stacks-docs/product/base/width-height.html b/packages/stacks-docs/product/base/width-height.html index b40e43e3db..c24c221473 100644 --- a/packages/stacks-docs/product/base/width-height.html +++ b/packages/stacks-docs/product/base/width-height.html @@ -1,39 +1,40 @@ --- layout: page title: Width & height -description: Stacks provides atomic sizing classes for percentage-based widths & heights, viewport-based widths & heights, static widths & heights, max-widths & heights, and min-widths & heights. +description: Stacks provides atomic sizing classes for widths & heights using percentage, rem, and viewport values. tags: base --- + + +
- {% header "h2", "Widths" %} - {% header "h3", "Width classes" %} -

Width classes are provided at each fixed stop of our pixel-based sizing scale.

+ {% header "h2", "Pixel width & height" %} + +

Pixel classes are…

- - - + + + + - {% for size in atomics.width %} - - - - - + {% for size in atomics.width-height.px %} + + + + + + {% endfor %}
ClassOutputResponsive?Width classHeight classComputed valuerem value
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
.w{{ size.px }}.h{{ size.px }}{{ size.px }}px;{{ size.rem }}rem
- {% header "h3", "Width examples" %} + {% header "h3", "Pixel width examples" %}
{% highlight html %}
…
@@ -49,92 +50,82 @@
…
…
{% endhighlight %} -
-
-
-
-
.w2
-
-
-
-
.w4
-
-
-
-
.w6
-
-
-
-
.w8
-
-
-
-
.w12
-
-
-
-
.w16
-
-
-
-
.w24
-
-
-
-
.w32
-
-
-
-
.w48
-
-
-
-
.w64
+
+ {% for size in atomics.width-height.px %} +
+
.w{{ size.px }}
+
-
-
-
.w96
-
-
-
-
.w128
+ {% endfor %} +
+
+ + {% header "h3", "Base height examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+ {% for size in atomics.width-height.px %} +
+
.h{{ size.px }}
+
-
+ {% endfor %}
- {% header "h2", "Fluid width" %} - {% header "h3", "Fluid width classes" %} + {% header "h2", "Percentage width & height" %} + +

Percentage classes are…

- - - + + + - {% for size in atomics.width-percentage %} + {% for size in atomics.width-height.percent %} + + + + + + {% endfor %} - - + + - {% endfor %} - +
ClassOutputResponsive?ClassValueResponsive?
.w{{ size.percentage }}width: {{ size.percentage }}% + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.{{ size.class }}{{ size.output }}.h100height: 100%; - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} + {% icon "Checkmark", "fc-green-400" %}
+
- {% header "h3", "Fluid width examples" %} + {% header "h3", "Percentage width examples" %}
{% highlight html %} -
…
…
…
…
@@ -143,124 +134,44 @@
…
…
…
+
…
…
…
…
…
…
-
…
{% endhighlight %} -
-
-
-
.w100
-
-
-
.w10
-
.w90
-
-
-
.w20
-
.w80
-
-
-
.w25
-
.w75
-
-
-
.w30
-
.w70
-
-
-
.w33
-
.w66
-
-
-
.w40
-
.w60
-
-
-
.w50
-
.w50
-
-
-
.w-screen
-
+
+
+ {% for size in atomics.width-height.percent %} +
+
+
.w{{ size.percentage }}
+
+
+ {% endfor %}
-
- -
- {% header "h2", "Static widths" %} -

Static widths are based on the full width of our 12-column grid. The grid is defined in rems, which are tied to the base font size. At the default font size, the full width is 1264px. A single column is approximately 105px.

-

At the smallest breakpoint, our font size is reduced, and these static widths are therefore also reduced.

- - {% header "h3", "Static width classes" %} -
- - - - - - - - - - {% for size in atomics.width-static %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
- {% header "h3", "Static width examples" %} + {% header "h3", "Percentage height examples" %}
{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
+
…
{% endhighlight %} -
-
-
.ws1
-
.ws2
-
.ws3
-
.ws4
-
.ws5
-
.ws6
-
.ws7
-
.ws8
-
.ws9
-
.ws10
-
.ws11
-
.ws12
+
+
+
+ .h100 +
+
- {% header "h2", "Max width" %} + {% header "h2", "Max width & height" %} {% header "h3", "Max width classes" %}
From dd9c2429dbc355dffa708df050957243963c2d06 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 12 Jan 2026 19:06:36 -0500 Subject: [PATCH 02/18] Cleanup, docs --- .../stacks-classic/lib/atomic/height.less | 20 + .../atomic/{width-height.less => width.less} | 19 +- .../stacks-classic/lib/stacks-static.less | 3 +- .../stacks-docs/_data/site-navigation.json | 10 +- packages/stacks-docs/netlify.toml | 4 + packages/stacks-docs/product/base/height.html | 192 ++++++ .../product/base/width-height.html | 553 ------------------ packages/stacks-docs/product/base/width.html | 206 +++++++ 8 files changed, 434 insertions(+), 573 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/height.less rename packages/stacks-classic/lib/atomic/{width-height.less => width.less} (57%) create mode 100644 packages/stacks-docs/product/base/height.html delete mode 100644 packages/stacks-docs/product/base/width-height.html create mode 100644 packages/stacks-docs/product/base/width.html diff --git a/packages/stacks-classic/lib/atomic/height.less b/packages/stacks-classic/lib/atomic/height.less new file mode 100644 index 0000000000..a7c6b1996a --- /dev/null +++ b/packages/stacks-classic/lib/atomic/height.less @@ -0,0 +1,20 @@ +@import (reference) "../exports/mixins.less"; + +// `height` properties +.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px'); +.generate-su-sizing('.hs', height); // Static sizing units +#stacks-internals #responsify('.h100', { height: 100% !important; }); +#stacks-internals #responsify('.h-auto', { height: auto !important; }); +#stacks-internals #responsify('.h-screen', { height: 100vh !important; }); + +// `max-height` properties +.generate-su-sizing('.hmx', max-height); // Static sizing units +#stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); +#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); +#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); + +// `min-height` properties +.generate-su-sizing('.hmn', min-height); // Static sizing units +#stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); +#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); +#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; }); diff --git a/packages/stacks-classic/lib/atomic/width-height.less b/packages/stacks-classic/lib/atomic/width.less similarity index 57% rename from packages/stacks-classic/lib/atomic/width-height.less rename to packages/stacks-classic/lib/atomic/width.less index 5ee80f92f3..229757e261 100644 --- a/packages/stacks-classic/lib/atomic/width-height.less +++ b/packages/stacks-classic/lib/atomic/width.less @@ -9,32 +9,17 @@ #stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; }); #stacks-internals #responsify('.w-auto', { width: auto !important; }); #stacks-internals #responsify('.w-screen', { width: 100vw !important; }); + // `max-width` properties .generate-su-sizing('.wmx', max-width); // Static sizing units .generate-sizing('.wmx', max-width, 25% 50% 75%, 'percent'); #stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); #stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); #stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); + // `min-width` properties .generate-su-sizing('.wmn', min-width); .generate-sizing('.wmn', min-width, 25% 50% 75%, 'percent'); #stacks-internals #responsify('.wmn100', { min-width: 100% !important; }); #stacks-internals #responsify('.wmn-initial', { min-width: initial !important; }); #stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; }); - -// `height` properties -.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px'); -.generate-su-sizing('.hs', height); // Static sizing units -#stacks-internals #responsify('.h100', { height: 100% !important; }); -#stacks-internals #responsify('.h-auto', { height: auto !important; }); -#stacks-internals #responsify('.h-screen', { height: 100vh !important; }); -// `max-height` properties -.generate-su-sizing('.hmx', max-height); // Static sizing units -#stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); -#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); -#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); -// `min-height` properties -.generate-su-sizing('.hmn', min-height); // Static sizing units -#stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); -#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); -#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; }); diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index f00ff682c6..ddb182b0f3 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -63,12 +63,13 @@ @import "atomic/flex.less"; @import "atomic/gap.less"; @import "atomic/grid.less"; +@import "atomic/height.less"; @import "atomic/positioning.less"; @import "atomic/spacing.less"; @import "atomic/sizing.less"; @import "atomic/typography.less"; @import "atomic/misc.less"; -@import "atomic/width-height.less"; +@import "atomic/width.less"; /* stylelint-disable */ #stacks-internals #screen-lg({ diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 02c7fd0121..b82c7664cd 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -114,6 +114,11 @@ "title": "Grid", "url": "/product/base/grid/" }, + { + "title": "Height", + "url": "/product/base/height/", + "new": true + }, { "title": "Interactivity", "url": "/product/base/interactivity/" @@ -163,8 +168,9 @@ "url": "/product/base/visibility/" }, { - "title": "Width & height", - "url": "/product/base/width-height/" + "title": "Width", + "url": "/product/base/width/", + "new": true }, { "title": "Z-index", diff --git a/packages/stacks-docs/netlify.toml b/packages/stacks-docs/netlify.toml index 381b350cad..de515e382e 100644 --- a/packages/stacks-docs/netlify.toml +++ b/packages/stacks-docs/netlify.toml @@ -297,3 +297,7 @@ [[redirects]] from = "/product/base/typography" to = "/product/foundation/typography" + +[[redirects]] + from = "/product/base/width-height" + to = "/product/base/width" diff --git a/packages/stacks-docs/product/base/height.html b/packages/stacks-docs/product/base/height.html new file mode 100644 index 0000000000..4fba8a738a --- /dev/null +++ b/packages/stacks-docs/product/base/height.html @@ -0,0 +1,192 @@ +--- +layout: page +title: Height +description: Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. +tags: base +--- + + + + +
+ {% header "h2", "Pixel height" %} +

Pixel height is…

+ + {% header "h3", "Pixel height classes" %} +
+
+ + + + + + + + + + {% for size in atomics.width-height.px %} + + + + + + + {% endfor %} + +
Height classComputed valuerem valueResponsive?
.h{{ size.px }}{{ size.px }}px;{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
+
+ + {% header "h3", "Base height examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+ {% for size in atomics.width-height.px %} +
+
.h{{ size.px }}
+
+
+ {% endfor %} +
+
+
+ + +
+ {% header "h2", "Sizing units height" %} + +

Sizing units height classes are…

+ + {% header "h3", "Sizing units height classes" %} +
+ + + + + + + + + + + {% for size in atomics.width-height.sizing-units %} + + + + + + + {% endfor %} + +
Height classComputed valuerem valueResponsive?
.hs{{ size.level }}{{ size.px }}px{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
+
+ + {% header "h3", "Sizing units height examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+
+ {% for size in atomics.width-height.sizing-units %} +
+
.hs{{ size.level }}
+
+ {% endfor %} +
+
+
+
+ + +
+ {% header "h2", "Other height classes" %} + +

Other height classes are…

+ + {% header "h3", "Other height classes" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassValueResponsive?
.h100height: 100%; + {% icon "Checkmark", "fc-green-400" %} +
.h-screenheight: 100vh; + {% icon "Checkmark", "fc-green-400" %} +
.h-autoheight: auto; + {% icon "Checkmark", "fc-green-400" %} +
+
+ + {% header "h3", "Other height examples" %} +
+{% highlight html %} +
…
+{% endhighlight %} +
+
+
+
+ .h100 +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/packages/stacks-docs/product/base/width-height.html b/packages/stacks-docs/product/base/width-height.html deleted file mode 100644 index c24c221473..0000000000 --- a/packages/stacks-docs/product/base/width-height.html +++ /dev/null @@ -1,553 +0,0 @@ ---- -layout: page -title: Width & height -description: Stacks provides atomic sizing classes for widths & heights using percentage, rem, and viewport values. -tags: base ---- - - - -
- {% header "h2", "Pixel width & height" %} - -

Pixel classes are…

-
- - - - - - - - - - - {% for size in atomics.width-height.px %} - - - - - - - {% endfor %} - -
Width classHeight classComputed valuerem value
.w{{ size.px }}.h{{ size.px }}{{ size.px }}px;{{ size.rem }}rem
-
- - {% header "h3", "Pixel width examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
- {% for size in atomics.width-height.px %} -
-
.w{{ size.px }}
-
-
- {% endfor %} -
-
- - {% header "h3", "Base height examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
- {% for size in atomics.width-height.px %} -
-
.h{{ size.px }}
-
-
- {% endfor %} -
-
-
- -
- {% header "h2", "Percentage width & height" %} - -

Percentage classes are…

-
- - - - - - - - - - {% for size in atomics.width-height.percent %} - - - - - - {% endfor %} - - - - - - -
ClassValueResponsive?
.w{{ size.percentage }}width: {{ size.percentage }}% - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
.h100height: 100%; - {% icon "Checkmark", "fc-green-400" %} -
-
- - {% header "h3", "Percentage width examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
-
- {% for size in atomics.width-height.percent %} -
-
-
.w{{ size.percentage }}
-
-
- {% endfor %} -
-
-
- - {% header "h3", "Percentage height examples" %} -
-{% highlight html %} -
…
-{% endhighlight %} -
-
-
- .h100 -
-
-
-
-
- - -
- {% header "h2", "Max width & height" %} - {% header "h3", "Max width classes" %} -
- - - - - - - - - - {% for size in atomics.width-max %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
- - {% header "h3", "Max width examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
-
-
.wmx1
-
.wmx2
-
.wmx25
-
.wmx3
-
.wmx4
-
.wmx5
-
.wmx50
-
.wmx6
-
.wmx7
-
.wmx75
-
.wmx8
-
.wmx9
-
.wmx10
-
.wmx11
-
.wmx12
-
.wmx-screen
-
-
-
-
- -
- {% header "h2", "Min width" %} - {% header "h3", "Min width classes" %} -
- - - - - - - - - - {% for size in atomics.width-min %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
- - {% header "h3", "Min width examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
-
-
.wmn0
-
.wmn1
-
.wmn2
-
.wmn25
-
.wmn3
-
.wmn4
-
.wmn5
-
.wmn50
-
.wmn6
-
.wmn7
-
.wmn75
-
.wmn8
-
.wmn9
-
.wmn10
-
.wmn11
-
.wmn12
-
-
-
-
- -
- {% header "h2", "Height" %} - {% header "h3", "Height classes" %} -

Height classes are provided at each fixed stop of our sizing scale.

-
- - - - - - - - - - {% for size in atomics.height %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
- - {% header "h3", "Height examples" %} -
-{% highlight html %} -
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-
…
-{% endhighlight %} -
-
-
-
-
.h2
-
-
-
-
-
-
.h4
-
-
-
-
-
-
.h6
-
-
-
-
-
-
.h8
-
-
-
-
-
-
.h12
-
-
-
-
-
-
.h16
-
-
-
-
-
-
.h24
-
-
-
-
-
-
.h32
-
-
-
-
-
-
.h48
-
-
-
-
-
-
.h64
-
-
-
-
-
-
.h96
-
-
-
-
-
-
.h128
-
-
-
-
-
-
-
- -
- {% header "h2", "Static Height" %} - {% header "h3", "Static height classes" %} -
- - - - - - - - - - {% for size in atomics.height-static %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
- - {% header "h3", "Fluid height classes" %} -
- - - - - - - - - - {% for size in atomics.height-percentage %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
-
- -
- {% header "h2", "Min height" %} - {% header "h3", "Min height classes" %} -
- - - - - - - - - - {% for size in atomics.height-min %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
-
- -
- {% header "h2", "Max height" %} - {% header "h3", "Max height classes" %} -
- - - - - - - - - - {% for size in atomics.height-max %} - - - - - - {% endfor %} - -
ClassOutputResponsive?
.{{ size.class }}{{ size.output }} - {% if size.responsive %} - {% icon "Checkmark", "fc-green-400" %} - {% endif %} -
-
diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html new file mode 100644 index 0000000000..e4266169ca --- /dev/null +++ b/packages/stacks-docs/product/base/width.html @@ -0,0 +1,206 @@ +--- +layout: page +title: Width +description: Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. +tags: base +--- + + + + +
+ {% header "h2", "Pixel width" %} + +

Pixel width classes are…

+ + {% header "h3", "Pixel width classes" %} +
+ + + + + + + + + + + {% for size in atomics.width-height.px %} + + + + + + + {% endfor %} + +
Width classComputed valuerem valueResponsive?
.w{{ size.px }}{{ size.px }}px{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
+
+ + {% header "h3", "Pixel width examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+ {% for size in atomics.width-height.px %} +
+
.w{{ size.px }}
+
+
+ {% endfor %} +
+
+
+ + +
+ {% header "h2", "Sizing units width" %} + +

Sizing units width classes are…

+ + {% header "h3", "Sizing units width classes" %} +
+ + + + + + + + + + + {% for size in atomics.width-height.sizing-units %} + + + + + + + {% endfor %} + +
Width classComputed valuerem valueResponsive?
.ws{{ size.level }}{{ size.px }}px{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
+
+ + {% header "h3", "Sizing units width examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+ {% for size in atomics.width-height.sizing-units %} +
+
.ws{{ size.level }}
+
+ {% endfor %} +
+
+
+ + +
+ {% header "h2", "Percentage width" %} + +

Percentage width is…

+ + {% header "h3", "Percentage width classes" %} +
+ + + + + + + + + + {% for size in atomics.width-height.percent %} + + + + + + {% endfor %} + + + + + + +
ClassValueResponsive?
.w{{ size.percentage }}width: {{ size.percentage }}% + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.h100height: 100%; + {% icon "Checkmark", "fc-green-400" %} +
+
+ + {% header "h3", "Percentage width examples" %} +
+{% highlight html %} +
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+{% endhighlight %} +
+
+ {% for size in atomics.width-height.percent %} +
+
+
.w{{ size.percentage }}
+
+
+ {% endfor %} +
+
+
+
+ + + + + + \ No newline at end of file From 9bcc1f66b1afb680b73af49941b3ea20afa49700 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 11:43:23 -0500 Subject: [PATCH 03/18] Improve docs; tweak height/width classes --- .../stacks-classic/lib/atomic/height.less | 13 +- packages/stacks-classic/lib/atomic/width.less | 15 +- packages/stacks-docs/_data/atomics.json | 711 +----------------- .../_data/{width-height.json => spacing.json} | 120 --- packages/stacks-docs/product/base/height.html | 164 +++- packages/stacks-docs/product/base/width.html | 207 ++++- 6 files changed, 336 insertions(+), 894 deletions(-) rename packages/stacks-docs/_data/{width-height.json => spacing.json} (61%) diff --git a/packages/stacks-classic/lib/atomic/height.less b/packages/stacks-classic/lib/atomic/height.less index a7c6b1996a..23cb79545a 100644 --- a/packages/stacks-classic/lib/atomic/height.less +++ b/packages/stacks-classic/lib/atomic/height.less @@ -7,14 +7,15 @@ #stacks-internals #responsify('.h-auto', { height: auto !important; }); #stacks-internals #responsify('.h-screen', { height: 100vh !important; }); -// `max-height` properties -.generate-su-sizing('.hmx', max-height); // Static sizing units -#stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); -#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); -#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); - // `min-height` properties .generate-su-sizing('.hmn', min-height); // Static sizing units +.generate-sizing('.hmn', min-height, 0, 'px'); #stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); #stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); #stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; }); + +// `max-height` properties +.generate-su-sizing('.hmx', max-height); // Static sizing units +#stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); +#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); +#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); diff --git a/packages/stacks-classic/lib/atomic/width.less b/packages/stacks-classic/lib/atomic/width.less index 229757e261..31e0d28ef9 100644 --- a/packages/stacks-classic/lib/atomic/width.less +++ b/packages/stacks-classic/lib/atomic/width.less @@ -10,16 +10,17 @@ #stacks-internals #responsify('.w-auto', { width: auto !important; }); #stacks-internals #responsify('.w-screen', { width: 100vw !important; }); -// `max-width` properties -.generate-su-sizing('.wmx', max-width); // Static sizing units -.generate-sizing('.wmx', max-width, 25% 50% 75%, 'percent'); -#stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); -#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); -#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); - // `min-width` properties .generate-su-sizing('.wmn', min-width); +.generate-sizing('.wmn', min-width, 0, 'px'); .generate-sizing('.wmn', min-width, 25% 50% 75%, 'percent'); #stacks-internals #responsify('.wmn100', { min-width: 100% !important; }); #stacks-internals #responsify('.wmn-initial', { min-width: initial !important; }); #stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; }); + +// `max-width` properties +.generate-su-sizing('.wmx', max-width); // Static sizing units +.generate-sizing('.wmx', max-width, 25% 50% 75%, 'percent'); +#stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); +#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); +#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); diff --git a/packages/stacks-docs/_data/atomics.json b/packages/stacks-docs/_data/atomics.json index 8d74385583..e8057d2324 100644 --- a/packages/stacks-docs/_data/atomics.json +++ b/packages/stacks-docs/_data/atomics.json @@ -298,7 +298,7 @@ "responsive": false } ], - "width-height": { + "sizing": { "percent": [ { "percentage": 10 @@ -469,715 +469,6 @@ } ] }, - "width": [ - { - "class": "w0", - "output": "width: 0;", - "responsive": false - }, - { - "class": "w2", - "output": "width: 2px;", - "responsive": false - }, - { - "class": "w4", - "output": "width: 4px;", - "responsive": false - }, - { - "class": "w6", - "output": "width: 6px;", - "responsive": false - }, - { - "class": "w8", - "output": "width: 8px;", - "responsive": false - }, - { - "class": "w12", - "output": "width: 12px;", - "responsive": false - }, - { - "class": "w16", - "output": "width: 16px;", - "responsive": false - }, - { - "class": "w24", - "output": "width: 24px;", - "responsive": false - }, - { - "class": "w32", - "output": "width: 32px;", - "responsive": false - }, - { - "class": "w48", - "output": "width: 48px;", - "responsive": false - }, - { - "class": "w64", - "output": "width: 64px;", - "responsive": false - }, - { - "class": "w96", - "output": "width: 96px;", - "responsive": false - }, - { - "class": "w128", - "output": "width: 128px;", - "responsive": false - } - ], - "width-percentage": [ - { - "class": "w-auto", - "output": "width: auto;", - "responsive": true - }, - { - "class": "w0", - "output": "width: 0;", - "responsive": false - }, - { - "class": "w10", - "output": "width: 10%;", - "responsive": false - }, - { - "class": "w20", - "output": "width: 20%;", - "responsive": false - }, - { - "class": "w25", - "output": "width: 25%;", - "responsive": true - }, - { - "class": "w30", - "output": "width: 30%;", - "responsive": false - }, - { - "class": "w33", - "output": "width: 33.33%;", - "responsive": true - }, - { - "class": "w40", - "output": "width: 40%", - "responsive": false - }, - { - "class": "w50", - "output": "width: 50%;", - "responsive": true - }, - { - "class": "w60", - "output": "width: 60%;", - "responsive": false - }, - { - "class": "w66", - "output": "width: 66.67%;", - "responsive": true - }, - { - "class": "w70", - "output": "width: 70%;", - "responsive": false - }, - { - "class": "w75", - "output": "width: 75%;", - "responsive": true - }, - { - "class": "w80", - "output": "width: 80%;", - "responsive": false - }, - { - "class": "w90", - "output": "width: 90%;", - "responsive": false - }, - { - "class": "w100", - "output": "width: 100%;", - "responsive": true - }, - { - "class": "w-screen", - "output": "width: 100vw;", - "responsive": true - } - ], - "width-static": [ - { - "class": "ws1", - "output": "width: 105px;", - "responsive": false - }, - { - "class": "ws2", - "output": "width: 211px;", - "responsive": false - }, - { - "class": "ws3", - "output": "width: 316px;", - "responsive": false - }, - { - "class": "ws4", - "output": "width: 421px;", - "responsive": false - }, - { - "class": "ws5", - "output": "width: 527px;", - "responsive": false - }, - { - "class": "ws6", - "output": "width: 632px;", - "responsive": false - }, - { - "class": "ws7", - "output": "width: 737px;", - "responsive": false - }, - { - "class": "ws8", - "output": "width: 843px;", - "responsive": false - }, - { - "class": "ws9", - "output": "width: 948px;", - "responsive": false - }, - { - "class": "ws10", - "output": "width: 1053px;", - "responsive": false - }, - { - "class": "ws11", - "output": "width: 1159px;", - "responsive": false - }, - { - "class": "ws12", - "output": "width: 1264px;", - "responsive": false - } - ], - "width-max": [ - { - "class": "wmx-initial", - "output": "max-width: initial;", - "responsive": true - }, - { - "class": "wmx1", - "output": "max-width: 105px;", - "responsive": false - }, - { - "class": "wmx2", - "output": "max-width: 211px;", - "responsive": false - }, - { - "class": "wmx25", - "output": "max-width: 25%;", - "responsive": false - }, - { - "class": "wmx3", - "output": "max-width: 316px;", - "responsive": false - }, - { - "class": "wmx4", - "output": "max-width: 421px;", - "responsive": false - }, - { - "class": "wmx5", - "output": "max-width: 527px;", - "responsive": false - }, - { - "class": "wmx50", - "output": "max-width: 50%;", - "responsive": false - }, - { - "class": "wmx6", - "output": "max-width: 632px;", - "responsive": false - }, - { - "class": "wmx7", - "output": "max-width: 737px;", - "responsive": false - }, - { - "class": "wmx8", - "output": "max-width: 843px;", - "responsive": false - }, - { - "class": "wmx75", - "output": "max-width: 75%;", - "responsive": false - }, - { - "class": "wmx9", - "output": "max-width: 948px;", - "responsive": false - }, - { - "class": "wmx10", - "output": "max-width: 1053px;", - "responsive": false - }, - { - "class": "wmx11", - "output": "max-width: 1159px;", - "responsive": false - }, - { - "class": "wmx12", - "output": "max-width: 1264px;", - "responsive": false - }, - { - "class": "wmx100", - "output": "max-width: 100%;", - "responsive": true - }, - { - "class": "wmx-screen", - "output": "max-width: 100vw;", - "responsive": true - } - ], - "width-min": [ - { - "class": "wmn-initial", - "output": "min-width: initial;", - "responsive": true - }, - { - "class": "wmn0", - "output": "min-width: 0;", - "responsive": false - }, - { - "class": "wmn1", - "output": "min-width: 105px;", - "responsive": false - }, - { - "class": "wmn2", - "output": "min-width: 211px;", - "responsive": false - }, - { - "class": "wmn25", - "output": "min-width: 25%;", - "responsive": false - }, - { - "class": "wmn3", - "output": "min-width: 316px;", - "responsive": false - }, - { - "class": "wmn4", - "output": "min-width: 421px;", - "responsive": false - }, - { - "class": "wmn5", - "output": "min-width: 527px;", - "responsive": false - }, - { - "class": "wmn50", - "output": "min-width: 50%;", - "responsive": false - }, - { - "class": "wmn6", - "output": "min-width: 632px;", - "responsive": false - }, - { - "class": "wmn7", - "output": "min-width: 737px;", - "responsive": false - }, - { - "class": "wmn75", - "output": "min-width: 75%;", - "responsive": false - }, - { - "class": "wmn8", - "output": "min-width: 843px;", - "responsive": false - }, - { - "class": "wmn9", - "output": "min-width: 948px;", - "responsive": false - }, - { - "class": "wmn10", - "output": "min-width: 1053px;", - "responsive": false - }, - { - "class": "wmn11", - "output": "min-width: 1159px;", - "responsive": false - }, - { - "class": "wmn12", - "output": "min-width: 1264px;", - "responsive": false - }, - { - "class": "wmn100", - "output": "min-width: 100%;", - "responsive": true - } - ], - "height-percentage": [ - { - "class": "h-auto", - "output": "height: auto;", - "responsive": true - }, - { - "class": "h0", - "output": "height: 0;" - }, - { - "class": "h100", - "output": "height: 100%;", - "responsive": true - }, - { - "class": "h-screen", - "output": "height: 100vh;", - "responsive": true - } - ], - "height-static": [ - { - "class": "hs1", - "output": "height: 105px;", - "responsive": false - }, - { - "class": "hs2", - "output": "height: 211px;", - "responsive": false - }, - { - "class": "hs3", - "output": "height: 316px;", - "responsive": false - }, - { - "class": "hs4", - "output": "height: 421px;", - "responsive": false - }, - { - "class": "hs5", - "output": "height: 527px;", - "responsive": false - }, - { - "class": "hs6", - "output": "height: 632px;", - "responsive": false - }, - { - "class": "hs7", - "output": "height: 737px;", - "responsive": false - }, - { - "class": "hs8", - "output": "height: 843px;", - "responsive": false - }, - { - "class": "hs9", - "output": "height: 948px;", - "responsive": false - }, - { - "class": "hs10", - "output": "height: 1053px;", - "responsive": false - }, - { - "class": "hs11", - "output": "height: 1159px;", - "responsive": false - }, - { - "class": "hs12", - "output": "height: 1264px;", - "responsive": false - } - ], - "height": [ - { - "class": "h0", - "output": "height: 0;", - "responsive": false - }, - { - "class": "h2", - "output": "height: 2px;", - "responsive": false - }, - { - "class": "h4", - "output": "height: 4px;", - "responsive": false - }, - { - "class": "h6", - "output": "height: 6px;", - "responsive": false - }, - { - "class": "h8", - "output": "height: 8px;", - "responsive": false - }, - { - "class": "h12", - "output": "height: 12px;", - "responsive": false - }, - { - "class": "h16", - "output": "height: 16px;", - "responsive": false - }, - { - "class": "h24", - "output": "height: 24px;", - "responsive": false - }, - { - "class": "h32", - "output": "height: 32px;", - "responsive": false - }, - { - "class": "h48", - "output": "height: 48px;", - "responsive": false - }, - { - "class": "h64", - "output": "height: 64px;", - "responsive": false - }, - { - "class": "h96", - "output": "height: 96px;", - "responsive": false - }, - { - "class": "h128", - "output": "height: 128px;", - "responsive": false - } - ], - "height-max": [ - { - "class": "hmx-initial", - "output": "max-height: initial;", - "responsive": true - }, - { - "class": "hmx1", - "output": "max-height: 105px;", - "responsive": false - }, - { - "class": "hmx2", - "output": "max-height: 211px;", - "responsive": false - }, - { - "class": "hmx3", - "output": "max-height: 316px;", - "responsive": false - }, - { - "class": "hmx4", - "output": "max-height: 421px;", - "responsive": false - }, - { - "class": "hmx5", - "output": "max-height: 527px;", - "responsive": false - }, - { - "class": "hmx6", - "output": "max-height: 632px;", - "responsive": false - }, - { - "class": "hmx7", - "output": "max-height: 737px;", - "responsive": false - }, - { - "class": "hmx8", - "output": "max-height: 843px;", - "responsive": false - }, - { - "class": "hmx9", - "output": "max-height: 948px;", - "responsive": false - }, - { - "class": "hmx10", - "output": "max-height: 1053px;", - "responsive": false - }, - { - "class": "hmx11", - "output": "max-height: 1159px;", - "responsive": false - }, - { - "class": "hmx12", - "output": "max-height: 1264px;", - "responsive": false - }, - { - "class": "hmx100", - "output": "max-height: 100%;", - "responsive": true - }, - { - "class": "hmx-screen", - "output": "max-height: 100vh;", - "responsive": true - } - ], - "height-min": [ - { - "class": "hmn-initial", - "output": "min-height: initial;", - "responsive": true - }, - { - "class": "hmn0", - "output": "min-height: 0;", - "responsive": false - }, - { - "class": "hmn1", - "output": "min-height: 105px;", - "responsive": false - }, - { - "class": "hmn2", - "output": "min-height: 211px;", - "responsive": false - }, - { - "class": "hmn3", - "output": "min-height: 316px;", - "responsive": false - }, - { - "class": "hmn4", - "output": "min-height: 421px;", - "responsive": false - }, - { - "class": "hmn5", - "output": "min-height: 527px;", - "responsive": false - }, - { - "class": "hmn6", - "output": "min-height: 632px;", - "responsive": false - }, - { - "class": "hmn7", - "output": "min-height: 737px;", - "responsive": false - }, - { - "class": "hmn8", - "output": "min-height: 843px;", - "responsive": false - }, - { - "class": "hmn9", - "output": "min-height: 948px;", - "responsive": false - }, - { - "class": "hmn10", - "output": "min-height: 1053px;", - "responsive": false - }, - { - "class": "hmn11", - "output": "min-height: 1159px;", - "responsive": false - }, - { - "class": "hmn12", - "output": "min-height: 1264px;", - "responsive": false - }, - { - "class": "hmn100", - "output": "min-height: 100%;", - "responsive": true - }, - { - "class": "hmn-screen", - "output": "min-height: 100vh;", - "responsive": true - } - ], "opacity": [ { "class": "o0", diff --git a/packages/stacks-docs/_data/width-height.json b/packages/stacks-docs/_data/spacing.json similarity index 61% rename from packages/stacks-docs/_data/width-height.json rename to packages/stacks-docs/_data/spacing.json index 42daced01f..357fe22241 100644 --- a/packages/stacks-docs/_data/width-height.json +++ b/packages/stacks-docs/_data/spacing.json @@ -1,124 +1,4 @@ { - "px": [ - { - "rem": 0, - "px": 0 - }, - { - "rem": 0.063, - "px": 1 - }, - { - "rem": 0.125, - "px": 2 - }, - { - "rem": 0.25, - "px": 4 - }, - { - "rem": 0.375, - "px": 6 - }, - { - "rem": 0.5, - "px": 8 - }, - { - "rem": 0.75, - "px": 12 - }, - { - "rem": 1, - "px": 16 - }, - { - "rem": 1.5, - "px": 24 - }, - { - "rem": 2, - "px": 32 - }, - { - "rem": 3, - "px": 48 - }, - { - "rem": 4, - "px": 64 - }, - { - "rem": 6, - "px": 96 - }, - { - "rem": 8, - "px": 128 - } - ], - "sizing-units": [ - { - "suffix": 1, - "rem": 8, - "px": 128 - }, - { - "suffix": 2, - "rem": 16, - "px": 256 - }, - { - "suffix": 3, - "rem": 21.5, - "px": 344 - }, - { - "suffix": 4, - "rem": 28, - "px": 448 - }, - { - "suffix": 5, - "rem": 32, - "px": 512 - }, - { - "suffix": 6, - "rem": 40, - "px": 640 - }, - { - "suffix": 7, - "rem": 48, - "px": 768 - }, - { - "suffix": 8, - "rem": 53, - "px": 848 - }, - { - "suffix": 9, - "rem": 60, - "px": 960 - }, - { - "suffix": 10, - "rem": 64, - "px": 1024 - }, - { - "suffix": 11, - "rem": 70, - "px": 1120 - }, - { - "suffix": 12, - "rem": 80, - "px": 1280 - } - ], "margin": { "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", "properties": "m, mt, mr, mb, ml, mx, my", diff --git a/packages/stacks-docs/product/base/height.html b/packages/stacks-docs/product/base/height.html index 4fba8a738a..f26dd517fd 100644 --- a/packages/stacks-docs/product/base/height.html +++ b/packages/stacks-docs/product/base/height.html @@ -1,12 +1,9 @@ --- layout: page title: Height -description: Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. +description: Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. Most height classes are based on a 16px base font size and will scale based on the browser's font size. tags: base --- - - -
{% header "h2", "Pixel height" %} @@ -17,17 +14,17 @@ - + - + - {% for size in atomics.width-height.px %} + {% for size in atomics.sizing.px %} - +
Height classClass Computed value rem valueResponsive?Responsive?
.h{{ size.px }}{{ size.px }}px;height: {{ size.px }}px; {{ size.rem }}rem {% if size.responsive %} @@ -57,7 +54,7 @@
…
{% endhighlight %}
- {% for size in atomics.width-height.px %} + {% for size in atomics.sizing.px %}
.h{{ size.px }}
@@ -78,17 +75,17 @@ - + - + - {% for size in atomics.width-height.sizing-units %} + {% for size in atomics.sizing.sizing-units %} - +
Height classClass Computed value rem valueResponsive?Responsive?
.hs{{ size.level }}{{ size.px }}pxheight: {{ size.px }}px; {{ size.rem }}rem {% if size.responsive %} @@ -119,7 +116,7 @@ {% endhighlight %}
- {% for size in atomics.width-height.sizing-units %} + {% for size in atomics.sizing.sizing-units %}
.hs{{ size.level }}
@@ -129,18 +126,18 @@
- +
- {% header "h2", "Other height classes" %} + {% header "h2", "Fluid height" %} -

Other height classes are…

+

Fluid height classes are…

- {% header "h3", "Other height classes" %} + {% header "h3", "Fluid height classes" %}
- + @@ -171,7 +168,7 @@
ClassClass Value Responsive?
- {% header "h3", "Other height examples" %} + {% header "h3", "Fluid height examples" %}
{% highlight html %}
…
@@ -188,5 +185,128 @@
- - \ No newline at end of file + +
+ {% header "h2", "Min height" %} + +

Min height classes are…

+ + {% header "h3", "Min height classes" %} +
+ + + + + + + + + + + + + + + + + {% for size in atomics.sizing.sizing-units %} + + + + + + + {% endfor %} + + + + + + + + + + + + + + + + + + + +
ClassComputed valuerem valueResponsive?
.hmn0min-height: 0;- + {% icon "Checkmark", "fc-green-400" %} +
.hmn{{ size.level }}min-height: {{ size.px }}px;{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.hmn100min-height: 100%;- + {% icon "Checkmark", "fc-green-400" %} +
.hmn-screenmin-height: 100vh;- + {% icon "Checkmark", "fc-green-400" %} +
.hmn-initialmin-height: initial;- + {% icon "Checkmark", "fc-green-400" %} +
+
+
+ + +
+ {% header "h2", "Max height" %} + +

Max height classes are…

+ + {% header "h3", "Max height classes" %} +
+ + + + + + + + + + + {% for size in atomics.sizing.sizing-units %} + + + + + + + {% endfor %} + + + + + + + + + + + + + + + + + + + +
ClassComputed valuerem valueResponsive?
.hmx{{ size.level }}max-height: {{ size.px }}px;{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.hmx100max-height: 100%;- + {% icon "Checkmark", "fc-green-400" %} +
.hmx-screenmax-height: 100vh;- + {% icon "Checkmark", "fc-green-400" %} +
.hmx-initialmax-height: initial;- + {% icon "Checkmark", "fc-green-400" %} +
+
+
diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html index e4266169ca..7e725c287f 100644 --- a/packages/stacks-docs/product/base/width.html +++ b/packages/stacks-docs/product/base/width.html @@ -1,12 +1,9 @@ --- layout: page title: Width -description: Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. +description: Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. Most width classes are based on a 16px base font size and will scale based on the browser's font size. tags: base --- - - -
{% header "h2", "Pixel width" %} @@ -18,17 +15,17 @@ - + - + - {% for size in atomics.width-height.px %} + {% for size in atomics.sizing.px %} - +
Width classClass Computed value rem valueResponsive?Responsive?
.w{{ size.px }}{{ size.px }}pxwidth: {{ size.px }}px; {{ size.rem }}rem {% if size.responsive %} @@ -44,6 +41,8 @@ {% header "h3", "Pixel width examples" %}
{% highlight html %} +
…
+
…
…
…
…
@@ -58,7 +57,7 @@
…
{% endhighlight %}
- {% for size in atomics.width-height.px %} + {% for size in atomics.sizing.px %}
.w{{ size.px }}
@@ -79,17 +78,17 @@ - + - + - {% for size in atomics.width-height.sizing-units %} + {% for size in atomics.sizing.sizing-units %} - + - - - - - - {% for size in atomics.sizing.sizing-units %} From 0ecf181ab235f31200d28aaa44967bdf6167e52a Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 15:17:03 -0500 Subject: [PATCH 07/18] Changeset --- .changeset/loose-bees-accept.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/loose-bees-accept.md diff --git a/.changeset/loose-bees-accept.md b/.changeset/loose-bees-accept.md new file mode 100644 index 0000000000..8457e8ac33 --- /dev/null +++ b/.changeset/loose-bees-accept.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks": patch +--- + +Updated size scale plus many under-the-hood improvements From 318eb10b105bf8a4a6aa9277a7eba59a72096957 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 15:25:56 -0500 Subject: [PATCH 08/18] Update documentation --- packages/stacks-classic/lib/exports/mixins.less | 10 ++++++---- packages/stacks-docs/product/base/height.html | 14 +++++--------- packages/stacks-docs/product/base/width.html | 15 +++++---------- 3 files changed, 16 insertions(+), 23 deletions(-) diff --git a/packages/stacks-classic/lib/exports/mixins.less b/packages/stacks-classic/lib/exports/mixins.less index 9b43de7ebe..d0d9f492b3 100644 --- a/packages/stacks-classic/lib/exports/mixins.less +++ b/packages/stacks-classic/lib/exports/mixins.less @@ -277,10 +277,12 @@ * .generate-sizing('.mx'; margin-left, margin-right; true); * .generate-sizing('.pr', padding-right); * - * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, 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. + * @param {string} prefix - What prefix to generate (e.g. `.m`, `.pr`, etc). + * @param {string|list} properties - What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc). + * @param {list} values - List of values to generate classes for. + * @param {string} [type='px'] - What set of values to generate. Options: `px` | `percent`. + * @param {boolean} [responsive=false] - Whether to generate responsive variants. + * @param {boolean} [negative=false] - Whether to generate negative value classes. */ .generate-sizing(@prefix, @properties, @values, @type: 'px', @responsive: false, @negative: false) { #stacks-internals #build-classes( diff --git a/packages/stacks-docs/product/base/height.html b/packages/stacks-docs/product/base/height.html index f26dd517fd..5bde24ab45 100644 --- a/packages/stacks-docs/product/base/height.html +++ b/packages/stacks-docs/product/base/height.html @@ -7,7 +7,7 @@
{% header "h2", "Pixel height" %} -

Pixel height is…

+

Pixel height classes allow you to set the height of an element to a specific pixel value.

{% header "h3", "Pixel height classes" %}
@@ -67,8 +67,7 @@
{% header "h2", "Sizing units height" %} - -

Sizing units height classes are…

+

Sizing units height classes allow you to set the height of an element according to a predefined set of 12 common values in used in Stacks.

{% header "h3", "Sizing units height classes" %}
@@ -129,8 +128,7 @@
{% header "h2", "Fluid height" %} - -

Fluid height classes are…

+

Fluid height classes allow you to set the height of an element to a percentage of the parent element's height or to the full height of the viewport.

{% header "h3", "Fluid height classes" %}
@@ -188,8 +186,7 @@
{% header "h2", "Min height" %} - -

Min height classes are…

+

Min height classes allow you to set the minimum height of an element.

{% header "h3", "Min height classes" %}
@@ -255,8 +252,7 @@
{% header "h2", "Max height" %} - -

Max height classes are…

+

Max height classes allow you to set the maximum height of an element.

{% header "h3", "Max height classes" %}
diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html index 7d1d032b34..5ac5929e5b 100644 --- a/packages/stacks-docs/product/base/width.html +++ b/packages/stacks-docs/product/base/width.html @@ -7,8 +7,7 @@
{% header "h2", "Pixel width" %} - -

Pixel width classes are…

+

Pixel width classes allow you to set the width of an element to a specific pixel value.

{% header "h3", "Pixel width classes" %}
@@ -70,8 +69,7 @@
{% header "h2", "Sizing units width" %} - -

Sizing units width classes are…

+

Sizing units width classes allow you to set the width of an element according to a predefined set of 12 common values in used in Stacks.

{% header "h3", "Sizing units width classes" %}
@@ -130,8 +128,7 @@
{% header "h2", "Fluid width" %} - -

Fluid width classes are…

+

Fluid width classes allow you to set the width of an element to a percentage of the parent element's width or to the full width of the viewport.

{% header "h3", "Fluid width classes" %}
@@ -208,8 +205,7 @@
{% header "h2", "Min width" %} - -

Min width classes are…

+

Min width classes allow you to set the minimum width of an element.

{% header "h3", "Min width classes" %}
@@ -282,8 +278,7 @@
{% header "h2", "Max width" %} - -

Max width classes are…

+

Max width classes allow you to set the maximum width of an element.

{% header "h3", "Max width classes" %}
From 8140f38c14378235f22bc659c83d86c7ff822266 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 15:33:29 -0500 Subject: [PATCH 09/18] Update failing visual regression image --- .../baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico index 477bc708c6..425e37a571 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a69053742d0c7c698abec6224de052821500f87ce75b9f341ccd9749e064cba4 -size 10578 +oid sha256:d2dd5799ab277389bc3a1d0ad6cb25eb60adedf963e5f9df47ea81b772a19336 +size 10603 From 1278bf95e32004eeff914366e398fd879f488fb9 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 15:48:57 -0500 Subject: [PATCH 10/18] Update topbar image again --- .../baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico index c6e4fcb5d2..9c935aa5c0 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-topbar-highcontrast-dark-dark-variant-alt.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c74847f53e23f907f90b8c54f69354866b6df0d2c5e1faf3f28adeb5f3714d79 -size 9029 +oid sha256:e8fd09eb35f4cb8fcfbc43914b2bb020c299b0e2c99dbe9562ff621cea83569d +size 9049 From 29e9c032852fde8d1f2755ff3e7131b71ceabdee Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 17:12:37 -0500 Subject: [PATCH 11/18] minor improvement --- packages/stacks-classic/lib/atomic/flex.less.test.ts | 12 ++++++++++++ packages/stacks-classic/lib/atomic/spacing.less | 7 +++++++ .../components/sidebar-widget/sidebar-widget.less | 2 +- .../assets/less/stacks-documentation.less | 4 ---- 4 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/flex.less.test.ts diff --git a/packages/stacks-classic/lib/atomic/flex.less.test.ts b/packages/stacks-classic/lib/atomic/flex.less.test.ts new file mode 100644 index 0000000000..aaae343158 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/flex.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: flex", () => { + it("should output all atomic flex css classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/flex.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/spacing.less b/packages/stacks-classic/lib/atomic/spacing.less index 3e08c174d8..9694d12f8e 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less +++ b/packages/stacks-classic/lib/atomic/spacing.less @@ -50,9 +50,16 @@ // PADDING .generate-sizing('.p', padding, @px-values, 'px'); +.generate-sizing('.p', padding, @px-values, 'px', true); .generate-sizing('.pt', padding-top, @px-values, 'px'); +.generate-sizing('.pt', padding-top, @px-values, 'px', true); .generate-sizing('.pr', padding-right, @px-values, 'px'); +.generate-sizing('.pr', padding-right, @px-values, 'px', true); .generate-sizing('.pb', padding-bottom, @px-values, 'px'); +.generate-sizing('.pb', padding-bottom, @px-values, 'px', true); .generate-sizing('.pl', padding-left, @px-values, 'px'); +.generate-sizing('.pl', padding-left, @px-values, 'px', true); .generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'); +.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true); .generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'); +.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true); diff --git a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less index 3dc8ce8b62..205011aee2 100644 --- a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less +++ b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less @@ -123,7 +123,7 @@ content: ''; height: calc(100% + var(--su16)); left: 0; - margin-left: calc(var(--sun16) + var(--sun1)); // the orange selection indicator overlaps with the widget border + margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border margin-top: var(--sun4); position: absolute; } diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index a511d99bab..9e5518ea59 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -164,16 +164,12 @@ // -- Section Title .stacks-h2 { font-size: var(--fs-headline1); - padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning - margin-top: calc(var(--sun96) + var(--sun8)); // Hack for #anchor positioning } // -- Sub-section Title .stacks-h3 { font-size: var(--fs-subheading); color: var(--fc-medium); - padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning - margin-top: calc(var(--sun96) + var(--sun8)); // Hack for #anchor positioning } .stacks-h4 { From d478ba6ec7d0a1dbe21e0041b49e0ac686baddc7 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 17:21:00 -0500 Subject: [PATCH 12/18] Add internal.less import to flex.less --- .../__snapshots__/flex.less.test.ts.snap | 3419 +++++++++++++++++ packages/stacks-classic/lib/atomic/flex.less | 23 +- 2 files changed, 3420 insertions(+), 22 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap new file mode 100644 index 0000000000..aec2b893c0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap @@ -0,0 +1,3419 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: flex > should output all atomic flex css classes 1`] = ` +".flex__fl-shrink0, +.flex__fl-shrink0 > .d-flex, +.flex__fl-shrink0 > .flex--item { + flex: 0 auto; +} + +.flex__fl-equal, +.flex__fl-equal > .d-flex, +.flex__fl-equal > .flex--item { + flex: 1 1 0%; +} + +.flex__fl-grow1, +.flex__fl-grow1 > .d-flex, +.flex__fl-grow1 > .flex--item { + flex: 1 auto; +} + +.flex--item1 { + flex-basis: 8.33333333%; +} + +.flex--item2 { + flex-basis: 16.66666667%; +} + +.flex--item3 { + flex-basis: 25%; +} + +.flex--item4 { + flex-basis: 33.33333333%; +} + +.flex--item5 { + flex-basis: 41.66666667%; +} + +.flex--item6 { + flex-basis: 50%; +} + +.flex--item7 { + flex-basis: 58.33333333%; +} + +.flex--item8 { + flex-basis: 66.66666667%; +} + +.flex--item9 { + flex-basis: 75%; +} + +.flex--item10 { + flex-basis: 83.33333333%; +} + +.flex--item11 { + flex-basis: 91.66666667%; +} + +.flex--item12 { + flex-basis: 100%; +} + +.flex__allitems1 > .d-flex, +.flex__allitems1 > .flex--item { + flex-basis: 8.33333333%; +} + +.flex__allitems2 > .d-flex, +.flex__allitems2 > .flex--item { + flex-basis: 16.66666667%; +} + +.flex__allitems3 > .d-flex, +.flex__allitems3 > .flex--item { + flex-basis: 25%; +} + +.flex__allitems4 > .d-flex, +.flex__allitems4 > .flex--item { + flex-basis: 33.33333333%; +} + +.flex__allitems5 > .d-flex, +.flex__allitems5 > .flex--item { + flex-basis: 41.66666667%; +} + +.flex__allitems6 > .d-flex, +.flex__allitems6 > .flex--item { + flex-basis: 50%; +} + +.flex__allitems7 > .d-flex, +.flex__allitems7 > .flex--item { + flex-basis: 58.33333333%; +} + +.flex__allitems8 > .d-flex, +.flex__allitems8 > .flex--item { + flex-basis: 66.66666667%; +} + +.flex__allitems9 > .d-flex, +.flex__allitems9 > .flex--item { + flex-basis: 75%; +} + +.flex__allitems10 > .d-flex, +.flex__allitems10 > .flex--item { + flex-basis: 83.33333333%; +} + +.flex__allitems11 > .d-flex, +.flex__allitems11 > .flex--item { + flex-basis: 91.66666667%; +} + +.flex__allitems12 > .d-flex, +.flex__allitems12 > .flex--item { + flex-basis: 100%; +} + +.g0 > .flex--item1, +.gx0 > .flex--item1, +.gy0 > .flex--item1, +.g0.flex__allitems1 > .d-flex, +.gx0.flex__allitems1 > .d-flex, +.gy0.flex__allitems1 > .d-flex, +.g0.flex__allitems1 > .flex--item, +.gx0.flex__allitems1 > .flex--item, +.gy0.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su0) * 0.9166666666666666)); +} + +.g0 > .flex--item2, +.gx0 > .flex--item2, +.gy0 > .flex--item2, +.g0.flex__allitems2 > .d-flex, +.gx0.flex__allitems2 > .d-flex, +.gy0.flex__allitems2 > .d-flex, +.g0.flex__allitems2 > .flex--item, +.gx0.flex__allitems2 > .flex--item, +.gy0.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su0) * 0.8333333333333334)); +} + +.g0 > .flex--item3, +.gx0 > .flex--item3, +.gy0 > .flex--item3, +.g0.flex__allitems3 > .d-flex, +.gx0.flex__allitems3 > .d-flex, +.gy0.flex__allitems3 > .d-flex, +.g0.flex__allitems3 > .flex--item, +.gx0.flex__allitems3 > .flex--item, +.gy0.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su0) * 0.75)); +} + +.g0 > .flex--item4, +.gx0 > .flex--item4, +.gy0 > .flex--item4, +.g0.flex__allitems4 > .d-flex, +.gx0.flex__allitems4 > .d-flex, +.gy0.flex__allitems4 > .d-flex, +.g0.flex__allitems4 > .flex--item, +.gx0.flex__allitems4 > .flex--item, +.gy0.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su0) * 0.6666666666666666)); +} + +.g0 > .flex--item5, +.gx0 > .flex--item5, +.gy0 > .flex--item5, +.g0.flex__allitems5 > .d-flex, +.gx0.flex__allitems5 > .d-flex, +.gy0.flex__allitems5 > .d-flex, +.g0.flex__allitems5 > .flex--item, +.gx0.flex__allitems5 > .flex--item, +.gy0.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su0) * 0.5833333333333334)); +} + +.g0 > .flex--item6, +.gx0 > .flex--item6, +.gy0 > .flex--item6, +.g0.flex__allitems6 > .d-flex, +.gx0.flex__allitems6 > .d-flex, +.gy0.flex__allitems6 > .d-flex, +.g0.flex__allitems6 > .flex--item, +.gx0.flex__allitems6 > .flex--item, +.gy0.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su0) * 0.5)); +} + +.g0 > .flex--item7, +.gx0 > .flex--item7, +.gy0 > .flex--item7, +.g0.flex__allitems7 > .d-flex, +.gx0.flex__allitems7 > .d-flex, +.gy0.flex__allitems7 > .d-flex, +.g0.flex__allitems7 > .flex--item, +.gx0.flex__allitems7 > .flex--item, +.gy0.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su0) * 0.4166666666666667)); +} + +.g0 > .flex--item8, +.gx0 > .flex--item8, +.gy0 > .flex--item8, +.g0.flex__allitems8 > .d-flex, +.gx0.flex__allitems8 > .d-flex, +.gy0.flex__allitems8 > .d-flex, +.g0.flex__allitems8 > .flex--item, +.gx0.flex__allitems8 > .flex--item, +.gy0.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su0) * 0.3333333333333333)); +} + +.g0 > .flex--item9, +.gx0 > .flex--item9, +.gy0 > .flex--item9, +.g0.flex__allitems9 > .d-flex, +.gx0.flex__allitems9 > .d-flex, +.gy0.flex__allitems9 > .d-flex, +.g0.flex__allitems9 > .flex--item, +.gx0.flex__allitems9 > .flex--item, +.gy0.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su0) * 0.25)); +} + +.g0 > .flex--item10, +.gx0 > .flex--item10, +.gy0 > .flex--item10, +.g0.flex__allitems10 > .d-flex, +.gx0.flex__allitems10 > .d-flex, +.gy0.flex__allitems10 > .d-flex, +.g0.flex__allitems10 > .flex--item, +.gx0.flex__allitems10 > .flex--item, +.gy0.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su0) * 0.16666666666666666)); +} + +.g0 > .flex--item11, +.gx0 > .flex--item11, +.gy0 > .flex--item11, +.g0.flex__allitems11 > .d-flex, +.gx0.flex__allitems11 > .d-flex, +.gy0.flex__allitems11 > .d-flex, +.g0.flex__allitems11 > .flex--item, +.gx0.flex__allitems11 > .flex--item, +.gy0.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su0) * 0.08333333333333333)); +} + +.g0 > .flex--item12, +.gx0 > .flex--item12, +.gy0 > .flex--item12, +.g0.flex__allitems12 > .d-flex, +.gx0.flex__allitems12 > .d-flex, +.gy0.flex__allitems12 > .d-flex, +.g0.flex__allitems12 > .flex--item, +.gx0.flex__allitems12 > .flex--item, +.gy0.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su0) * 0)); +} + +.g1 > .flex--item1, +.gx1 > .flex--item1, +.gy1 > .flex--item1, +.g1.flex__allitems1 > .d-flex, +.gx1.flex__allitems1 > .d-flex, +.gy1.flex__allitems1 > .d-flex, +.g1.flex__allitems1 > .flex--item, +.gx1.flex__allitems1 > .flex--item, +.gy1.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su1) * 0.9166666666666666)); +} + +.g1 > .flex--item2, +.gx1 > .flex--item2, +.gy1 > .flex--item2, +.g1.flex__allitems2 > .d-flex, +.gx1.flex__allitems2 > .d-flex, +.gy1.flex__allitems2 > .d-flex, +.g1.flex__allitems2 > .flex--item, +.gx1.flex__allitems2 > .flex--item, +.gy1.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su1) * 0.8333333333333334)); +} + +.g1 > .flex--item3, +.gx1 > .flex--item3, +.gy1 > .flex--item3, +.g1.flex__allitems3 > .d-flex, +.gx1.flex__allitems3 > .d-flex, +.gy1.flex__allitems3 > .d-flex, +.g1.flex__allitems3 > .flex--item, +.gx1.flex__allitems3 > .flex--item, +.gy1.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su1) * 0.75)); +} + +.g1 > .flex--item4, +.gx1 > .flex--item4, +.gy1 > .flex--item4, +.g1.flex__allitems4 > .d-flex, +.gx1.flex__allitems4 > .d-flex, +.gy1.flex__allitems4 > .d-flex, +.g1.flex__allitems4 > .flex--item, +.gx1.flex__allitems4 > .flex--item, +.gy1.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su1) * 0.6666666666666666)); +} + +.g1 > .flex--item5, +.gx1 > .flex--item5, +.gy1 > .flex--item5, +.g1.flex__allitems5 > .d-flex, +.gx1.flex__allitems5 > .d-flex, +.gy1.flex__allitems5 > .d-flex, +.g1.flex__allitems5 > .flex--item, +.gx1.flex__allitems5 > .flex--item, +.gy1.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su1) * 0.5833333333333334)); +} + +.g1 > .flex--item6, +.gx1 > .flex--item6, +.gy1 > .flex--item6, +.g1.flex__allitems6 > .d-flex, +.gx1.flex__allitems6 > .d-flex, +.gy1.flex__allitems6 > .d-flex, +.g1.flex__allitems6 > .flex--item, +.gx1.flex__allitems6 > .flex--item, +.gy1.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su1) * 0.5)); +} + +.g1 > .flex--item7, +.gx1 > .flex--item7, +.gy1 > .flex--item7, +.g1.flex__allitems7 > .d-flex, +.gx1.flex__allitems7 > .d-flex, +.gy1.flex__allitems7 > .d-flex, +.g1.flex__allitems7 > .flex--item, +.gx1.flex__allitems7 > .flex--item, +.gy1.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su1) * 0.4166666666666667)); +} + +.g1 > .flex--item8, +.gx1 > .flex--item8, +.gy1 > .flex--item8, +.g1.flex__allitems8 > .d-flex, +.gx1.flex__allitems8 > .d-flex, +.gy1.flex__allitems8 > .d-flex, +.g1.flex__allitems8 > .flex--item, +.gx1.flex__allitems8 > .flex--item, +.gy1.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su1) * 0.3333333333333333)); +} + +.g1 > .flex--item9, +.gx1 > .flex--item9, +.gy1 > .flex--item9, +.g1.flex__allitems9 > .d-flex, +.gx1.flex__allitems9 > .d-flex, +.gy1.flex__allitems9 > .d-flex, +.g1.flex__allitems9 > .flex--item, +.gx1.flex__allitems9 > .flex--item, +.gy1.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su1) * 0.25)); +} + +.g1 > .flex--item10, +.gx1 > .flex--item10, +.gy1 > .flex--item10, +.g1.flex__allitems10 > .d-flex, +.gx1.flex__allitems10 > .d-flex, +.gy1.flex__allitems10 > .d-flex, +.g1.flex__allitems10 > .flex--item, +.gx1.flex__allitems10 > .flex--item, +.gy1.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su1) * 0.16666666666666666)); +} + +.g1 > .flex--item11, +.gx1 > .flex--item11, +.gy1 > .flex--item11, +.g1.flex__allitems11 > .d-flex, +.gx1.flex__allitems11 > .d-flex, +.gy1.flex__allitems11 > .d-flex, +.g1.flex__allitems11 > .flex--item, +.gx1.flex__allitems11 > .flex--item, +.gy1.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su1) * 0.08333333333333333)); +} + +.g1 > .flex--item12, +.gx1 > .flex--item12, +.gy1 > .flex--item12, +.g1.flex__allitems12 > .d-flex, +.gx1.flex__allitems12 > .d-flex, +.gy1.flex__allitems12 > .d-flex, +.g1.flex__allitems12 > .flex--item, +.gx1.flex__allitems12 > .flex--item, +.gy1.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su1) * 0)); +} + +.g2 > .flex--item1, +.gx2 > .flex--item1, +.gy2 > .flex--item1, +.g2.flex__allitems1 > .d-flex, +.gx2.flex__allitems1 > .d-flex, +.gy2.flex__allitems1 > .d-flex, +.g2.flex__allitems1 > .flex--item, +.gx2.flex__allitems1 > .flex--item, +.gy2.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su2) * 0.9166666666666666)); +} + +.g2 > .flex--item2, +.gx2 > .flex--item2, +.gy2 > .flex--item2, +.g2.flex__allitems2 > .d-flex, +.gx2.flex__allitems2 > .d-flex, +.gy2.flex__allitems2 > .d-flex, +.g2.flex__allitems2 > .flex--item, +.gx2.flex__allitems2 > .flex--item, +.gy2.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su2) * 0.8333333333333334)); +} + +.g2 > .flex--item3, +.gx2 > .flex--item3, +.gy2 > .flex--item3, +.g2.flex__allitems3 > .d-flex, +.gx2.flex__allitems3 > .d-flex, +.gy2.flex__allitems3 > .d-flex, +.g2.flex__allitems3 > .flex--item, +.gx2.flex__allitems3 > .flex--item, +.gy2.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su2) * 0.75)); +} + +.g2 > .flex--item4, +.gx2 > .flex--item4, +.gy2 > .flex--item4, +.g2.flex__allitems4 > .d-flex, +.gx2.flex__allitems4 > .d-flex, +.gy2.flex__allitems4 > .d-flex, +.g2.flex__allitems4 > .flex--item, +.gx2.flex__allitems4 > .flex--item, +.gy2.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su2) * 0.6666666666666666)); +} + +.g2 > .flex--item5, +.gx2 > .flex--item5, +.gy2 > .flex--item5, +.g2.flex__allitems5 > .d-flex, +.gx2.flex__allitems5 > .d-flex, +.gy2.flex__allitems5 > .d-flex, +.g2.flex__allitems5 > .flex--item, +.gx2.flex__allitems5 > .flex--item, +.gy2.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su2) * 0.5833333333333334)); +} + +.g2 > .flex--item6, +.gx2 > .flex--item6, +.gy2 > .flex--item6, +.g2.flex__allitems6 > .d-flex, +.gx2.flex__allitems6 > .d-flex, +.gy2.flex__allitems6 > .d-flex, +.g2.flex__allitems6 > .flex--item, +.gx2.flex__allitems6 > .flex--item, +.gy2.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su2) * 0.5)); +} + +.g2 > .flex--item7, +.gx2 > .flex--item7, +.gy2 > .flex--item7, +.g2.flex__allitems7 > .d-flex, +.gx2.flex__allitems7 > .d-flex, +.gy2.flex__allitems7 > .d-flex, +.g2.flex__allitems7 > .flex--item, +.gx2.flex__allitems7 > .flex--item, +.gy2.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su2) * 0.4166666666666667)); +} + +.g2 > .flex--item8, +.gx2 > .flex--item8, +.gy2 > .flex--item8, +.g2.flex__allitems8 > .d-flex, +.gx2.flex__allitems8 > .d-flex, +.gy2.flex__allitems8 > .d-flex, +.g2.flex__allitems8 > .flex--item, +.gx2.flex__allitems8 > .flex--item, +.gy2.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su2) * 0.3333333333333333)); +} + +.g2 > .flex--item9, +.gx2 > .flex--item9, +.gy2 > .flex--item9, +.g2.flex__allitems9 > .d-flex, +.gx2.flex__allitems9 > .d-flex, +.gy2.flex__allitems9 > .d-flex, +.g2.flex__allitems9 > .flex--item, +.gx2.flex__allitems9 > .flex--item, +.gy2.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su2) * 0.25)); +} + +.g2 > .flex--item10, +.gx2 > .flex--item10, +.gy2 > .flex--item10, +.g2.flex__allitems10 > .d-flex, +.gx2.flex__allitems10 > .d-flex, +.gy2.flex__allitems10 > .d-flex, +.g2.flex__allitems10 > .flex--item, +.gx2.flex__allitems10 > .flex--item, +.gy2.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su2) * 0.16666666666666666)); +} + +.g2 > .flex--item11, +.gx2 > .flex--item11, +.gy2 > .flex--item11, +.g2.flex__allitems11 > .d-flex, +.gx2.flex__allitems11 > .d-flex, +.gy2.flex__allitems11 > .d-flex, +.g2.flex__allitems11 > .flex--item, +.gx2.flex__allitems11 > .flex--item, +.gy2.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su2) * 0.08333333333333333)); +} + +.g2 > .flex--item12, +.gx2 > .flex--item12, +.gy2 > .flex--item12, +.g2.flex__allitems12 > .d-flex, +.gx2.flex__allitems12 > .d-flex, +.gy2.flex__allitems12 > .d-flex, +.g2.flex__allitems12 > .flex--item, +.gx2.flex__allitems12 > .flex--item, +.gy2.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su2) * 0)); +} + +.g4 > .flex--item1, +.gx4 > .flex--item1, +.gy4 > .flex--item1, +.g4.flex__allitems1 > .d-flex, +.gx4.flex__allitems1 > .d-flex, +.gy4.flex__allitems1 > .d-flex, +.g4.flex__allitems1 > .flex--item, +.gx4.flex__allitems1 > .flex--item, +.gy4.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su4) * 0.9166666666666666)); +} + +.g4 > .flex--item2, +.gx4 > .flex--item2, +.gy4 > .flex--item2, +.g4.flex__allitems2 > .d-flex, +.gx4.flex__allitems2 > .d-flex, +.gy4.flex__allitems2 > .d-flex, +.g4.flex__allitems2 > .flex--item, +.gx4.flex__allitems2 > .flex--item, +.gy4.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su4) * 0.8333333333333334)); +} + +.g4 > .flex--item3, +.gx4 > .flex--item3, +.gy4 > .flex--item3, +.g4.flex__allitems3 > .d-flex, +.gx4.flex__allitems3 > .d-flex, +.gy4.flex__allitems3 > .d-flex, +.g4.flex__allitems3 > .flex--item, +.gx4.flex__allitems3 > .flex--item, +.gy4.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su4) * 0.75)); +} + +.g4 > .flex--item4, +.gx4 > .flex--item4, +.gy4 > .flex--item4, +.g4.flex__allitems4 > .d-flex, +.gx4.flex__allitems4 > .d-flex, +.gy4.flex__allitems4 > .d-flex, +.g4.flex__allitems4 > .flex--item, +.gx4.flex__allitems4 > .flex--item, +.gy4.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su4) * 0.6666666666666666)); +} + +.g4 > .flex--item5, +.gx4 > .flex--item5, +.gy4 > .flex--item5, +.g4.flex__allitems5 > .d-flex, +.gx4.flex__allitems5 > .d-flex, +.gy4.flex__allitems5 > .d-flex, +.g4.flex__allitems5 > .flex--item, +.gx4.flex__allitems5 > .flex--item, +.gy4.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su4) * 0.5833333333333334)); +} + +.g4 > .flex--item6, +.gx4 > .flex--item6, +.gy4 > .flex--item6, +.g4.flex__allitems6 > .d-flex, +.gx4.flex__allitems6 > .d-flex, +.gy4.flex__allitems6 > .d-flex, +.g4.flex__allitems6 > .flex--item, +.gx4.flex__allitems6 > .flex--item, +.gy4.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su4) * 0.5)); +} + +.g4 > .flex--item7, +.gx4 > .flex--item7, +.gy4 > .flex--item7, +.g4.flex__allitems7 > .d-flex, +.gx4.flex__allitems7 > .d-flex, +.gy4.flex__allitems7 > .d-flex, +.g4.flex__allitems7 > .flex--item, +.gx4.flex__allitems7 > .flex--item, +.gy4.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su4) * 0.4166666666666667)); +} + +.g4 > .flex--item8, +.gx4 > .flex--item8, +.gy4 > .flex--item8, +.g4.flex__allitems8 > .d-flex, +.gx4.flex__allitems8 > .d-flex, +.gy4.flex__allitems8 > .d-flex, +.g4.flex__allitems8 > .flex--item, +.gx4.flex__allitems8 > .flex--item, +.gy4.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su4) * 0.3333333333333333)); +} + +.g4 > .flex--item9, +.gx4 > .flex--item9, +.gy4 > .flex--item9, +.g4.flex__allitems9 > .d-flex, +.gx4.flex__allitems9 > .d-flex, +.gy4.flex__allitems9 > .d-flex, +.g4.flex__allitems9 > .flex--item, +.gx4.flex__allitems9 > .flex--item, +.gy4.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su4) * 0.25)); +} + +.g4 > .flex--item10, +.gx4 > .flex--item10, +.gy4 > .flex--item10, +.g4.flex__allitems10 > .d-flex, +.gx4.flex__allitems10 > .d-flex, +.gy4.flex__allitems10 > .d-flex, +.g4.flex__allitems10 > .flex--item, +.gx4.flex__allitems10 > .flex--item, +.gy4.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su4) * 0.16666666666666666)); +} + +.g4 > .flex--item11, +.gx4 > .flex--item11, +.gy4 > .flex--item11, +.g4.flex__allitems11 > .d-flex, +.gx4.flex__allitems11 > .d-flex, +.gy4.flex__allitems11 > .d-flex, +.g4.flex__allitems11 > .flex--item, +.gx4.flex__allitems11 > .flex--item, +.gy4.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su4) * 0.08333333333333333)); +} + +.g4 > .flex--item12, +.gx4 > .flex--item12, +.gy4 > .flex--item12, +.g4.flex__allitems12 > .d-flex, +.gx4.flex__allitems12 > .d-flex, +.gy4.flex__allitems12 > .d-flex, +.g4.flex__allitems12 > .flex--item, +.gx4.flex__allitems12 > .flex--item, +.gy4.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su4) * 0)); +} + +.g6 > .flex--item1, +.gx6 > .flex--item1, +.gy6 > .flex--item1, +.g6.flex__allitems1 > .d-flex, +.gx6.flex__allitems1 > .d-flex, +.gy6.flex__allitems1 > .d-flex, +.g6.flex__allitems1 > .flex--item, +.gx6.flex__allitems1 > .flex--item, +.gy6.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su6) * 0.9166666666666666)); +} + +.g6 > .flex--item2, +.gx6 > .flex--item2, +.gy6 > .flex--item2, +.g6.flex__allitems2 > .d-flex, +.gx6.flex__allitems2 > .d-flex, +.gy6.flex__allitems2 > .d-flex, +.g6.flex__allitems2 > .flex--item, +.gx6.flex__allitems2 > .flex--item, +.gy6.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su6) * 0.8333333333333334)); +} + +.g6 > .flex--item3, +.gx6 > .flex--item3, +.gy6 > .flex--item3, +.g6.flex__allitems3 > .d-flex, +.gx6.flex__allitems3 > .d-flex, +.gy6.flex__allitems3 > .d-flex, +.g6.flex__allitems3 > .flex--item, +.gx6.flex__allitems3 > .flex--item, +.gy6.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su6) * 0.75)); +} + +.g6 > .flex--item4, +.gx6 > .flex--item4, +.gy6 > .flex--item4, +.g6.flex__allitems4 > .d-flex, +.gx6.flex__allitems4 > .d-flex, +.gy6.flex__allitems4 > .d-flex, +.g6.flex__allitems4 > .flex--item, +.gx6.flex__allitems4 > .flex--item, +.gy6.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su6) * 0.6666666666666666)); +} + +.g6 > .flex--item5, +.gx6 > .flex--item5, +.gy6 > .flex--item5, +.g6.flex__allitems5 > .d-flex, +.gx6.flex__allitems5 > .d-flex, +.gy6.flex__allitems5 > .d-flex, +.g6.flex__allitems5 > .flex--item, +.gx6.flex__allitems5 > .flex--item, +.gy6.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su6) * 0.5833333333333334)); +} + +.g6 > .flex--item6, +.gx6 > .flex--item6, +.gy6 > .flex--item6, +.g6.flex__allitems6 > .d-flex, +.gx6.flex__allitems6 > .d-flex, +.gy6.flex__allitems6 > .d-flex, +.g6.flex__allitems6 > .flex--item, +.gx6.flex__allitems6 > .flex--item, +.gy6.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su6) * 0.5)); +} + +.g6 > .flex--item7, +.gx6 > .flex--item7, +.gy6 > .flex--item7, +.g6.flex__allitems7 > .d-flex, +.gx6.flex__allitems7 > .d-flex, +.gy6.flex__allitems7 > .d-flex, +.g6.flex__allitems7 > .flex--item, +.gx6.flex__allitems7 > .flex--item, +.gy6.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su6) * 0.4166666666666667)); +} + +.g6 > .flex--item8, +.gx6 > .flex--item8, +.gy6 > .flex--item8, +.g6.flex__allitems8 > .d-flex, +.gx6.flex__allitems8 > .d-flex, +.gy6.flex__allitems8 > .d-flex, +.g6.flex__allitems8 > .flex--item, +.gx6.flex__allitems8 > .flex--item, +.gy6.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su6) * 0.3333333333333333)); +} + +.g6 > .flex--item9, +.gx6 > .flex--item9, +.gy6 > .flex--item9, +.g6.flex__allitems9 > .d-flex, +.gx6.flex__allitems9 > .d-flex, +.gy6.flex__allitems9 > .d-flex, +.g6.flex__allitems9 > .flex--item, +.gx6.flex__allitems9 > .flex--item, +.gy6.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su6) * 0.25)); +} + +.g6 > .flex--item10, +.gx6 > .flex--item10, +.gy6 > .flex--item10, +.g6.flex__allitems10 > .d-flex, +.gx6.flex__allitems10 > .d-flex, +.gy6.flex__allitems10 > .d-flex, +.g6.flex__allitems10 > .flex--item, +.gx6.flex__allitems10 > .flex--item, +.gy6.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su6) * 0.16666666666666666)); +} + +.g6 > .flex--item11, +.gx6 > .flex--item11, +.gy6 > .flex--item11, +.g6.flex__allitems11 > .d-flex, +.gx6.flex__allitems11 > .d-flex, +.gy6.flex__allitems11 > .d-flex, +.g6.flex__allitems11 > .flex--item, +.gx6.flex__allitems11 > .flex--item, +.gy6.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su6) * 0.08333333333333333)); +} + +.g6 > .flex--item12, +.gx6 > .flex--item12, +.gy6 > .flex--item12, +.g6.flex__allitems12 > .d-flex, +.gx6.flex__allitems12 > .d-flex, +.gy6.flex__allitems12 > .d-flex, +.g6.flex__allitems12 > .flex--item, +.gx6.flex__allitems12 > .flex--item, +.gy6.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su6) * 0)); +} + +.g8 > .flex--item1, +.gx8 > .flex--item1, +.gy8 > .flex--item1, +.g8.flex__allitems1 > .d-flex, +.gx8.flex__allitems1 > .d-flex, +.gy8.flex__allitems1 > .d-flex, +.g8.flex__allitems1 > .flex--item, +.gx8.flex__allitems1 > .flex--item, +.gy8.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su8) * 0.9166666666666666)); +} + +.g8 > .flex--item2, +.gx8 > .flex--item2, +.gy8 > .flex--item2, +.g8.flex__allitems2 > .d-flex, +.gx8.flex__allitems2 > .d-flex, +.gy8.flex__allitems2 > .d-flex, +.g8.flex__allitems2 > .flex--item, +.gx8.flex__allitems2 > .flex--item, +.gy8.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su8) * 0.8333333333333334)); +} + +.g8 > .flex--item3, +.gx8 > .flex--item3, +.gy8 > .flex--item3, +.g8.flex__allitems3 > .d-flex, +.gx8.flex__allitems3 > .d-flex, +.gy8.flex__allitems3 > .d-flex, +.g8.flex__allitems3 > .flex--item, +.gx8.flex__allitems3 > .flex--item, +.gy8.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su8) * 0.75)); +} + +.g8 > .flex--item4, +.gx8 > .flex--item4, +.gy8 > .flex--item4, +.g8.flex__allitems4 > .d-flex, +.gx8.flex__allitems4 > .d-flex, +.gy8.flex__allitems4 > .d-flex, +.g8.flex__allitems4 > .flex--item, +.gx8.flex__allitems4 > .flex--item, +.gy8.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su8) * 0.6666666666666666)); +} + +.g8 > .flex--item5, +.gx8 > .flex--item5, +.gy8 > .flex--item5, +.g8.flex__allitems5 > .d-flex, +.gx8.flex__allitems5 > .d-flex, +.gy8.flex__allitems5 > .d-flex, +.g8.flex__allitems5 > .flex--item, +.gx8.flex__allitems5 > .flex--item, +.gy8.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su8) * 0.5833333333333334)); +} + +.g8 > .flex--item6, +.gx8 > .flex--item6, +.gy8 > .flex--item6, +.g8.flex__allitems6 > .d-flex, +.gx8.flex__allitems6 > .d-flex, +.gy8.flex__allitems6 > .d-flex, +.g8.flex__allitems6 > .flex--item, +.gx8.flex__allitems6 > .flex--item, +.gy8.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su8) * 0.5)); +} + +.g8 > .flex--item7, +.gx8 > .flex--item7, +.gy8 > .flex--item7, +.g8.flex__allitems7 > .d-flex, +.gx8.flex__allitems7 > .d-flex, +.gy8.flex__allitems7 > .d-flex, +.g8.flex__allitems7 > .flex--item, +.gx8.flex__allitems7 > .flex--item, +.gy8.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su8) * 0.4166666666666667)); +} + +.g8 > .flex--item8, +.gx8 > .flex--item8, +.gy8 > .flex--item8, +.g8.flex__allitems8 > .d-flex, +.gx8.flex__allitems8 > .d-flex, +.gy8.flex__allitems8 > .d-flex, +.g8.flex__allitems8 > .flex--item, +.gx8.flex__allitems8 > .flex--item, +.gy8.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su8) * 0.3333333333333333)); +} + +.g8 > .flex--item9, +.gx8 > .flex--item9, +.gy8 > .flex--item9, +.g8.flex__allitems9 > .d-flex, +.gx8.flex__allitems9 > .d-flex, +.gy8.flex__allitems9 > .d-flex, +.g8.flex__allitems9 > .flex--item, +.gx8.flex__allitems9 > .flex--item, +.gy8.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su8) * 0.25)); +} + +.g8 > .flex--item10, +.gx8 > .flex--item10, +.gy8 > .flex--item10, +.g8.flex__allitems10 > .d-flex, +.gx8.flex__allitems10 > .d-flex, +.gy8.flex__allitems10 > .d-flex, +.g8.flex__allitems10 > .flex--item, +.gx8.flex__allitems10 > .flex--item, +.gy8.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su8) * 0.16666666666666666)); +} + +.g8 > .flex--item11, +.gx8 > .flex--item11, +.gy8 > .flex--item11, +.g8.flex__allitems11 > .d-flex, +.gx8.flex__allitems11 > .d-flex, +.gy8.flex__allitems11 > .d-flex, +.g8.flex__allitems11 > .flex--item, +.gx8.flex__allitems11 > .flex--item, +.gy8.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su8) * 0.08333333333333333)); +} + +.g8 > .flex--item12, +.gx8 > .flex--item12, +.gy8 > .flex--item12, +.g8.flex__allitems12 > .d-flex, +.gx8.flex__allitems12 > .d-flex, +.gy8.flex__allitems12 > .d-flex, +.g8.flex__allitems12 > .flex--item, +.gx8.flex__allitems12 > .flex--item, +.gy8.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su8) * 0)); +} + +.g12 > .flex--item1, +.gx12 > .flex--item1, +.gy12 > .flex--item1, +.g12.flex__allitems1 > .d-flex, +.gx12.flex__allitems1 > .d-flex, +.gy12.flex__allitems1 > .d-flex, +.g12.flex__allitems1 > .flex--item, +.gx12.flex__allitems1 > .flex--item, +.gy12.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su12) * 0.9166666666666666)); +} + +.g12 > .flex--item2, +.gx12 > .flex--item2, +.gy12 > .flex--item2, +.g12.flex__allitems2 > .d-flex, +.gx12.flex__allitems2 > .d-flex, +.gy12.flex__allitems2 > .d-flex, +.g12.flex__allitems2 > .flex--item, +.gx12.flex__allitems2 > .flex--item, +.gy12.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su12) * 0.8333333333333334)); +} + +.g12 > .flex--item3, +.gx12 > .flex--item3, +.gy12 > .flex--item3, +.g12.flex__allitems3 > .d-flex, +.gx12.flex__allitems3 > .d-flex, +.gy12.flex__allitems3 > .d-flex, +.g12.flex__allitems3 > .flex--item, +.gx12.flex__allitems3 > .flex--item, +.gy12.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su12) * 0.75)); +} + +.g12 > .flex--item4, +.gx12 > .flex--item4, +.gy12 > .flex--item4, +.g12.flex__allitems4 > .d-flex, +.gx12.flex__allitems4 > .d-flex, +.gy12.flex__allitems4 > .d-flex, +.g12.flex__allitems4 > .flex--item, +.gx12.flex__allitems4 > .flex--item, +.gy12.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su12) * 0.6666666666666666)); +} + +.g12 > .flex--item5, +.gx12 > .flex--item5, +.gy12 > .flex--item5, +.g12.flex__allitems5 > .d-flex, +.gx12.flex__allitems5 > .d-flex, +.gy12.flex__allitems5 > .d-flex, +.g12.flex__allitems5 > .flex--item, +.gx12.flex__allitems5 > .flex--item, +.gy12.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su12) * 0.5833333333333334)); +} + +.g12 > .flex--item6, +.gx12 > .flex--item6, +.gy12 > .flex--item6, +.g12.flex__allitems6 > .d-flex, +.gx12.flex__allitems6 > .d-flex, +.gy12.flex__allitems6 > .d-flex, +.g12.flex__allitems6 > .flex--item, +.gx12.flex__allitems6 > .flex--item, +.gy12.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su12) * 0.5)); +} + +.g12 > .flex--item7, +.gx12 > .flex--item7, +.gy12 > .flex--item7, +.g12.flex__allitems7 > .d-flex, +.gx12.flex__allitems7 > .d-flex, +.gy12.flex__allitems7 > .d-flex, +.g12.flex__allitems7 > .flex--item, +.gx12.flex__allitems7 > .flex--item, +.gy12.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su12) * 0.4166666666666667)); +} + +.g12 > .flex--item8, +.gx12 > .flex--item8, +.gy12 > .flex--item8, +.g12.flex__allitems8 > .d-flex, +.gx12.flex__allitems8 > .d-flex, +.gy12.flex__allitems8 > .d-flex, +.g12.flex__allitems8 > .flex--item, +.gx12.flex__allitems8 > .flex--item, +.gy12.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su12) * 0.3333333333333333)); +} + +.g12 > .flex--item9, +.gx12 > .flex--item9, +.gy12 > .flex--item9, +.g12.flex__allitems9 > .d-flex, +.gx12.flex__allitems9 > .d-flex, +.gy12.flex__allitems9 > .d-flex, +.g12.flex__allitems9 > .flex--item, +.gx12.flex__allitems9 > .flex--item, +.gy12.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su12) * 0.25)); +} + +.g12 > .flex--item10, +.gx12 > .flex--item10, +.gy12 > .flex--item10, +.g12.flex__allitems10 > .d-flex, +.gx12.flex__allitems10 > .d-flex, +.gy12.flex__allitems10 > .d-flex, +.g12.flex__allitems10 > .flex--item, +.gx12.flex__allitems10 > .flex--item, +.gy12.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su12) * 0.16666666666666666)); +} + +.g12 > .flex--item11, +.gx12 > .flex--item11, +.gy12 > .flex--item11, +.g12.flex__allitems11 > .d-flex, +.gx12.flex__allitems11 > .d-flex, +.gy12.flex__allitems11 > .d-flex, +.g12.flex__allitems11 > .flex--item, +.gx12.flex__allitems11 > .flex--item, +.gy12.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su12) * 0.08333333333333333)); +} + +.g12 > .flex--item12, +.gx12 > .flex--item12, +.gy12 > .flex--item12, +.g12.flex__allitems12 > .d-flex, +.gx12.flex__allitems12 > .d-flex, +.gy12.flex__allitems12 > .d-flex, +.g12.flex__allitems12 > .flex--item, +.gx12.flex__allitems12 > .flex--item, +.gy12.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su12) * 0)); +} + +.g16 > .flex--item1, +.gx16 > .flex--item1, +.gy16 > .flex--item1, +.g16.flex__allitems1 > .d-flex, +.gx16.flex__allitems1 > .d-flex, +.gy16.flex__allitems1 > .d-flex, +.g16.flex__allitems1 > .flex--item, +.gx16.flex__allitems1 > .flex--item, +.gy16.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su16) * 0.9166666666666666)); +} + +.g16 > .flex--item2, +.gx16 > .flex--item2, +.gy16 > .flex--item2, +.g16.flex__allitems2 > .d-flex, +.gx16.flex__allitems2 > .d-flex, +.gy16.flex__allitems2 > .d-flex, +.g16.flex__allitems2 > .flex--item, +.gx16.flex__allitems2 > .flex--item, +.gy16.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su16) * 0.8333333333333334)); +} + +.g16 > .flex--item3, +.gx16 > .flex--item3, +.gy16 > .flex--item3, +.g16.flex__allitems3 > .d-flex, +.gx16.flex__allitems3 > .d-flex, +.gy16.flex__allitems3 > .d-flex, +.g16.flex__allitems3 > .flex--item, +.gx16.flex__allitems3 > .flex--item, +.gy16.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su16) * 0.75)); +} + +.g16 > .flex--item4, +.gx16 > .flex--item4, +.gy16 > .flex--item4, +.g16.flex__allitems4 > .d-flex, +.gx16.flex__allitems4 > .d-flex, +.gy16.flex__allitems4 > .d-flex, +.g16.flex__allitems4 > .flex--item, +.gx16.flex__allitems4 > .flex--item, +.gy16.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su16) * 0.6666666666666666)); +} + +.g16 > .flex--item5, +.gx16 > .flex--item5, +.gy16 > .flex--item5, +.g16.flex__allitems5 > .d-flex, +.gx16.flex__allitems5 > .d-flex, +.gy16.flex__allitems5 > .d-flex, +.g16.flex__allitems5 > .flex--item, +.gx16.flex__allitems5 > .flex--item, +.gy16.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su16) * 0.5833333333333334)); +} + +.g16 > .flex--item6, +.gx16 > .flex--item6, +.gy16 > .flex--item6, +.g16.flex__allitems6 > .d-flex, +.gx16.flex__allitems6 > .d-flex, +.gy16.flex__allitems6 > .d-flex, +.g16.flex__allitems6 > .flex--item, +.gx16.flex__allitems6 > .flex--item, +.gy16.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su16) * 0.5)); +} + +.g16 > .flex--item7, +.gx16 > .flex--item7, +.gy16 > .flex--item7, +.g16.flex__allitems7 > .d-flex, +.gx16.flex__allitems7 > .d-flex, +.gy16.flex__allitems7 > .d-flex, +.g16.flex__allitems7 > .flex--item, +.gx16.flex__allitems7 > .flex--item, +.gy16.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su16) * 0.4166666666666667)); +} + +.g16 > .flex--item8, +.gx16 > .flex--item8, +.gy16 > .flex--item8, +.g16.flex__allitems8 > .d-flex, +.gx16.flex__allitems8 > .d-flex, +.gy16.flex__allitems8 > .d-flex, +.g16.flex__allitems8 > .flex--item, +.gx16.flex__allitems8 > .flex--item, +.gy16.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su16) * 0.3333333333333333)); +} + +.g16 > .flex--item9, +.gx16 > .flex--item9, +.gy16 > .flex--item9, +.g16.flex__allitems9 > .d-flex, +.gx16.flex__allitems9 > .d-flex, +.gy16.flex__allitems9 > .d-flex, +.g16.flex__allitems9 > .flex--item, +.gx16.flex__allitems9 > .flex--item, +.gy16.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su16) * 0.25)); +} + +.g16 > .flex--item10, +.gx16 > .flex--item10, +.gy16 > .flex--item10, +.g16.flex__allitems10 > .d-flex, +.gx16.flex__allitems10 > .d-flex, +.gy16.flex__allitems10 > .d-flex, +.g16.flex__allitems10 > .flex--item, +.gx16.flex__allitems10 > .flex--item, +.gy16.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su16) * 0.16666666666666666)); +} + +.g16 > .flex--item11, +.gx16 > .flex--item11, +.gy16 > .flex--item11, +.g16.flex__allitems11 > .d-flex, +.gx16.flex__allitems11 > .d-flex, +.gy16.flex__allitems11 > .d-flex, +.g16.flex__allitems11 > .flex--item, +.gx16.flex__allitems11 > .flex--item, +.gy16.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su16) * 0.08333333333333333)); +} + +.g16 > .flex--item12, +.gx16 > .flex--item12, +.gy16 > .flex--item12, +.g16.flex__allitems12 > .d-flex, +.gx16.flex__allitems12 > .d-flex, +.gy16.flex__allitems12 > .d-flex, +.g16.flex__allitems12 > .flex--item, +.gx16.flex__allitems12 > .flex--item, +.gy16.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su16) * 0)); +} + +.g24 > .flex--item1, +.gx24 > .flex--item1, +.gy24 > .flex--item1, +.g24.flex__allitems1 > .d-flex, +.gx24.flex__allitems1 > .d-flex, +.gy24.flex__allitems1 > .d-flex, +.g24.flex__allitems1 > .flex--item, +.gx24.flex__allitems1 > .flex--item, +.gy24.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su24) * 0.9166666666666666)); +} + +.g24 > .flex--item2, +.gx24 > .flex--item2, +.gy24 > .flex--item2, +.g24.flex__allitems2 > .d-flex, +.gx24.flex__allitems2 > .d-flex, +.gy24.flex__allitems2 > .d-flex, +.g24.flex__allitems2 > .flex--item, +.gx24.flex__allitems2 > .flex--item, +.gy24.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su24) * 0.8333333333333334)); +} + +.g24 > .flex--item3, +.gx24 > .flex--item3, +.gy24 > .flex--item3, +.g24.flex__allitems3 > .d-flex, +.gx24.flex__allitems3 > .d-flex, +.gy24.flex__allitems3 > .d-flex, +.g24.flex__allitems3 > .flex--item, +.gx24.flex__allitems3 > .flex--item, +.gy24.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su24) * 0.75)); +} + +.g24 > .flex--item4, +.gx24 > .flex--item4, +.gy24 > .flex--item4, +.g24.flex__allitems4 > .d-flex, +.gx24.flex__allitems4 > .d-flex, +.gy24.flex__allitems4 > .d-flex, +.g24.flex__allitems4 > .flex--item, +.gx24.flex__allitems4 > .flex--item, +.gy24.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su24) * 0.6666666666666666)); +} + +.g24 > .flex--item5, +.gx24 > .flex--item5, +.gy24 > .flex--item5, +.g24.flex__allitems5 > .d-flex, +.gx24.flex__allitems5 > .d-flex, +.gy24.flex__allitems5 > .d-flex, +.g24.flex__allitems5 > .flex--item, +.gx24.flex__allitems5 > .flex--item, +.gy24.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su24) * 0.5833333333333334)); +} + +.g24 > .flex--item6, +.gx24 > .flex--item6, +.gy24 > .flex--item6, +.g24.flex__allitems6 > .d-flex, +.gx24.flex__allitems6 > .d-flex, +.gy24.flex__allitems6 > .d-flex, +.g24.flex__allitems6 > .flex--item, +.gx24.flex__allitems6 > .flex--item, +.gy24.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su24) * 0.5)); +} + +.g24 > .flex--item7, +.gx24 > .flex--item7, +.gy24 > .flex--item7, +.g24.flex__allitems7 > .d-flex, +.gx24.flex__allitems7 > .d-flex, +.gy24.flex__allitems7 > .d-flex, +.g24.flex__allitems7 > .flex--item, +.gx24.flex__allitems7 > .flex--item, +.gy24.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su24) * 0.4166666666666667)); +} + +.g24 > .flex--item8, +.gx24 > .flex--item8, +.gy24 > .flex--item8, +.g24.flex__allitems8 > .d-flex, +.gx24.flex__allitems8 > .d-flex, +.gy24.flex__allitems8 > .d-flex, +.g24.flex__allitems8 > .flex--item, +.gx24.flex__allitems8 > .flex--item, +.gy24.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su24) * 0.3333333333333333)); +} + +.g24 > .flex--item9, +.gx24 > .flex--item9, +.gy24 > .flex--item9, +.g24.flex__allitems9 > .d-flex, +.gx24.flex__allitems9 > .d-flex, +.gy24.flex__allitems9 > .d-flex, +.g24.flex__allitems9 > .flex--item, +.gx24.flex__allitems9 > .flex--item, +.gy24.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su24) * 0.25)); +} + +.g24 > .flex--item10, +.gx24 > .flex--item10, +.gy24 > .flex--item10, +.g24.flex__allitems10 > .d-flex, +.gx24.flex__allitems10 > .d-flex, +.gy24.flex__allitems10 > .d-flex, +.g24.flex__allitems10 > .flex--item, +.gx24.flex__allitems10 > .flex--item, +.gy24.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su24) * 0.16666666666666666)); +} + +.g24 > .flex--item11, +.gx24 > .flex--item11, +.gy24 > .flex--item11, +.g24.flex__allitems11 > .d-flex, +.gx24.flex__allitems11 > .d-flex, +.gy24.flex__allitems11 > .d-flex, +.g24.flex__allitems11 > .flex--item, +.gx24.flex__allitems11 > .flex--item, +.gy24.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su24) * 0.08333333333333333)); +} + +.g24 > .flex--item12, +.gx24 > .flex--item12, +.gy24 > .flex--item12, +.g24.flex__allitems12 > .d-flex, +.gx24.flex__allitems12 > .d-flex, +.gy24.flex__allitems12 > .d-flex, +.g24.flex__allitems12 > .flex--item, +.gx24.flex__allitems12 > .flex--item, +.gy24.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su24) * 0)); +} + +.g32 > .flex--item1, +.gx32 > .flex--item1, +.gy32 > .flex--item1, +.g32.flex__allitems1 > .d-flex, +.gx32.flex__allitems1 > .d-flex, +.gy32.flex__allitems1 > .d-flex, +.g32.flex__allitems1 > .flex--item, +.gx32.flex__allitems1 > .flex--item, +.gy32.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su32) * 0.9166666666666666)); +} + +.g32 > .flex--item2, +.gx32 > .flex--item2, +.gy32 > .flex--item2, +.g32.flex__allitems2 > .d-flex, +.gx32.flex__allitems2 > .d-flex, +.gy32.flex__allitems2 > .d-flex, +.g32.flex__allitems2 > .flex--item, +.gx32.flex__allitems2 > .flex--item, +.gy32.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su32) * 0.8333333333333334)); +} + +.g32 > .flex--item3, +.gx32 > .flex--item3, +.gy32 > .flex--item3, +.g32.flex__allitems3 > .d-flex, +.gx32.flex__allitems3 > .d-flex, +.gy32.flex__allitems3 > .d-flex, +.g32.flex__allitems3 > .flex--item, +.gx32.flex__allitems3 > .flex--item, +.gy32.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su32) * 0.75)); +} + +.g32 > .flex--item4, +.gx32 > .flex--item4, +.gy32 > .flex--item4, +.g32.flex__allitems4 > .d-flex, +.gx32.flex__allitems4 > .d-flex, +.gy32.flex__allitems4 > .d-flex, +.g32.flex__allitems4 > .flex--item, +.gx32.flex__allitems4 > .flex--item, +.gy32.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su32) * 0.6666666666666666)); +} + +.g32 > .flex--item5, +.gx32 > .flex--item5, +.gy32 > .flex--item5, +.g32.flex__allitems5 > .d-flex, +.gx32.flex__allitems5 > .d-flex, +.gy32.flex__allitems5 > .d-flex, +.g32.flex__allitems5 > .flex--item, +.gx32.flex__allitems5 > .flex--item, +.gy32.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su32) * 0.5833333333333334)); +} + +.g32 > .flex--item6, +.gx32 > .flex--item6, +.gy32 > .flex--item6, +.g32.flex__allitems6 > .d-flex, +.gx32.flex__allitems6 > .d-flex, +.gy32.flex__allitems6 > .d-flex, +.g32.flex__allitems6 > .flex--item, +.gx32.flex__allitems6 > .flex--item, +.gy32.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su32) * 0.5)); +} + +.g32 > .flex--item7, +.gx32 > .flex--item7, +.gy32 > .flex--item7, +.g32.flex__allitems7 > .d-flex, +.gx32.flex__allitems7 > .d-flex, +.gy32.flex__allitems7 > .d-flex, +.g32.flex__allitems7 > .flex--item, +.gx32.flex__allitems7 > .flex--item, +.gy32.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su32) * 0.4166666666666667)); +} + +.g32 > .flex--item8, +.gx32 > .flex--item8, +.gy32 > .flex--item8, +.g32.flex__allitems8 > .d-flex, +.gx32.flex__allitems8 > .d-flex, +.gy32.flex__allitems8 > .d-flex, +.g32.flex__allitems8 > .flex--item, +.gx32.flex__allitems8 > .flex--item, +.gy32.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su32) * 0.3333333333333333)); +} + +.g32 > .flex--item9, +.gx32 > .flex--item9, +.gy32 > .flex--item9, +.g32.flex__allitems9 > .d-flex, +.gx32.flex__allitems9 > .d-flex, +.gy32.flex__allitems9 > .d-flex, +.g32.flex__allitems9 > .flex--item, +.gx32.flex__allitems9 > .flex--item, +.gy32.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su32) * 0.25)); +} + +.g32 > .flex--item10, +.gx32 > .flex--item10, +.gy32 > .flex--item10, +.g32.flex__allitems10 > .d-flex, +.gx32.flex__allitems10 > .d-flex, +.gy32.flex__allitems10 > .d-flex, +.g32.flex__allitems10 > .flex--item, +.gx32.flex__allitems10 > .flex--item, +.gy32.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su32) * 0.16666666666666666)); +} + +.g32 > .flex--item11, +.gx32 > .flex--item11, +.gy32 > .flex--item11, +.g32.flex__allitems11 > .d-flex, +.gx32.flex__allitems11 > .d-flex, +.gy32.flex__allitems11 > .d-flex, +.g32.flex__allitems11 > .flex--item, +.gx32.flex__allitems11 > .flex--item, +.gy32.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su32) * 0.08333333333333333)); +} + +.g32 > .flex--item12, +.gx32 > .flex--item12, +.gy32 > .flex--item12, +.g32.flex__allitems12 > .d-flex, +.gx32.flex__allitems12 > .d-flex, +.gy32.flex__allitems12 > .d-flex, +.g32.flex__allitems12 > .flex--item, +.gx32.flex__allitems12 > .flex--item, +.gy32.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su32) * 0)); +} + +.g48 > .flex--item1, +.gx48 > .flex--item1, +.gy48 > .flex--item1, +.g48.flex__allitems1 > .d-flex, +.gx48.flex__allitems1 > .d-flex, +.gy48.flex__allitems1 > .d-flex, +.g48.flex__allitems1 > .flex--item, +.gx48.flex__allitems1 > .flex--item, +.gy48.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su48) * 0.9166666666666666)); +} + +.g48 > .flex--item2, +.gx48 > .flex--item2, +.gy48 > .flex--item2, +.g48.flex__allitems2 > .d-flex, +.gx48.flex__allitems2 > .d-flex, +.gy48.flex__allitems2 > .d-flex, +.g48.flex__allitems2 > .flex--item, +.gx48.flex__allitems2 > .flex--item, +.gy48.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su48) * 0.8333333333333334)); +} + +.g48 > .flex--item3, +.gx48 > .flex--item3, +.gy48 > .flex--item3, +.g48.flex__allitems3 > .d-flex, +.gx48.flex__allitems3 > .d-flex, +.gy48.flex__allitems3 > .d-flex, +.g48.flex__allitems3 > .flex--item, +.gx48.flex__allitems3 > .flex--item, +.gy48.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su48) * 0.75)); +} + +.g48 > .flex--item4, +.gx48 > .flex--item4, +.gy48 > .flex--item4, +.g48.flex__allitems4 > .d-flex, +.gx48.flex__allitems4 > .d-flex, +.gy48.flex__allitems4 > .d-flex, +.g48.flex__allitems4 > .flex--item, +.gx48.flex__allitems4 > .flex--item, +.gy48.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su48) * 0.6666666666666666)); +} + +.g48 > .flex--item5, +.gx48 > .flex--item5, +.gy48 > .flex--item5, +.g48.flex__allitems5 > .d-flex, +.gx48.flex__allitems5 > .d-flex, +.gy48.flex__allitems5 > .d-flex, +.g48.flex__allitems5 > .flex--item, +.gx48.flex__allitems5 > .flex--item, +.gy48.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su48) * 0.5833333333333334)); +} + +.g48 > .flex--item6, +.gx48 > .flex--item6, +.gy48 > .flex--item6, +.g48.flex__allitems6 > .d-flex, +.gx48.flex__allitems6 > .d-flex, +.gy48.flex__allitems6 > .d-flex, +.g48.flex__allitems6 > .flex--item, +.gx48.flex__allitems6 > .flex--item, +.gy48.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su48) * 0.5)); +} + +.g48 > .flex--item7, +.gx48 > .flex--item7, +.gy48 > .flex--item7, +.g48.flex__allitems7 > .d-flex, +.gx48.flex__allitems7 > .d-flex, +.gy48.flex__allitems7 > .d-flex, +.g48.flex__allitems7 > .flex--item, +.gx48.flex__allitems7 > .flex--item, +.gy48.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su48) * 0.4166666666666667)); +} + +.g48 > .flex--item8, +.gx48 > .flex--item8, +.gy48 > .flex--item8, +.g48.flex__allitems8 > .d-flex, +.gx48.flex__allitems8 > .d-flex, +.gy48.flex__allitems8 > .d-flex, +.g48.flex__allitems8 > .flex--item, +.gx48.flex__allitems8 > .flex--item, +.gy48.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su48) * 0.3333333333333333)); +} + +.g48 > .flex--item9, +.gx48 > .flex--item9, +.gy48 > .flex--item9, +.g48.flex__allitems9 > .d-flex, +.gx48.flex__allitems9 > .d-flex, +.gy48.flex__allitems9 > .d-flex, +.g48.flex__allitems9 > .flex--item, +.gx48.flex__allitems9 > .flex--item, +.gy48.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su48) * 0.25)); +} + +.g48 > .flex--item10, +.gx48 > .flex--item10, +.gy48 > .flex--item10, +.g48.flex__allitems10 > .d-flex, +.gx48.flex__allitems10 > .d-flex, +.gy48.flex__allitems10 > .d-flex, +.g48.flex__allitems10 > .flex--item, +.gx48.flex__allitems10 > .flex--item, +.gy48.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su48) * 0.16666666666666666)); +} + +.g48 > .flex--item11, +.gx48 > .flex--item11, +.gy48 > .flex--item11, +.g48.flex__allitems11 > .d-flex, +.gx48.flex__allitems11 > .d-flex, +.gy48.flex__allitems11 > .d-flex, +.g48.flex__allitems11 > .flex--item, +.gx48.flex__allitems11 > .flex--item, +.gy48.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su48) * 0.08333333333333333)); +} + +.g48 > .flex--item12, +.gx48 > .flex--item12, +.gy48 > .flex--item12, +.g48.flex__allitems12 > .d-flex, +.gx48.flex__allitems12 > .d-flex, +.gy48.flex__allitems12 > .d-flex, +.g48.flex__allitems12 > .flex--item, +.gx48.flex__allitems12 > .flex--item, +.gy48.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su48) * 0)); +} + +.g64 > .flex--item1, +.gx64 > .flex--item1, +.gy64 > .flex--item1, +.g64.flex__allitems1 > .d-flex, +.gx64.flex__allitems1 > .d-flex, +.gy64.flex__allitems1 > .d-flex, +.g64.flex__allitems1 > .flex--item, +.gx64.flex__allitems1 > .flex--item, +.gy64.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - (var(--su64) * 0.9166666666666666)); +} + +.g64 > .flex--item2, +.gx64 > .flex--item2, +.gy64 > .flex--item2, +.g64.flex__allitems2 > .d-flex, +.gx64.flex__allitems2 > .d-flex, +.gy64.flex__allitems2 > .d-flex, +.g64.flex__allitems2 > .flex--item, +.gx64.flex__allitems2 > .flex--item, +.gy64.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - (var(--su64) * 0.8333333333333334)); +} + +.g64 > .flex--item3, +.gx64 > .flex--item3, +.gy64 > .flex--item3, +.g64.flex__allitems3 > .d-flex, +.gx64.flex__allitems3 > .d-flex, +.gy64.flex__allitems3 > .d-flex, +.g64.flex__allitems3 > .flex--item, +.gx64.flex__allitems3 > .flex--item, +.gy64.flex__allitems3 > .flex--item { + flex-basis: calc(25% - (var(--su64) * 0.75)); +} + +.g64 > .flex--item4, +.gx64 > .flex--item4, +.gy64 > .flex--item4, +.g64.flex__allitems4 > .d-flex, +.gx64.flex__allitems4 > .d-flex, +.gy64.flex__allitems4 > .d-flex, +.g64.flex__allitems4 > .flex--item, +.gx64.flex__allitems4 > .flex--item, +.gy64.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - (var(--su64) * 0.6666666666666666)); +} + +.g64 > .flex--item5, +.gx64 > .flex--item5, +.gy64 > .flex--item5, +.g64.flex__allitems5 > .d-flex, +.gx64.flex__allitems5 > .d-flex, +.gy64.flex__allitems5 > .d-flex, +.g64.flex__allitems5 > .flex--item, +.gx64.flex__allitems5 > .flex--item, +.gy64.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - (var(--su64) * 0.5833333333333334)); +} + +.g64 > .flex--item6, +.gx64 > .flex--item6, +.gy64 > .flex--item6, +.g64.flex__allitems6 > .d-flex, +.gx64.flex__allitems6 > .d-flex, +.gy64.flex__allitems6 > .d-flex, +.g64.flex__allitems6 > .flex--item, +.gx64.flex__allitems6 > .flex--item, +.gy64.flex__allitems6 > .flex--item { + flex-basis: calc(50% - (var(--su64) * 0.5)); +} + +.g64 > .flex--item7, +.gx64 > .flex--item7, +.gy64 > .flex--item7, +.g64.flex__allitems7 > .d-flex, +.gx64.flex__allitems7 > .d-flex, +.gy64.flex__allitems7 > .d-flex, +.g64.flex__allitems7 > .flex--item, +.gx64.flex__allitems7 > .flex--item, +.gy64.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - (var(--su64) * 0.4166666666666667)); +} + +.g64 > .flex--item8, +.gx64 > .flex--item8, +.gy64 > .flex--item8, +.g64.flex__allitems8 > .d-flex, +.gx64.flex__allitems8 > .d-flex, +.gy64.flex__allitems8 > .d-flex, +.g64.flex__allitems8 > .flex--item, +.gx64.flex__allitems8 > .flex--item, +.gy64.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - (var(--su64) * 0.3333333333333333)); +} + +.g64 > .flex--item9, +.gx64 > .flex--item9, +.gy64 > .flex--item9, +.g64.flex__allitems9 > .d-flex, +.gx64.flex__allitems9 > .d-flex, +.gy64.flex__allitems9 > .d-flex, +.g64.flex__allitems9 > .flex--item, +.gx64.flex__allitems9 > .flex--item, +.gy64.flex__allitems9 > .flex--item { + flex-basis: calc(75% - (var(--su64) * 0.25)); +} + +.g64 > .flex--item10, +.gx64 > .flex--item10, +.gy64 > .flex--item10, +.g64.flex__allitems10 > .d-flex, +.gx64.flex__allitems10 > .d-flex, +.gy64.flex__allitems10 > .d-flex, +.g64.flex__allitems10 > .flex--item, +.gx64.flex__allitems10 > .flex--item, +.gy64.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - (var(--su64) * 0.16666666666666666)); +} + +.g64 > .flex--item11, +.gx64 > .flex--item11, +.gy64 > .flex--item11, +.g64.flex__allitems11 > .d-flex, +.gx64.flex__allitems11 > .d-flex, +.gy64.flex__allitems11 > .d-flex, +.g64.flex__allitems11 > .flex--item, +.gx64.flex__allitems11 > .flex--item, +.gy64.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - (var(--su64) * 0.08333333333333333)); +} + +.g64 > .flex--item12, +.gx64 > .flex--item12, +.gy64 > .flex--item12, +.g64.flex__allitems12 > .d-flex, +.gx64.flex__allitems12 > .d-flex, +.gy64.flex__allitems12 > .d-flex, +.g64.flex__allitems12 > .flex--item, +.gx64.flex__allitems12 > .flex--item, +.gy64.flex__allitems12 > .flex--item { + flex-basis: calc(100% - (var(--su64) * 0)); +} + +.gs2 { + margin: calc(var(--su2) / 2 * -1); +} + +.gs2 > .d-flex, +.gs2 > .flex--item { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item1 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item1, +.gs2.flex__allitems1 > .d-flex, +.gs2.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su2)); +} + +.gs2 > .flex--item2 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item2, +.gs2.flex__allitems2 > .d-flex, +.gs2.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su2)); +} + +.gs2 > .flex--item3 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item3, +.gs2.flex__allitems3 > .d-flex, +.gs2.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su2)); +} + +.gs2 > .flex--item4 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item4, +.gs2.flex__allitems4 > .d-flex, +.gs2.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su2)); +} + +.gs2 > .flex--item5 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item5, +.gs2.flex__allitems5 > .d-flex, +.gs2.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su2)); +} + +.gs2 > .flex--item6 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item6, +.gs2.flex__allitems6 > .d-flex, +.gs2.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su2)); +} + +.gs2 > .flex--item7 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item7, +.gs2.flex__allitems7 > .d-flex, +.gs2.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su2)); +} + +.gs2 > .flex--item8 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item8, +.gs2.flex__allitems8 > .d-flex, +.gs2.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su2)); +} + +.gs2 > .flex--item9 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item9, +.gs2.flex__allitems9 > .d-flex, +.gs2.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su2)); +} + +.gs2 > .flex--item10 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item10, +.gs2.flex__allitems10 > .d-flex, +.gs2.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su2)); +} + +.gs2 > .flex--item11 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item11, +.gs2.flex__allitems11 > .d-flex, +.gs2.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su2)); +} + +.gs2 > .flex--item12 { + margin: calc(var(--su2) / 2); +} + +.gs2 > .flex--item12, +.gs2.flex__allitems12 > .d-flex, +.gs2.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su2)); +} + +.gs4 { + margin: calc(var(--su4) / 2 * -1); +} + +.gs4 > .d-flex, +.gs4 > .flex--item { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item1 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item1, +.gs4.flex__allitems1 > .d-flex, +.gs4.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su4)); +} + +.gs4 > .flex--item2 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item2, +.gs4.flex__allitems2 > .d-flex, +.gs4.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su4)); +} + +.gs4 > .flex--item3 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item3, +.gs4.flex__allitems3 > .d-flex, +.gs4.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su4)); +} + +.gs4 > .flex--item4 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item4, +.gs4.flex__allitems4 > .d-flex, +.gs4.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su4)); +} + +.gs4 > .flex--item5 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item5, +.gs4.flex__allitems5 > .d-flex, +.gs4.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su4)); +} + +.gs4 > .flex--item6 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item6, +.gs4.flex__allitems6 > .d-flex, +.gs4.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su4)); +} + +.gs4 > .flex--item7 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item7, +.gs4.flex__allitems7 > .d-flex, +.gs4.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su4)); +} + +.gs4 > .flex--item8 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item8, +.gs4.flex__allitems8 > .d-flex, +.gs4.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su4)); +} + +.gs4 > .flex--item9 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item9, +.gs4.flex__allitems9 > .d-flex, +.gs4.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su4)); +} + +.gs4 > .flex--item10 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item10, +.gs4.flex__allitems10 > .d-flex, +.gs4.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su4)); +} + +.gs4 > .flex--item11 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item11, +.gs4.flex__allitems11 > .d-flex, +.gs4.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su4)); +} + +.gs4 > .flex--item12 { + margin: calc(var(--su4) / 2); +} + +.gs4 > .flex--item12, +.gs4.flex__allitems12 > .d-flex, +.gs4.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su4)); +} + +.gs6 { + margin: calc(var(--su6) / 2 * -1); +} + +.gs6 > .d-flex, +.gs6 > .flex--item { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item1 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item1, +.gs6.flex__allitems1 > .d-flex, +.gs6.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su6)); +} + +.gs6 > .flex--item2 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item2, +.gs6.flex__allitems2 > .d-flex, +.gs6.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su6)); +} + +.gs6 > .flex--item3 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item3, +.gs6.flex__allitems3 > .d-flex, +.gs6.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su6)); +} + +.gs6 > .flex--item4 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item4, +.gs6.flex__allitems4 > .d-flex, +.gs6.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su6)); +} + +.gs6 > .flex--item5 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item5, +.gs6.flex__allitems5 > .d-flex, +.gs6.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su6)); +} + +.gs6 > .flex--item6 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item6, +.gs6.flex__allitems6 > .d-flex, +.gs6.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su6)); +} + +.gs6 > .flex--item7 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item7, +.gs6.flex__allitems7 > .d-flex, +.gs6.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su6)); +} + +.gs6 > .flex--item8 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item8, +.gs6.flex__allitems8 > .d-flex, +.gs6.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su6)); +} + +.gs6 > .flex--item9 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item9, +.gs6.flex__allitems9 > .d-flex, +.gs6.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su6)); +} + +.gs6 > .flex--item10 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item10, +.gs6.flex__allitems10 > .d-flex, +.gs6.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su6)); +} + +.gs6 > .flex--item11 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item11, +.gs6.flex__allitems11 > .d-flex, +.gs6.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su6)); +} + +.gs6 > .flex--item12 { + margin: calc(var(--su6) / 2); +} + +.gs6 > .flex--item12, +.gs6.flex__allitems12 > .d-flex, +.gs6.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su6)); +} + +.gs8 { + margin: calc(var(--su8) / 2 * -1); +} + +.gs8 > .d-flex, +.gs8 > .flex--item { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item1 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item1, +.gs8.flex__allitems1 > .d-flex, +.gs8.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su8)); +} + +.gs8 > .flex--item2 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item2, +.gs8.flex__allitems2 > .d-flex, +.gs8.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su8)); +} + +.gs8 > .flex--item3 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item3, +.gs8.flex__allitems3 > .d-flex, +.gs8.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su8)); +} + +.gs8 > .flex--item4 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item4, +.gs8.flex__allitems4 > .d-flex, +.gs8.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su8)); +} + +.gs8 > .flex--item5 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item5, +.gs8.flex__allitems5 > .d-flex, +.gs8.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su8)); +} + +.gs8 > .flex--item6 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item6, +.gs8.flex__allitems6 > .d-flex, +.gs8.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su8)); +} + +.gs8 > .flex--item7 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item7, +.gs8.flex__allitems7 > .d-flex, +.gs8.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su8)); +} + +.gs8 > .flex--item8 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item8, +.gs8.flex__allitems8 > .d-flex, +.gs8.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su8)); +} + +.gs8 > .flex--item9 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item9, +.gs8.flex__allitems9 > .d-flex, +.gs8.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su8)); +} + +.gs8 > .flex--item10 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item10, +.gs8.flex__allitems10 > .d-flex, +.gs8.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su8)); +} + +.gs8 > .flex--item11 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item11, +.gs8.flex__allitems11 > .d-flex, +.gs8.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su8)); +} + +.gs8 > .flex--item12 { + margin: calc(var(--su8) / 2); +} + +.gs8 > .flex--item12, +.gs8.flex__allitems12 > .d-flex, +.gs8.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su8)); +} + +.gs12 { + margin: calc(var(--su12) / 2 * -1); +} + +.gs12 > .d-flex, +.gs12 > .flex--item { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item1 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item1, +.gs12.flex__allitems1 > .d-flex, +.gs12.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su12)); +} + +.gs12 > .flex--item2 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item2, +.gs12.flex__allitems2 > .d-flex, +.gs12.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su12)); +} + +.gs12 > .flex--item3 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item3, +.gs12.flex__allitems3 > .d-flex, +.gs12.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su12)); +} + +.gs12 > .flex--item4 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item4, +.gs12.flex__allitems4 > .d-flex, +.gs12.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su12)); +} + +.gs12 > .flex--item5 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item5, +.gs12.flex__allitems5 > .d-flex, +.gs12.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su12)); +} + +.gs12 > .flex--item6 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item6, +.gs12.flex__allitems6 > .d-flex, +.gs12.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su12)); +} + +.gs12 > .flex--item7 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item7, +.gs12.flex__allitems7 > .d-flex, +.gs12.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su12)); +} + +.gs12 > .flex--item8 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item8, +.gs12.flex__allitems8 > .d-flex, +.gs12.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su12)); +} + +.gs12 > .flex--item9 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item9, +.gs12.flex__allitems9 > .d-flex, +.gs12.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su12)); +} + +.gs12 > .flex--item10 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item10, +.gs12.flex__allitems10 > .d-flex, +.gs12.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su12)); +} + +.gs12 > .flex--item11 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item11, +.gs12.flex__allitems11 > .d-flex, +.gs12.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su12)); +} + +.gs12 > .flex--item12 { + margin: calc(var(--su12) / 2); +} + +.gs12 > .flex--item12, +.gs12.flex__allitems12 > .d-flex, +.gs12.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su12)); +} + +.gs16 { + margin: calc(var(--su16) / 2 * -1); +} + +.gs16 > .d-flex, +.gs16 > .flex--item { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item1 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item1, +.gs16.flex__allitems1 > .d-flex, +.gs16.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su16)); +} + +.gs16 > .flex--item2 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item2, +.gs16.flex__allitems2 > .d-flex, +.gs16.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su16)); +} + +.gs16 > .flex--item3 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item3, +.gs16.flex__allitems3 > .d-flex, +.gs16.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su16)); +} + +.gs16 > .flex--item4 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item4, +.gs16.flex__allitems4 > .d-flex, +.gs16.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su16)); +} + +.gs16 > .flex--item5 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item5, +.gs16.flex__allitems5 > .d-flex, +.gs16.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su16)); +} + +.gs16 > .flex--item6 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item6, +.gs16.flex__allitems6 > .d-flex, +.gs16.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su16)); +} + +.gs16 > .flex--item7 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item7, +.gs16.flex__allitems7 > .d-flex, +.gs16.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su16)); +} + +.gs16 > .flex--item8 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item8, +.gs16.flex__allitems8 > .d-flex, +.gs16.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su16)); +} + +.gs16 > .flex--item9 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item9, +.gs16.flex__allitems9 > .d-flex, +.gs16.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su16)); +} + +.gs16 > .flex--item10 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item10, +.gs16.flex__allitems10 > .d-flex, +.gs16.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su16)); +} + +.gs16 > .flex--item11 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item11, +.gs16.flex__allitems11 > .d-flex, +.gs16.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su16)); +} + +.gs16 > .flex--item12 { + margin: calc(var(--su16) / 2); +} + +.gs16 > .flex--item12, +.gs16.flex__allitems12 > .d-flex, +.gs16.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su16)); +} + +.gs24 { + margin: calc(var(--su24) / 2 * -1); +} + +.gs24 > .d-flex, +.gs24 > .flex--item { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item1 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item1, +.gs24.flex__allitems1 > .d-flex, +.gs24.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su24)); +} + +.gs24 > .flex--item2 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item2, +.gs24.flex__allitems2 > .d-flex, +.gs24.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su24)); +} + +.gs24 > .flex--item3 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item3, +.gs24.flex__allitems3 > .d-flex, +.gs24.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su24)); +} + +.gs24 > .flex--item4 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item4, +.gs24.flex__allitems4 > .d-flex, +.gs24.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su24)); +} + +.gs24 > .flex--item5 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item5, +.gs24.flex__allitems5 > .d-flex, +.gs24.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su24)); +} + +.gs24 > .flex--item6 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item6, +.gs24.flex__allitems6 > .d-flex, +.gs24.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su24)); +} + +.gs24 > .flex--item7 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item7, +.gs24.flex__allitems7 > .d-flex, +.gs24.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su24)); +} + +.gs24 > .flex--item8 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item8, +.gs24.flex__allitems8 > .d-flex, +.gs24.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su24)); +} + +.gs24 > .flex--item9 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item9, +.gs24.flex__allitems9 > .d-flex, +.gs24.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su24)); +} + +.gs24 > .flex--item10 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item10, +.gs24.flex__allitems10 > .d-flex, +.gs24.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su24)); +} + +.gs24 > .flex--item11 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item11, +.gs24.flex__allitems11 > .d-flex, +.gs24.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su24)); +} + +.gs24 > .flex--item12 { + margin: calc(var(--su24) / 2); +} + +.gs24 > .flex--item12, +.gs24.flex__allitems12 > .d-flex, +.gs24.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su24)); +} + +.gs32 { + margin: calc(var(--su32) / 2 * -1); +} + +.gs32 > .d-flex, +.gs32 > .flex--item { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item1 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item1, +.gs32.flex__allitems1 > .d-flex, +.gs32.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su32)); +} + +.gs32 > .flex--item2 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item2, +.gs32.flex__allitems2 > .d-flex, +.gs32.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su32)); +} + +.gs32 > .flex--item3 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item3, +.gs32.flex__allitems3 > .d-flex, +.gs32.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su32)); +} + +.gs32 > .flex--item4 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item4, +.gs32.flex__allitems4 > .d-flex, +.gs32.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su32)); +} + +.gs32 > .flex--item5 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item5, +.gs32.flex__allitems5 > .d-flex, +.gs32.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su32)); +} + +.gs32 > .flex--item6 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item6, +.gs32.flex__allitems6 > .d-flex, +.gs32.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su32)); +} + +.gs32 > .flex--item7 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item7, +.gs32.flex__allitems7 > .d-flex, +.gs32.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su32)); +} + +.gs32 > .flex--item8 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item8, +.gs32.flex__allitems8 > .d-flex, +.gs32.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su32)); +} + +.gs32 > .flex--item9 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item9, +.gs32.flex__allitems9 > .d-flex, +.gs32.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su32)); +} + +.gs32 > .flex--item10 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item10, +.gs32.flex__allitems10 > .d-flex, +.gs32.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su32)); +} + +.gs32 > .flex--item11 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item11, +.gs32.flex__allitems11 > .d-flex, +.gs32.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su32)); +} + +.gs32 > .flex--item12 { + margin: calc(var(--su32) / 2); +} + +.gs32 > .flex--item12, +.gs32.flex__allitems12 > .d-flex, +.gs32.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su32)); +} + +.gs48 { + margin: calc(var(--su48) / 2 * -1); +} + +.gs48 > .d-flex, +.gs48 > .flex--item { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item1 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item1, +.gs48.flex__allitems1 > .d-flex, +.gs48.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su48)); +} + +.gs48 > .flex--item2 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item2, +.gs48.flex__allitems2 > .d-flex, +.gs48.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su48)); +} + +.gs48 > .flex--item3 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item3, +.gs48.flex__allitems3 > .d-flex, +.gs48.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su48)); +} + +.gs48 > .flex--item4 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item4, +.gs48.flex__allitems4 > .d-flex, +.gs48.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su48)); +} + +.gs48 > .flex--item5 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item5, +.gs48.flex__allitems5 > .d-flex, +.gs48.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su48)); +} + +.gs48 > .flex--item6 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item6, +.gs48.flex__allitems6 > .d-flex, +.gs48.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su48)); +} + +.gs48 > .flex--item7 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item7, +.gs48.flex__allitems7 > .d-flex, +.gs48.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su48)); +} + +.gs48 > .flex--item8 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item8, +.gs48.flex__allitems8 > .d-flex, +.gs48.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su48)); +} + +.gs48 > .flex--item9 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item9, +.gs48.flex__allitems9 > .d-flex, +.gs48.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su48)); +} + +.gs48 > .flex--item10 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item10, +.gs48.flex__allitems10 > .d-flex, +.gs48.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su48)); +} + +.gs48 > .flex--item11 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item11, +.gs48.flex__allitems11 > .d-flex, +.gs48.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su48)); +} + +.gs48 > .flex--item12 { + margin: calc(var(--su48) / 2); +} + +.gs48 > .flex--item12, +.gs48.flex__allitems12 > .d-flex, +.gs48.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su48)); +} + +.gs64 { + margin: calc(var(--su64) / 2 * -1); +} + +.gs64 > .d-flex, +.gs64 > .flex--item { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item1 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item1, +.gs64.flex__allitems1 > .d-flex, +.gs64.flex__allitems1 > .flex--item { + flex-basis: calc(8.333333333333334% - var(--su64)); +} + +.gs64 > .flex--item2 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item2, +.gs64.flex__allitems2 > .d-flex, +.gs64.flex__allitems2 > .flex--item { + flex-basis: calc(16.666666666666668% - var(--su64)); +} + +.gs64 > .flex--item3 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item3, +.gs64.flex__allitems3 > .d-flex, +.gs64.flex__allitems3 > .flex--item { + flex-basis: calc(25% - var(--su64)); +} + +.gs64 > .flex--item4 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item4, +.gs64.flex__allitems4 > .d-flex, +.gs64.flex__allitems4 > .flex--item { + flex-basis: calc(33.333333333333336% - var(--su64)); +} + +.gs64 > .flex--item5 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item5, +.gs64.flex__allitems5 > .d-flex, +.gs64.flex__allitems5 > .flex--item { + flex-basis: calc(41.666666666666664% - var(--su64)); +} + +.gs64 > .flex--item6 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item6, +.gs64.flex__allitems6 > .d-flex, +.gs64.flex__allitems6 > .flex--item { + flex-basis: calc(50% - var(--su64)); +} + +.gs64 > .flex--item7 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item7, +.gs64.flex__allitems7 > .d-flex, +.gs64.flex__allitems7 > .flex--item { + flex-basis: calc(58.333333333333336% - var(--su64)); +} + +.gs64 > .flex--item8 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item8, +.gs64.flex__allitems8 > .d-flex, +.gs64.flex__allitems8 > .flex--item { + flex-basis: calc(66.66666666666667% - var(--su64)); +} + +.gs64 > .flex--item9 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item9, +.gs64.flex__allitems9 > .d-flex, +.gs64.flex__allitems9 > .flex--item { + flex-basis: calc(75% - var(--su64)); +} + +.gs64 > .flex--item10 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item10, +.gs64.flex__allitems10 > .d-flex, +.gs64.flex__allitems10 > .flex--item { + flex-basis: calc(83.33333333333333% - var(--su64)); +} + +.gs64 > .flex--item11 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item11, +.gs64.flex__allitems11 > .d-flex, +.gs64.flex__allitems11 > .flex--item { + flex-basis: calc(91.66666666666667% - var(--su64)); +} + +.gs64 > .flex--item12 { + margin: calc(var(--su64) / 2); +} + +.gs64 > .flex--item12, +.gs64.flex__allitems12 > .d-flex, +.gs64.flex__allitems12 > .flex--item { + flex-basis: calc(100% - var(--su64)); +} + +.gsx, +.gsx > .d-flex, +.gsx > [class*="flex--item"] { + margin-top: 0; + margin-bottom: 0; +} + +.gsy, +.gsy > .d-flex, +.gsy > [class*="flex--item"] { + margin-right: 0; + margin-left: 0; +} + +.fd-row { + flex-direction: row !important; +} + +.fd-row-reverse { + flex-direction: row-reverse !important; +} + +.fd-column { + flex-direction: column !important; +} + +.fd-column-reverse { + flex-direction: column-reverse !important; +} + +.fw-wrap { + flex-wrap: wrap !important; +} + +.fw-reverse { + flex-wrap: wrap-reverse !important; +} + +.fw-nowrap { + flex-wrap: nowrap !important; +} + +.jc-center { + justify-content: center !important; +} + +.jc-end { + justify-content: flex-end !important; +} + +.jc-space-around { + justify-content: space-around !important; +} + +.jc-space-between { + justify-content: space-between !important; +} + +.jc-space-evenly { + justify-content: space-evenly !important; +} + +.jc-start { + justify-content: flex-start !important; +} + +.ac-center { + align-content: center !important; +} + +.ac-end { + align-content: flex-end !important; +} + +.ac-space-around { + align-content: space-around !important; +} + +.ac-space-between { + align-content: space-between !important; +} + +.ac-start { + align-content: flex-start !important; +} + +.ac-stretch { + align-content: stretch !important; +} + +.ai-baseline { + align-items: baseline !important; +} + +.ai-center { + align-items: center !important; +} + +.ai-end { + align-items: flex-end !important; +} + +.ai-start { + align-items: flex-start !important; +} + +.ai-stretch { + align-items: stretch !important; +} + +.flex__center { + justify-content: center !important; + align-items: center !important; +} + +.as-auto { + align-self: auto !important; +} + +.as-baseline { + align-self: baseline !important; +} + +.as-center { + align-self: center !important; +} + +.as-end { + align-self: flex-end !important; +} + +.as-start { + align-self: flex-start !important; +} + +.as-stretch { + align-self: stretch !important; +} + +.as-true { + align-self: true !important; +} + +.fl-grow1 { + flex-grow: 1 !important; +} + +.fl-grow0 { + flex-grow: 0 !important; +} + +.fl-shrink1 { + flex-shrink: 1 !important; +} + +.fl-shrink0 { + flex-shrink: 0 !important; +} + +.fl-none { + flex: none !important; +} + +.fl-initial { + flex: 0 1 auto !important; +} + +.fl-auto { + flex: 1 1 auto !important; +} + +.fl-equal { + flex: 1 1 0% !important; +} + +.order-first { + order: -1 !important; +} + +.order-last { + order: 1 !important; +} + +.ff-row-wrap { + flex-flow: row wrap !important; +} + +.ff-row-nowrap { + flex-flow: row nowrap !important; +} + +.ff-row-reverse-wrap { + flex-flow: row-reverse wrap !important; +} + +.ff-row-reverse-nowrap { + flex-flow: row-reverse nowrap !important; +} + +.ff-column-wrap { + flex-flow: column wrap !important; +} + +.ff-column-nowrap { + flex-flow: column nowrap !important; +} + +.ff-column-reverse-wrap { + flex-flow: column-reverse wrap !important; +} + +.ff-column-reverse-nowrap { + flex-flow: column-reverse nowrap !important; +} + +.fl0 { + flex: 0 auto !important; +} + +.fl1 { + flex: 1 auto !important; +} + +.fl2 { + flex: 2 auto !important; +} + +.fl3 { + flex: 3 auto !important; +} + +.fl4 { + flex: 4 auto !important; +} + +.fl5 { + flex: 5 auto !important; +} + +.fl-shrink2 { + flex-shrink: 2; +} + +.fl-shrink3 { + flex-shrink: 3; +} + +.fl-shrink4 { + flex-shrink: 4; +} + +.fl-shrink5 { + flex-shrink: 5; +} + +.fl-grow2 { + flex-grow: 2; +} + +.fl-grow3 { + flex-grow: 3; +} + +.fl-grow4 { + flex-grow: 4; +} + +.fl-grow5 { + flex-grow: 5; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/flex.less b/packages/stacks-classic/lib/atomic/flex.less index 6bc788412e..750e7f1a75 100644 --- a/packages/stacks-classic/lib/atomic/flex.less +++ b/packages/stacks-classic/lib/atomic/flex.less @@ -1,25 +1,4 @@ -// -// STACK OVERFLOW -// FLEXBOX HELPERS -// -// 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/ -// -// TABLE OF CONTENTS -// • VARIABLES -// • MIXINS -// • FLEX ELEMENTS -// • FLEX SPACING -// • MODIFICATIONS -// • ATOMIC -// • DEPRECATED -// -// ============================================================================ -// -- STACKS FLEX LAYOUT MIXINS -// ============================================================================ -// -- FIXED COLUMN WIDTHS -// ---------------------------------------------------------------------------- +@import (reference) "../base/internal.less"; #stacks-internals() { #flex-builder-settings() { From 85508695a2efb35527b696cb8a5525c8f0e45a89 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 17:21:16 -0500 Subject: [PATCH 13/18] Whoops, too many padding rules! --- packages/stacks-classic/lib/atomic/spacing.less | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/spacing.less b/packages/stacks-classic/lib/atomic/spacing.less index 9694d12f8e..27b6ba5a7a 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less +++ b/packages/stacks-classic/lib/atomic/spacing.less @@ -49,17 +49,10 @@ .generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true); // PADDING -.generate-sizing('.p', padding, @px-values, 'px'); .generate-sizing('.p', padding, @px-values, 'px', true); -.generate-sizing('.pt', padding-top, @px-values, 'px'); .generate-sizing('.pt', padding-top, @px-values, 'px', true); -.generate-sizing('.pr', padding-right, @px-values, 'px'); .generate-sizing('.pr', padding-right, @px-values, 'px', true); -.generate-sizing('.pb', padding-bottom, @px-values, 'px'); .generate-sizing('.pb', padding-bottom, @px-values, 'px', true); -.generate-sizing('.pl', padding-left, @px-values, 'px'); .generate-sizing('.pl', padding-left, @px-values, 'px', true); -.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'); .generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true); -.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'); .generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true); From d6ae6879665ff57bac63d4bf1fd53994fccb4c91 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 17:23:13 -0500 Subject: [PATCH 14/18] Move custom font-size to only `body`, not `html` --- packages/stacks-classic/lib/base/body.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/stacks-classic/lib/base/body.less b/packages/stacks-classic/lib/base/body.less index 898fe516d7..fcc4981e75 100644 --- a/packages/stacks-classic/lib/base/body.less +++ b/packages/stacks-classic/lib/base/body.less @@ -20,20 +20,18 @@ html, body { color: var(--theme-body-font-color, var(--black-600)); font-family: var(--theme-body-font-family); - font-size: var(--fs-body1); line-height: var(--lh-base); } body { + background-color: var(--theme-background-color, var(--white)); box-sizing: border-box; + font-size: var(--fs-body1); min-height: 100%; - background-color: var(--theme-background-color, var(--white)); *, *:before, *:after { box-sizing: inherit; } - - // TODO SHINE set max width here } From bc707a288f78d8a1b1ffa49b645ebef0f7ba71e9 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 18:13:29 -0500 Subject: [PATCH 15/18] Minor updates --- .../stacks-classic/lib/atomic/height.less.test.ts | 2 +- .../lib/atomic/positioning.less.test.ts | 2 +- .../lib/atomic/spacing.less.test.ts | 2 +- .../stacks-classic/lib/atomic/width.less.test.ts | 2 +- .../components/sidebar-widget/sidebar-widget.less | 2 +- packages/stacks-classic/lib/exports/mixins.less | 15 +++++++++++++++ 6 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/height.less.test.ts b/packages/stacks-classic/lib/atomic/height.less.test.ts index 72be882003..1bf4843de9 100644 --- a/packages/stacks-classic/lib/atomic/height.less.test.ts +++ b/packages/stacks-classic/lib/atomic/height.less.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; describe("atomic: height", () => { - it("should output all height custom properties", async () => { + it("should output all height classes", async () => { const css = await renderLess(` @import "./lib/atomic/height.less"; `); diff --git a/packages/stacks-classic/lib/atomic/positioning.less.test.ts b/packages/stacks-classic/lib/atomic/positioning.less.test.ts index 594c11959e..1bb9f095b3 100644 --- a/packages/stacks-classic/lib/atomic/positioning.less.test.ts +++ b/packages/stacks-classic/lib/atomic/positioning.less.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; describe("atomic: positioning", () => { - it("should output all atomic css classes", async () => { + it("should output all atomic positioning classes", async () => { const css = await renderLess(` @import "./lib/atomic/positioning.less"; `); diff --git a/packages/stacks-classic/lib/atomic/spacing.less.test.ts b/packages/stacks-classic/lib/atomic/spacing.less.test.ts index 83a7920ef9..ae588ac9e6 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less.test.ts +++ b/packages/stacks-classic/lib/atomic/spacing.less.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; describe("atomic: spacing", () => { - it("should output all atomic css classes", async () => { + it("should output all spacing classes", async () => { const css = await renderLess(` @import "./lib/atomic/spacing.less"; `); diff --git a/packages/stacks-classic/lib/atomic/width.less.test.ts b/packages/stacks-classic/lib/atomic/width.less.test.ts index a300d04801..2e8ebb0309 100644 --- a/packages/stacks-classic/lib/atomic/width.less.test.ts +++ b/packages/stacks-classic/lib/atomic/width.less.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; describe("atomic: width", () => { - it("should output all width custom properties", async () => { + it("should output all width classes", async () => { const css = await renderLess(` @import "./lib/atomic/width.less"; `); diff --git a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less index 205011aee2..0b0a72efb9 100644 --- a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less +++ b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less @@ -124,7 +124,7 @@ height: calc(100% + var(--su16)); left: 0; margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border - margin-top: var(--sun4); + margin-top: var(--sun8); position: absolute; } diff --git a/packages/stacks-classic/lib/exports/mixins.less b/packages/stacks-classic/lib/exports/mixins.less index d0d9f492b3..5ceb14203a 100644 --- a/packages/stacks-classic/lib/exports/mixins.less +++ b/packages/stacks-classic/lib/exports/mixins.less @@ -310,6 +310,21 @@ ); } + +/** + * Generate atomic sizing classes using predefined SU (spacing unit) values. + * + * Generates 12 utility classes (numbered 1-12) that map to specific SU values: + * 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280. + * + * Usage example: + * .generate-su-sizing('.ws', width); + * .generate-su-sizing('.hs', height); + * .generate-su-sizing('.wmn', min-width); + * + * @param {string} prefix - Class prefix to generate (e.g. `.ws`, `.hs`, `.wmn`). + * @param {string} property - CSS property to set (e.g. `width`, `height`, `min-width`). + */ .generate-su-sizing(@prefix, @property) { @su-values: 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280; #stacks-internals #build-classes( From 4dccfb0231eae5acff94f21e1ae316bdfcd26e83 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 18:16:33 -0500 Subject: [PATCH 16/18] Remove unused alias sizing unit custom propeties --- .../atomic/__snapshots__/sizing.less.test.ts.snap | 11 +++-------- packages/stacks-classic/lib/atomic/sizing.less | 15 +++------------ 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap index 8ca69d8569..5bc77abfc7 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap @@ -27,6 +27,9 @@ exports[`atomic: sizing > should output all sizing custom properties 1`] = ` --su1024: 64rem; --su1120: 70rem; --su1280: 80rem; + --su-max: var(--su1280); + --s-full: 79rem; + --s-step: calc(var(--s-full) / 12); --sun1: calc(var(--su1) * -1); --sun2: calc(var(--su2) * -1); --sun4: calc(var(--su4) * -1); @@ -40,12 +43,6 @@ exports[`atomic: sizing > should output all sizing custom properties 1`] = ` --sun64: calc(var(--su64) * -1); --sun96: calc(var(--su96) * -1); --sun128: calc(var(--su128) * -1); - --su-mobile-min: var(--su344); - --su-popover: var(--su448); - --su-tablet: var(--su640); - --su-content: var(--su960); - --su-dashboard: var(--su1120); - --su-max: var(--su1280); --su-static0: 0px; --su-static1: 1px; --su-static2: 2px; @@ -71,8 +68,6 @@ exports[`atomic: sizing > should output all sizing custom properties 1`] = ` --su-static1024: 1024px; --su-static1120: 1120px; --su-static1280: 1280px; - --s-full: 79rem; - --s-step: calc(var(--s-full) / 12); } " `; diff --git a/packages/stacks-classic/lib/atomic/sizing.less b/packages/stacks-classic/lib/atomic/sizing.less index ab75764be8..b9a38221d4 100644 --- a/packages/stacks-classic/lib/atomic/sizing.less +++ b/packages/stacks-classic/lib/atomic/sizing.less @@ -27,6 +27,9 @@ body { --su1024: 64rem; --su1120: 70rem; --su1280: 80rem; + --su-max: var(--su1280); + --s-full: 79rem; // Legacy sizing units for Stacks v2 + --s-step: calc(var(--s-full) / 12); // Legacy sizing units for Stacks v2 // Negative sizing // This is a common subset sizing units for negative values @@ -44,14 +47,6 @@ body { --sun96: calc(var(--su96) * -1); --sun128: calc(var(--su128) * -1); - // Size aliases - --su-mobile-min: var(--su344); - --su-popover: var(--su448); - --su-tablet: var(--su640); - --su-content: var(--su960); - --su-dashboard: var(--su1120); - --su-max: var(--su1280); - // Static (aka px) sizing units --su-static0: 0px; --su-static1: 1px; @@ -78,8 +73,4 @@ body { --su-static1024: 1024px; --su-static1120: 1120px; --su-static1280: 1280px; - - // Legacy sizing units for Stacks v2 - --s-full: 79rem; - --s-step: calc(var(--s-full) / 12); } From 05999e74e49982a0a121f9117b6f1909585db558 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 18:16:44 -0500 Subject: [PATCH 17/18] Less snapshot regen --- .../lib/atomic/__snapshots__/height.less.test.ts.snap | 2 +- .../lib/atomic/__snapshots__/positioning.less.test.ts.snap | 2 +- .../lib/atomic/__snapshots__/spacing.less.test.ts.snap | 2 +- .../lib/atomic/__snapshots__/width.less.test.ts.snap | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap index 986fd213e2..8f165e89bf 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: height > should output all height custom properties 1`] = ` +exports[`atomic: height > should output all height classes 1`] = ` ".h0 { height: var(--su0) !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap index 3798e40506..145c43c58f 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: positioning > should output all atomic css classes 1`] = ` +exports[`atomic: positioning > should output all atomic positioning classes 1`] = ` ".i0 { inset: var(--su0) !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap index ff768bf14c..c489da47e6 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: spacing > should output all atomic css classes 1`] = ` +exports[`atomic: spacing > should output all spacing classes 1`] = ` ".m-auto { margin: auto !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap index 3297dc274b..6b5582d3c3 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: width > should output all width custom properties 1`] = ` +exports[`atomic: width > should output all width classes 1`] = ` ".w0 { width: var(--su0) !important; } From 56402f71839c8313f274fe1d97496a1c18d81fa0 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 14 Jan 2026 16:28:43 -0500 Subject: [PATCH 18/18] Update migration guide --- MIGRATION_GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index b44a22956e..ed60242d6a 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -24,7 +24,7 @@ - Atomic classes now have a predefined line-height associated to them #### Width & Height -- Removed undocumented `.hmn0`, `.hmx0`, `.wmn0`, `.wmx0` +- Removed undocumented `.hmx0`, `.wmx0` - Added `.hmn-screen`, `.wmn-screen` ### Components
Width classClass Computed value rem valueResponsive?Responsive?
.ws{{ size.level }}{{ size.px }}pxwidth: {{ size.px }}px; {{ size.rem }}rem {% if size.responsive %} @@ -119,7 +118,7 @@
…
{% endhighlight %}
- {% for size in atomics.width-height.sizing-units %} + {% for size in atomics.sizing.sizing-units %}
.ws{{ size.level }}
@@ -128,24 +127,24 @@
- +
- {% header "h2", "Percentage width" %} + {% header "h2", "Fluid width" %} -

Percentage width is…

+

Fluid width classes are…

- {% header "h3", "Percentage width classes" %} + {% header "h3", "Fluid width classes" %}
- + - + - {% for size in atomics.width-height.percent %} + {% for size in atomics.sizing.percent %} @@ -157,8 +156,15 @@ {% endfor %} - - + + + + + + + @@ -167,7 +173,7 @@
ClassClass ValueResponsive?Responsive?
.w{{ size.percentage }} width: {{ size.percentage }}%
.h100height: 100%;.w-screenwidth: 100vw; + {% icon "Checkmark", "fc-green-400" %} +
.w-autowidth: auto; {% icon "Checkmark", "fc-green-400" %}
- {% header "h3", "Percentage width examples" %} + {% header "h3", "Fluid width examples" %}
{% highlight html %}
…
@@ -187,7 +193,7 @@ {% endhighlight %}
- {% for size in atomics.width-height.percent %} + {% for size in atomics.sizing.percent %}
.w{{ size.percentage }}
@@ -199,8 +205,151 @@
- - + +
+ {% header "h2", "Min width" %} + +

Min width classes are…

+ + {% header "h3", "Min width classes" %} +
+ + + + + + + + + + + + + + + + + {% for size in atomics.sizing.sizing-units %} + + + + + + + {% endfor %} + + {% assign percentItems = "25,50,75,100" %} + {% assign percentItems = percentItems | split: "," %} + {% for size in percentItems %} + + + + + + + {% endfor %} + + + + + + + + + + + + + +
ClassComputed valuerem valueResponsive?
.wmn0min-width: 0;- + {% icon "Checkmark", "fc-green-400" %} +
.wmn{{ size.level }}min-width: {{ size.px }}px;{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.wmn{{ size }}min-width: {{ size }}%;- + {% if size == "100" %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.wmn-screenmin-width: 100vh;- + {% icon "Checkmark", "fc-green-400" %} +
.wmn-initialmin-width: initial;- + {% icon "Checkmark", "fc-green-400" %} +
+
+
+ + +
+ {% header "h2", "Max width" %} + +

Max width classes are…

- - \ No newline at end of file + {% header "h3", "Max width classes" %} +
+ + + + + + + + + + + + + + + + + {% for size in atomics.sizing.sizing-units %} + + + + + + + {% endfor %} + + {% assign percentItems = "25,50,75,100" %} + {% assign percentItems = percentItems | split: "," %} + {% for size in percentItems %} + + + + + + + {% endfor %} + + + + + + + + + + + + + + +
ClassComputed valuerem valueResponsive?
.wmx0max-width: 0;- + {% icon "Checkmark", "fc-green-400" %} +
.wmx{{ size.level }}max-width: {{ size.px }}px;{{ size.rem }}rem + {% if size.responsive %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.wmx{{ size }}max-width: {{ size }}%;- + {% if size == "100" %} + {% icon "Checkmark", "fc-green-400" %} + {% endif %} +
.wmx-screenmax-width: 100vh;- + {% icon "Checkmark", "fc-green-400" %} +
.wmx-initialmax-width: initial;- + {% icon "Checkmark", "fc-green-400" %} +
+
+
\ No newline at end of file From 98f28ff800c40a6952040e9309bc3f1198428e34 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 12:34:44 -0500 Subject: [PATCH 04/18] Small tidy to be less reliant on su-static --- packages/stacks-classic/lib/atomic/sizing.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/sizing.less b/packages/stacks-classic/lib/atomic/sizing.less index 877f1559fa..ab75764be8 100644 --- a/packages/stacks-classic/lib/atomic/sizing.less +++ b/packages/stacks-classic/lib/atomic/sizing.less @@ -2,10 +2,8 @@ // SIZING UNITS CSS CUSTOM PROPERTIES body { - // TODO SPARK retain other sizing units (or alias them) for backward compatibility - --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), 0.063rem, 0.063rem); + --su0: 0; + --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px). --su2: 0.125rem; --su4: 0.25rem; --su6: 0.375rem; From 3c9450582e8f32f5a33175f23a66b4fc1dfaf438 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 12:35:30 -0500 Subject: [PATCH 05/18] Replace calcs for negative values with `--sun*` where possible --- packages/stacks-classic/lib/base/reset-normalize.less | 2 +- packages/stacks-classic/lib/components/avatar/avatar.less | 4 ++-- packages/stacks-classic/lib/components/badge/badge.less | 4 ++-- .../lib/components/button-group/button-group.less | 2 +- packages/stacks-classic/lib/components/button/button.less | 2 +- .../lib/components/code-block/code-block.less | 2 +- .../lib/components/input-icon/input-icon.less | 2 +- packages/stacks-classic/lib/components/popover/popover.less | 6 +++--- .../lib/components/post-summary/post-summary.less | 6 +++--- .../lib/components/progress-bar/progress-bar.less | 2 +- .../lib/components/sidebar-widget/sidebar-widget.less | 4 ++-- packages/stacks-classic/lib/components/topbar/topbar.less | 2 +- packages/stacks-docs/assets/less/stacks-documentation.less | 6 +++--- 13 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/stacks-classic/lib/base/reset-normalize.less b/packages/stacks-classic/lib/base/reset-normalize.less index c89d097dbd..de97eb6d22 100644 --- a/packages/stacks-classic/lib/base/reset-normalize.less +++ b/packages/stacks-classic/lib/base/reset-normalize.less @@ -375,7 +375,7 @@ textarea { [type="search"] { -webkit-appearance: textfield; /* 1 */ - outline-offset: calc(var(--su-static2) * -1); // -2px - /* 2 */ + outline-offset: var(--sun2); } /** diff --git a/packages/stacks-classic/lib/components/avatar/avatar.less b/packages/stacks-classic/lib/components/avatar/avatar.less index 98ba7ac470..385c541752 100644 --- a/packages/stacks-classic/lib/components/avatar/avatar.less +++ b/packages/stacks-classic/lib/components/avatar/avatar.less @@ -58,9 +58,9 @@ // CHILD ELEMENTS & &--badge { - bottom: calc(var(--su-static4) * -1); // -4px + bottom: var(--sun4); position: absolute; - right: calc(var(--su-static4) * -1); // -4px + right: var(--sun4); -webkit-transform: scale(var(--_av-scale-badge)); transform: scale(var(--_av-scale-badge)); } diff --git a/packages/stacks-classic/lib/components/badge/badge.less b/packages/stacks-classic/lib/components/badge/badge.less index c3b6613d82..525858ecda 100644 --- a/packages/stacks-classic/lib/components/badge/badge.less +++ b/packages/stacks-classic/lib/components/badge/badge.less @@ -38,7 +38,7 @@ margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1); } & svg { - margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--su4) * -1); + margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) var(--sun4); } &:has(.s-bling__rep) { @@ -98,7 +98,7 @@ &:before { height: var(--_ba-before-h); - margin-top: calc(var(--su1) * -1); + margin-top: var(--sun1); width: var(--_ba-before-w); content: ""; diff --git a/packages/stacks-classic/lib/components/button-group/button-group.less b/packages/stacks-classic/lib/components/button-group/button-group.less index 5140a061bd..16dcd66a35 100644 --- a/packages/stacks-classic/lib/components/button-group/button-group.less +++ b/packages/stacks-classic/lib/components/button-group/button-group.less @@ -17,7 +17,7 @@ // CHILD ELEMENTS form { display: flex; - margin-right: calc(var(--su-static1) * -1); // -1px + margin-right: var(--sun1); } // --_bu-py values set below to ensure btn-group height matches same-sized button height diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index a9d4da4650..578d9d9f82 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -250,7 +250,7 @@ clip-path: inset(50%); clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px) height: var(--su-static1); - margin: calc(var(--su-static1) * -1); // -1px + margin: var(--sun1); overflow-wrap: normal; overflow: hidden; padding: 0; diff --git a/packages/stacks-classic/lib/components/code-block/code-block.less b/packages/stacks-classic/lib/components/code-block/code-block.less index 18fb57981d..e0c74e0daa 100644 --- a/packages/stacks-classic/lib/components/code-block/code-block.less +++ b/packages/stacks-classic/lib/components/code-block/code-block.less @@ -95,7 +95,7 @@ border-width: 0 var(--su-static1) 0 0; color: var(--black-350); float: left; - margin: calc(var(--su12) * -1); + margin: var(--sun12); margin-right: var(--su12); padding: var(--su12); padding-right: var(--su6); diff --git a/packages/stacks-classic/lib/components/input-icon/input-icon.less b/packages/stacks-classic/lib/components/input-icon/input-icon.less index aeefd0fcf3..1f2290b4f3 100644 --- a/packages/stacks-classic/lib/components/input-icon/input-icon.less +++ b/packages/stacks-classic/lib/components/input-icon/input-icon.less @@ -38,7 +38,7 @@ color: var(--_ii-fc); right: var(--_ii-r); - margin-top: calc((var(--su-static8) + var(--su-static2)) * -1); // -10px - Half the icon's height at 20px for centering + margin-top: calc(var(--sun8) + var(--sun2)); // -10px - Half the icon's height at 20px for centering pointer-events: none; position: absolute; top: 50%; diff --git a/packages/stacks-classic/lib/components/popover/popover.less b/packages/stacks-classic/lib/components/popover/popover.less index f70c0f7cf2..3bbe6a8328 100644 --- a/packages/stacks-classic/lib/components/popover/popover.less +++ b/packages/stacks-classic/lib/components/popover/popover.less @@ -29,15 +29,15 @@ // Close btn & &--close { float: right; // Use floats for title wrapping - top: calc(var(--su8) * -1); // Compensate for s-popover's padding - right: calc(var(--su8) * -1); // Compensate for s-popover's padding + top: var(--sun8); // Compensate for s-popover's padding + right: var(--sun8); // Compensate for s-popover's padding padding: var(--su6) !important; } & &--content { max-height: var(--_po-content-mxh); overflow-y: auto; - margin: calc(var(--su12) * -1); + margin: var(--sun12); padding: var(--su12); } diff --git a/packages/stacks-classic/lib/components/post-summary/post-summary.less b/packages/stacks-classic/lib/components/post-summary/post-summary.less index 3a32034ef1..c52328047f 100644 --- a/packages/stacks-classic/lib/components/post-summary/post-summary.less +++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less @@ -217,7 +217,7 @@ .v-truncate2; color: var( --_ps-content-excerpt-fc); font-family: var(--theme-post-body-font-family, var(--theme-body-font-family)); - margin-top: calc(var(--su2) * -1); + margin-top: var(--sun2); margin-bottom: var(--su8); } @@ -261,7 +261,7 @@ .svg-icon { position: relative; - top: calc(var(--su1) * -1); + top: var(--sun1); vertical-align: text-bottom; // Optical alignment } @@ -278,7 +278,7 @@ &--content-type { .svg-icon { color: var(--fc-light); - margin-left: calc(var(--su2) * -1); + margin-left: var(--sun2); } color: var(--fc-medium); diff --git a/packages/stacks-classic/lib/components/progress-bar/progress-bar.less b/packages/stacks-classic/lib/components/progress-bar/progress-bar.less index bc47179c5b..b9d9e11974 100644 --- a/packages/stacks-classic/lib/components/progress-bar/progress-bar.less +++ b/packages/stacks-classic/lib/components/progress-bar/progress-bar.less @@ -254,7 +254,7 @@ content: ""; display: block; height: 100%; - left: calc(var(--su-static1) * -1); // -1px + left: var(--sun1); position: absolute; top: 0; width: var(--su-static4); diff --git a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less index f493293e03..3dc8ce8b62 100644 --- a/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less +++ b/packages/stacks-classic/lib/components/sidebar-widget/sidebar-widget.less @@ -123,8 +123,8 @@ content: ''; height: calc(100% + var(--su16)); left: 0; - margin-left: calc(var(--su16) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border - margin-top: calc(var(--su16) / 2 * -1); + margin-left: calc(var(--sun16) + var(--sun1)); // the orange selection indicator overlaps with the widget border + margin-top: var(--sun4); position: absolute; } diff --git a/packages/stacks-classic/lib/components/topbar/topbar.less b/packages/stacks-classic/lib/components/topbar/topbar.less index 68f2969e9e..cedc0794c8 100644 --- a/packages/stacks-classic/lib/components/topbar/topbar.less +++ b/packages/stacks-classic/lib/components/topbar/topbar.less @@ -413,7 +413,7 @@ align-self: stretch; color: var(--theme-topbar-select-color, var(--black-500)); - margin-right: calc(var(--su-static1) * -1); //-1px + margin-right: var(--sun1); max-width: var(--su256) !important; } diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index 933b786753..a511d99bab 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -165,7 +165,7 @@ .stacks-h2 { font-size: var(--fs-headline1); padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning - margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning + margin-top: calc(var(--sun96) + var(--sun8)); // Hack for #anchor positioning } // -- Sub-section Title @@ -173,7 +173,7 @@ font-size: var(--fs-subheading); color: var(--fc-medium); padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning - margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning + margin-top: calc(var(--sun96) + var(--sun8)); // Hack for #anchor positioning } .stacks-h4 { @@ -315,7 +315,7 @@ &, .s-table td& { background-color: var(--black-200); - border: var(--su-static1) solid var(--bc-medium); + border: var(--su1) solid var(--bc-medium); color: var(--fc-dark); font-family: var(--ff-mono); font-size: var(--fs-caption); From 73256a618babdeeb36867de6ba6ccda8e0912c78 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 13 Jan 2026 15:12:19 -0500 Subject: [PATCH 06/18] improve sizing class generation; (re)gen less tests --- .../__snapshots__/height.less.test.ts.snap | 244 ++++++ .../positioning.less.test.ts.snap | 556 ++++++++++++ .../__snapshots__/sizing.less.test.ts.snap | 78 ++ .../__snapshots__/spacing.less.test.ts.snap | 822 +++--------------- .../__snapshots__/width.less.test.ts.snap | 320 +++++++ .../stacks-classic/lib/atomic/height.less | 3 +- .../lib/atomic/height.less.test.ts | 12 + .../lib/atomic/positioning.less | 11 +- .../stacks-classic/lib/atomic/spacing.less | 23 +- packages/stacks-classic/lib/atomic/width.less | 11 +- .../lib/atomic/width.less.test.ts | 12 + .../stacks-classic/lib/exports/mixins.less | 76 +- packages/stacks-docs/product/base/width.html | 8 - 13 files changed, 1396 insertions(+), 780 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/height.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/width.less.test.ts diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap new file mode 100644 index 0000000000..986fd213e2 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/height.less.test.ts.snap @@ -0,0 +1,244 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: height > should output all height custom properties 1`] = ` +".h0 { + height: var(--su0) !important; +} + +.h1 { + height: var(--su1) !important; +} + +.h2 { + height: var(--su2) !important; +} + +.h4 { + height: var(--su4) !important; +} + +.h6 { + height: var(--su6) !important; +} + +.h8 { + height: var(--su8) !important; +} + +.h12 { + height: var(--su12) !important; +} + +.h16 { + height: var(--su16) !important; +} + +.h24 { + height: var(--su24) !important; +} + +.h32 { + height: var(--su32) !important; +} + +.h48 { + height: var(--su48) !important; +} + +.h64 { + height: var(--su64) !important; +} + +.h96 { + height: var(--su96) !important; +} + +.h128 { + height: var(--su128) !important; +} + +.hs1 { + height: var(--su128) !important; +} + +.hs2 { + height: var(--su256) !important; +} + +.hs3 { + height: var(--su344) !important; +} + +.hs4 { + height: var(--su448) !important; +} + +.hs5 { + height: var(--su512) !important; +} + +.hs6 { + height: var(--su640) !important; +} + +.hs7 { + height: var(--su768) !important; +} + +.hs8 { + height: var(--su848) !important; +} + +.hs9 { + height: var(--su960) !important; +} + +.hs10 { + height: var(--su1024) !important; +} + +.hs11 { + height: var(--su1120) !important; +} + +.hs12 { + height: var(--su1280) !important; +} + +.h100 { + height: 100% !important; +} + +.h-auto { + height: auto !important; +} + +.h-screen { + height: 100vh !important; +} + +.hmn0 { + min-height: var(--sun0) !important; +} + +.hmn1 { + min-height: var(--su128) !important; +} + +.hmn2 { + min-height: var(--su256) !important; +} + +.hmn3 { + min-height: var(--su344) !important; +} + +.hmn4 { + min-height: var(--su448) !important; +} + +.hmn5 { + min-height: var(--su512) !important; +} + +.hmn6 { + min-height: var(--su640) !important; +} + +.hmn7 { + min-height: var(--su768) !important; +} + +.hmn8 { + min-height: var(--su848) !important; +} + +.hmn9 { + min-height: var(--su960) !important; +} + +.hmn10 { + min-height: var(--su1024) !important; +} + +.hmn11 { + min-height: var(--su1120) !important; +} + +.hmn12 { + min-height: var(--su1280) !important; +} + +.hmn100 { + min-height: 100% !important; +} + +.hmn-initial { + min-height: initial !important; +} + +.hmn-screen { + min-height: 100vh !important; +} + +.hmx1 { + max-height: var(--su128) !important; +} + +.hmx2 { + max-height: var(--su256) !important; +} + +.hmx3 { + max-height: var(--su344) !important; +} + +.hmx4 { + max-height: var(--su448) !important; +} + +.hmx5 { + max-height: var(--su512) !important; +} + +.hmx6 { + max-height: var(--su640) !important; +} + +.hmx7 { + max-height: var(--su768) !important; +} + +.hmx8 { + max-height: var(--su848) !important; +} + +.hmx9 { + max-height: var(--su960) !important; +} + +.hmx10 { + max-height: var(--su1024) !important; +} + +.hmx11 { + max-height: var(--su1120) !important; +} + +.hmx12 { + max-height: var(--su1280) !important; +} + +.hmx100 { + max-height: 100% !important; +} + +.hmx-initial { + max-height: initial !important; +} + +.hmx-screen { + max-height: 100vh !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap new file mode 100644 index 0000000000..3798e40506 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/positioning.less.test.ts.snap @@ -0,0 +1,556 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: positioning > should output all atomic css classes 1`] = ` +".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; +} + +.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: var(--sun1) !important; +} + +.tn2 { + top: var(--sun2) !important; +} + +.tn4 { + top: var(--sun4) !important; +} + +.tn6 { + top: var(--sun6) !important; +} + +.tn8 { + top: var(--sun8) !important; +} + +.tn12 { + top: var(--sun12) !important; +} + +.tn16 { + top: var(--sun16) !important; +} + +.tn24 { + top: var(--sun24) !important; +} + +.tn32 { + top: var(--sun32) !important; +} + +.tn48 { + top: var(--sun48) !important; +} + +.tn64 { + top: var(--sun64) !important; +} + +.tn96 { + top: var(--sun96) !important; +} + +.tn128 { + top: var(--sun128) !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: var(--sun1) !important; +} + +.rn2 { + right: var(--sun2) !important; +} + +.rn4 { + right: var(--sun4) !important; +} + +.rn6 { + right: var(--sun6) !important; +} + +.rn8 { + right: var(--sun8) !important; +} + +.rn12 { + right: var(--sun12) !important; +} + +.rn16 { + right: var(--sun16) !important; +} + +.rn24 { + right: var(--sun24) !important; +} + +.rn32 { + right: var(--sun32) !important; +} + +.rn48 { + right: var(--sun48) !important; +} + +.rn64 { + right: var(--sun64) !important; +} + +.rn96 { + right: var(--sun96) !important; +} + +.rn128 { + right: var(--sun128) !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: var(--sun1) !important; +} + +.bn2 { + bottom: var(--sun2) !important; +} + +.bn4 { + bottom: var(--sun4) !important; +} + +.bn6 { + bottom: var(--sun6) !important; +} + +.bn8 { + bottom: var(--sun8) !important; +} + +.bn12 { + bottom: var(--sun12) !important; +} + +.bn16 { + bottom: var(--sun16) !important; +} + +.bn24 { + bottom: var(--sun24) !important; +} + +.bn32 { + bottom: var(--sun32) !important; +} + +.bn48 { + bottom: var(--sun48) !important; +} + +.bn64 { + bottom: var(--sun64) !important; +} + +.bn96 { + bottom: var(--sun96) !important; +} + +.bn128 { + bottom: var(--sun128) !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: var(--sun1) !important; +} + +.ln2 { + left: var(--sun2) !important; +} + +.ln4 { + left: var(--sun4) !important; +} + +.ln6 { + left: var(--sun6) !important; +} + +.ln8 { + left: var(--sun8) !important; +} + +.ln12 { + left: var(--sun12) !important; +} + +.ln16 { + left: var(--sun16) !important; +} + +.ln24 { + left: var(--sun24) !important; +} + +.ln32 { + left: var(--sun32) !important; +} + +.ln48 { + left: var(--sun48) !important; +} + +.ln64 { + left: var(--sun64) !important; +} + +.ln96 { + left: var(--sun96) !important; +} + +.ln128 { + left: var(--sun128) !important; +} + +.l50 { + left: 50% !important; +} + +.l100 { + left: 100% !important; +} + +.ln50 { + left: -50% !important; +} + +.ln100 { + left: -100% !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap new file mode 100644 index 0000000000..8ca69d8569 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/sizing.less.test.ts.snap @@ -0,0 +1,78 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: sizing > should output all sizing custom properties 1`] = ` +"body { + --su0: 0; + --su1: clamp(1px, 0.063rem, 0.063rem); + --su2: 0.125rem; + --su4: 0.25rem; + --su6: 0.375rem; + --su8: 0.5rem; + --su12: 0.75rem; + --su16: 1rem; + --su24: 1.5rem; + --su32: 2rem; + --su48: 3rem; + --su64: 4rem; + --su96: 6rem; + --su128: 8rem; + --su256: 16rem; + --su344: 21.5rem; + --su448: 28rem; + --su512: 32rem; + --su640: 40rem; + --su768: 48rem; + --su848: 53rem; + --su960: 60rem; + --su1024: 64rem; + --su1120: 70rem; + --su1280: 80rem; + --sun1: calc(var(--su1) * -1); + --sun2: calc(var(--su2) * -1); + --sun4: calc(var(--su4) * -1); + --sun6: calc(var(--su6) * -1); + --sun8: calc(var(--su8) * -1); + --sun12: calc(var(--su12) * -1); + --sun16: calc(var(--su16) * -1); + --sun24: calc(var(--su24) * -1); + --sun32: calc(var(--su32) * -1); + --sun48: calc(var(--su48) * -1); + --sun64: calc(var(--su64) * -1); + --sun96: calc(var(--su96) * -1); + --sun128: calc(var(--su128) * -1); + --su-mobile-min: var(--su344); + --su-popover: var(--su448); + --su-tablet: var(--su640); + --su-content: var(--su960); + --su-dashboard: var(--su1120); + --su-max: var(--su1280); + --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; + --su-static256: 256px; + --su-static344: 344px; + --su-static448: 448px; + --su-static512: 512px; + --su-static640: 640px; + --su-static768: 768px; + --su-static848: 848px; + --su-static960: 960px; + --su-static1024: 1024px; + --su-static1120: 1120px; + --su-static1280: 1280px; + --s-full: 79rem; + --s-step: calc(var(--s-full) / 12); +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap index 914cb48c0c..ff768bf14c 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap @@ -1,39 +1,7 @@ // 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 { +exports[`atomic: spacing > should output all atomic css classes 1`] = ` +".m-auto { margin: auto !important; } @@ -94,55 +62,55 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mn1 { - margin: calc(var(--su1) * -1) !important; + margin: var(--sun1) !important; } .mn2 { - margin: calc(var(--su2) * -1) !important; + margin: var(--sun2) !important; } .mn4 { - margin: calc(var(--su4) * -1) !important; + margin: var(--sun4) !important; } .mn6 { - margin: calc(var(--su6) * -1) !important; + margin: var(--sun6) !important; } .mn8 { - margin: calc(var(--su8) * -1) !important; + margin: var(--sun8) !important; } .mn12 { - margin: calc(var(--su12) * -1) !important; + margin: var(--sun12) !important; } .mn16 { - margin: calc(var(--su16) * -1) !important; + margin: var(--sun16) !important; } .mn24 { - margin: calc(var(--su24) * -1) !important; + margin: var(--sun24) !important; } .mn32 { - margin: calc(var(--su32) * -1) !important; + margin: var(--sun32) !important; } .mn48 { - margin: calc(var(--su48) * -1) !important; + margin: var(--sun48) !important; } .mn64 { - margin: calc(var(--su64) * -1) !important; + margin: var(--sun64) !important; } .mn96 { - margin: calc(var(--su96) * -1) !important; + margin: var(--sun96) !important; } .mn128 { - margin: calc(var(--su128) * -1) !important; + margin: var(--sun128) !important; } .m50 { @@ -222,55 +190,55 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mtn1 { - margin-top: calc(var(--su1) * -1) !important; + margin-top: var(--sun1) !important; } .mtn2 { - margin-top: calc(var(--su2) * -1) !important; + margin-top: var(--sun2) !important; } .mtn4 { - margin-top: calc(var(--su4) * -1) !important; + margin-top: var(--sun4) !important; } .mtn6 { - margin-top: calc(var(--su6) * -1) !important; + margin-top: var(--sun6) !important; } .mtn8 { - margin-top: calc(var(--su8) * -1) !important; + margin-top: var(--sun8) !important; } .mtn12 { - margin-top: calc(var(--su12) * -1) !important; + margin-top: var(--sun12) !important; } .mtn16 { - margin-top: calc(var(--su16) * -1) !important; + margin-top: var(--sun16) !important; } .mtn24 { - margin-top: calc(var(--su24) * -1) !important; + margin-top: var(--sun24) !important; } .mtn32 { - margin-top: calc(var(--su32) * -1) !important; + margin-top: var(--sun32) !important; } .mtn48 { - margin-top: calc(var(--su48) * -1) !important; + margin-top: var(--sun48) !important; } .mtn64 { - margin-top: calc(var(--su64) * -1) !important; + margin-top: var(--sun64) !important; } .mtn96 { - margin-top: calc(var(--su96) * -1) !important; + margin-top: var(--sun96) !important; } .mtn128 { - margin-top: calc(var(--su128) * -1) !important; + margin-top: var(--sun128) !important; } .mt50 { @@ -350,55 +318,55 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mrn1 { - margin-right: calc(var(--su1) * -1) !important; + margin-right: var(--sun1) !important; } .mrn2 { - margin-right: calc(var(--su2) * -1) !important; + margin-right: var(--sun2) !important; } .mrn4 { - margin-right: calc(var(--su4) * -1) !important; + margin-right: var(--sun4) !important; } .mrn6 { - margin-right: calc(var(--su6) * -1) !important; + margin-right: var(--sun6) !important; } .mrn8 { - margin-right: calc(var(--su8) * -1) !important; + margin-right: var(--sun8) !important; } .mrn12 { - margin-right: calc(var(--su12) * -1) !important; + margin-right: var(--sun12) !important; } .mrn16 { - margin-right: calc(var(--su16) * -1) !important; + margin-right: var(--sun16) !important; } .mrn24 { - margin-right: calc(var(--su24) * -1) !important; + margin-right: var(--sun24) !important; } .mrn32 { - margin-right: calc(var(--su32) * -1) !important; + margin-right: var(--sun32) !important; } .mrn48 { - margin-right: calc(var(--su48) * -1) !important; + margin-right: var(--sun48) !important; } .mrn64 { - margin-right: calc(var(--su64) * -1) !important; + margin-right: var(--sun64) !important; } .mrn96 { - margin-right: calc(var(--su96) * -1) !important; + margin-right: var(--sun96) !important; } .mrn128 { - margin-right: calc(var(--su128) * -1) !important; + margin-right: var(--sun128) !important; } .mr50 { @@ -478,55 +446,55 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mbn1 { - margin-bottom: calc(var(--su1) * -1) !important; + margin-bottom: var(--sun1) !important; } .mbn2 { - margin-bottom: calc(var(--su2) * -1) !important; + margin-bottom: var(--sun2) !important; } .mbn4 { - margin-bottom: calc(var(--su4) * -1) !important; + margin-bottom: var(--sun4) !important; } .mbn6 { - margin-bottom: calc(var(--su6) * -1) !important; + margin-bottom: var(--sun6) !important; } .mbn8 { - margin-bottom: calc(var(--su8) * -1) !important; + margin-bottom: var(--sun8) !important; } .mbn12 { - margin-bottom: calc(var(--su12) * -1) !important; + margin-bottom: var(--sun12) !important; } .mbn16 { - margin-bottom: calc(var(--su16) * -1) !important; + margin-bottom: var(--sun16) !important; } .mbn24 { - margin-bottom: calc(var(--su24) * -1) !important; + margin-bottom: var(--sun24) !important; } .mbn32 { - margin-bottom: calc(var(--su32) * -1) !important; + margin-bottom: var(--sun32) !important; } .mbn48 { - margin-bottom: calc(var(--su48) * -1) !important; + margin-bottom: var(--sun48) !important; } .mbn64 { - margin-bottom: calc(var(--su64) * -1) !important; + margin-bottom: var(--sun64) !important; } .mbn96 { - margin-bottom: calc(var(--su96) * -1) !important; + margin-bottom: var(--sun96) !important; } .mbn128 { - margin-bottom: calc(var(--su128) * -1) !important; + margin-bottom: var(--sun128) !important; } .mb50 { @@ -606,55 +574,55 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mln1 { - margin-left: calc(var(--su1) * -1) !important; + margin-left: var(--sun1) !important; } .mln2 { - margin-left: calc(var(--su2) * -1) !important; + margin-left: var(--sun2) !important; } .mln4 { - margin-left: calc(var(--su4) * -1) !important; + margin-left: var(--sun4) !important; } .mln6 { - margin-left: calc(var(--su6) * -1) !important; + margin-left: var(--sun6) !important; } .mln8 { - margin-left: calc(var(--su8) * -1) !important; + margin-left: var(--sun8) !important; } .mln12 { - margin-left: calc(var(--su12) * -1) !important; + margin-left: var(--sun12) !important; } .mln16 { - margin-left: calc(var(--su16) * -1) !important; + margin-left: var(--sun16) !important; } .mln24 { - margin-left: calc(var(--su24) * -1) !important; + margin-left: var(--sun24) !important; } .mln32 { - margin-left: calc(var(--su32) * -1) !important; + margin-left: var(--sun32) !important; } .mln48 { - margin-left: calc(var(--su48) * -1) !important; + margin-left: var(--sun48) !important; } .mln64 { - margin-left: calc(var(--su64) * -1) !important; + margin-left: var(--sun64) !important; } .mln96 { - margin-left: calc(var(--su96) * -1) !important; + margin-left: var(--sun96) !important; } .mln128 { - margin-left: calc(var(--su128) * -1) !important; + margin-left: var(--sun128) !important; } .ml50 { @@ -754,68 +722,68 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .mxn1 { - margin-left: calc(var(--su1) * -1) !important; - margin-right: calc(var(--su1) * -1) !important; + margin-left: var(--sun1) !important; + margin-right: var(--sun1) !important; } .mxn2 { - margin-left: calc(var(--su2) * -1) !important; - margin-right: calc(var(--su2) * -1) !important; + margin-left: var(--sun2) !important; + margin-right: var(--sun2) !important; } .mxn4 { - margin-left: calc(var(--su4) * -1) !important; - margin-right: calc(var(--su4) * -1) !important; + margin-left: var(--sun4) !important; + margin-right: var(--sun4) !important; } .mxn6 { - margin-left: calc(var(--su6) * -1) !important; - margin-right: calc(var(--su6) * -1) !important; + margin-left: var(--sun6) !important; + margin-right: var(--sun6) !important; } .mxn8 { - margin-left: calc(var(--su8) * -1) !important; - margin-right: calc(var(--su8) * -1) !important; + margin-left: var(--sun8) !important; + margin-right: var(--sun8) !important; } .mxn12 { - margin-left: calc(var(--su12) * -1) !important; - margin-right: calc(var(--su12) * -1) !important; + margin-left: var(--sun12) !important; + margin-right: var(--sun12) !important; } .mxn16 { - margin-left: calc(var(--su16) * -1) !important; - margin-right: calc(var(--su16) * -1) !important; + margin-left: var(--sun16) !important; + margin-right: var(--sun16) !important; } .mxn24 { - margin-left: calc(var(--su24) * -1) !important; - margin-right: calc(var(--su24) * -1) !important; + margin-left: var(--sun24) !important; + margin-right: var(--sun24) !important; } .mxn32 { - margin-left: calc(var(--su32) * -1) !important; - margin-right: calc(var(--su32) * -1) !important; + margin-left: var(--sun32) !important; + margin-right: var(--sun32) !important; } .mxn48 { - margin-left: calc(var(--su48) * -1) !important; - margin-right: calc(var(--su48) * -1) !important; + margin-left: var(--sun48) !important; + margin-right: var(--sun48) !important; } .mxn64 { - margin-left: calc(var(--su64) * -1) !important; - margin-right: calc(var(--su64) * -1) !important; + margin-left: var(--sun64) !important; + margin-right: var(--sun64) !important; } .mxn96 { - margin-left: calc(var(--su96) * -1) !important; - margin-right: calc(var(--su96) * -1) !important; + margin-left: var(--sun96) !important; + margin-right: var(--sun96) !important; } .mxn128 { - margin-left: calc(var(--su128) * -1) !important; - margin-right: calc(var(--su128) * -1) !important; + margin-left: var(--sun128) !important; + margin-right: var(--sun128) !important; } .my0 { @@ -889,68 +857,68 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .myn1 { - margin-top: calc(var(--su1) * -1) !important; - margin-bottom: calc(var(--su1) * -1) !important; + margin-top: var(--sun1) !important; + margin-bottom: var(--sun1) !important; } .myn2 { - margin-top: calc(var(--su2) * -1) !important; - margin-bottom: calc(var(--su2) * -1) !important; + margin-top: var(--sun2) !important; + margin-bottom: var(--sun2) !important; } .myn4 { - margin-top: calc(var(--su4) * -1) !important; - margin-bottom: calc(var(--su4) * -1) !important; + margin-top: var(--sun4) !important; + margin-bottom: var(--sun4) !important; } .myn6 { - margin-top: calc(var(--su6) * -1) !important; - margin-bottom: calc(var(--su6) * -1) !important; + margin-top: var(--sun6) !important; + margin-bottom: var(--sun6) !important; } .myn8 { - margin-top: calc(var(--su8) * -1) !important; - margin-bottom: calc(var(--su8) * -1) !important; + margin-top: var(--sun8) !important; + margin-bottom: var(--sun8) !important; } .myn12 { - margin-top: calc(var(--su12) * -1) !important; - margin-bottom: calc(var(--su12) * -1) !important; + margin-top: var(--sun12) !important; + margin-bottom: var(--sun12) !important; } .myn16 { - margin-top: calc(var(--su16) * -1) !important; - margin-bottom: calc(var(--su16) * -1) !important; + margin-top: var(--sun16) !important; + margin-bottom: var(--sun16) !important; } .myn24 { - margin-top: calc(var(--su24) * -1) !important; - margin-bottom: calc(var(--su24) * -1) !important; + margin-top: var(--sun24) !important; + margin-bottom: var(--sun24) !important; } .myn32 { - margin-top: calc(var(--su32) * -1) !important; - margin-bottom: calc(var(--su32) * -1) !important; + margin-top: var(--sun32) !important; + margin-bottom: var(--sun32) !important; } .myn48 { - margin-top: calc(var(--su48) * -1) !important; - margin-bottom: calc(var(--su48) * -1) !important; + margin-top: var(--sun48) !important; + margin-bottom: var(--sun48) !important; } .myn64 { - margin-top: calc(var(--su64) * -1) !important; - margin-bottom: calc(var(--su64) * -1) !important; + margin-top: var(--sun64) !important; + margin-bottom: var(--sun64) !important; } .myn96 { - margin-top: calc(var(--su96) * -1) !important; - margin-bottom: calc(var(--su96) * -1) !important; + margin-top: var(--sun96) !important; + margin-bottom: var(--sun96) !important; } .myn128 { - margin-top: calc(var(--su128) * -1) !important; - margin-bottom: calc(var(--su128) * -1) !important; + margin-top: var(--sun128) !important; + margin-bottom: var(--sun128) !important; } .p0 { @@ -1372,557 +1340,5 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` padding-top: var(--su128) !important; 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; -} - -.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; -} - -.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; -} - -.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; -} - -.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; -} - -.l50 { - left: 50% !important; -} - -.l100 { - left: 100% !important; -} - -.ln50 { - left: -50% !important; -} - -.ln100 { - left: -100% !important; -} " `; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap new file mode 100644 index 0000000000..3297dc274b --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/width.less.test.ts.snap @@ -0,0 +1,320 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: width > should output all width custom properties 1`] = ` +".w0 { + width: var(--su0) !important; +} + +.w1 { + width: var(--su1) !important; +} + +.w2 { + width: var(--su2) !important; +} + +.w4 { + width: var(--su4) !important; +} + +.w6 { + width: var(--su6) !important; +} + +.w8 { + width: var(--su8) !important; +} + +.w12 { + width: var(--su12) !important; +} + +.w16 { + width: var(--su16) !important; +} + +.w24 { + width: var(--su24) !important; +} + +.w32 { + width: var(--su32) !important; +} + +.w48 { + width: var(--su48) !important; +} + +.w64 { + width: var(--su64) !important; +} + +.w96 { + width: var(--su96) !important; +} + +.w128 { + width: var(--su128) !important; +} + +.ws1 { + width: var(--su128) !important; +} + +.ws2 { + width: var(--su256) !important; +} + +.ws3 { + width: var(--su344) !important; +} + +.ws4 { + width: var(--su448) !important; +} + +.ws5 { + width: var(--su512) !important; +} + +.ws6 { + width: var(--su640) !important; +} + +.ws7 { + width: var(--su768) !important; +} + +.ws8 { + width: var(--su848) !important; +} + +.ws9 { + width: var(--su960) !important; +} + +.ws10 { + width: var(--su1024) !important; +} + +.ws11 { + width: var(--su1120) !important; +} + +.ws12 { + width: var(--su1280) !important; +} + +.w10 { + width: 10% !important; +} + +.w20 { + width: 20% !important; +} + +.w30 { + width: 30% !important; +} + +.w40 { + width: 40% !important; +} + +.w60 { + width: 60% !important; +} + +.w70 { + width: 70% !important; +} + +.w80 { + width: 80% !important; +} + +.w90 { + width: 90% !important; +} + +.w25 { + width: 25% !important; +} + +.w50 { + width: 50% !important; +} + +.w75 { + width: 75% !important; +} + +.w100 { + width: 100% !important; +} + +.w33 { + width: calc(100% / 3) !important; +} + +.w66 { + width: calc(100% / 3 * 2) !important; +} + +.w-auto { + width: auto !important; +} + +.w-screen { + width: 100vw !important; +} + +.wmn0 { + min-width: var(--su0) !important; +} + +.wmn1 { + min-width: var(--su128) !important; +} + +.wmn2 { + min-width: var(--su256) !important; +} + +.wmn3 { + min-width: var(--su344) !important; +} + +.wmn4 { + min-width: var(--su448) !important; +} + +.wmn5 { + min-width: var(--su512) !important; +} + +.wmn6 { + min-width: var(--su640) !important; +} + +.wmn7 { + min-width: var(--su768) !important; +} + +.wmn8 { + min-width: var(--su848) !important; +} + +.wmn9 { + min-width: var(--su960) !important; +} + +.wmn10 { + min-width: var(--su1024) !important; +} + +.wmn11 { + min-width: var(--su1120) !important; +} + +.wmn12 { + min-width: var(--su1280) !important; +} + +.wmn25 { + min-width: 25% !important; +} + +.wmn50 { + min-width: 50% !important; +} + +.wmn75 { + min-width: 75% !important; +} + +.wmn100 { + min-width: 100% !important; +} + +.wmn-initial { + min-width: initial !important; +} + +.wmn-screen { + min-width: 100vw !important; +} + +.wmx1 { + max-width: var(--su128) !important; +} + +.wmx2 { + max-width: var(--su256) !important; +} + +.wmx3 { + max-width: var(--su344) !important; +} + +.wmx4 { + max-width: var(--su448) !important; +} + +.wmx5 { + max-width: var(--su512) !important; +} + +.wmx6 { + max-width: var(--su640) !important; +} + +.wmx7 { + max-width: var(--su768) !important; +} + +.wmx8 { + max-width: var(--su848) !important; +} + +.wmx9 { + max-width: var(--su960) !important; +} + +.wmx10 { + max-width: var(--su1024) !important; +} + +.wmx11 { + max-width: var(--su1120) !important; +} + +.wmx12 { + max-width: var(--su1280) !important; +} + +.wmx25 { + max-width: 25% !important; +} + +.wmx50 { + max-width: 50% !important; +} + +.wmx75 { + max-width: 75% !important; +} + +.wmx100 { + max-width: 100% !important; +} + +.wmx-initial { + max-width: initial !important; +} + +.wmx-screen { + max-width: 100vw !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/height.less b/packages/stacks-classic/lib/atomic/height.less index 23cb79545a..c429b894c0 100644 --- a/packages/stacks-classic/lib/atomic/height.less +++ b/packages/stacks-classic/lib/atomic/height.less @@ -1,3 +1,4 @@ +@import (reference) "../base/internal.less"; @import (reference) "../exports/mixins.less"; // `height` properties @@ -8,8 +9,8 @@ #stacks-internals #responsify('.h-screen', { height: 100vh !important; }); // `min-height` properties +.generate-sizing('.hmn', min-height, 0, 'px', false, true); .generate-su-sizing('.hmn', min-height); // Static sizing units -.generate-sizing('.hmn', min-height, 0, 'px'); #stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); #stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); #stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; }); diff --git a/packages/stacks-classic/lib/atomic/height.less.test.ts b/packages/stacks-classic/lib/atomic/height.less.test.ts new file mode 100644 index 0000000000..72be882003 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/height.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: height", () => { + it("should output all height custom properties", async () => { + const css = await renderLess(` + @import "./lib/atomic/height.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/positioning.less b/packages/stacks-classic/lib/atomic/positioning.less index 1a0f272d76..6f1858072c 100644 --- a/packages/stacks-classic/lib/atomic/positioning.less +++ b/packages/stacks-classic/lib/atomic/positioning.less @@ -2,7 +2,8 @@ @import (reference) "../exports/mixins.less"; @px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128; -@percent-values: 50% 100%; +@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128; +@percent-values: 50 100; // POSITIONING // Inset @@ -10,16 +11,24 @@ // Top .generate-sizing('.t', top, @px-values, 'px', true); +.generate-sizing('.tn', top, @px-values-negative, 'px', true, true); .generate-sizing('.t', top, @percent-values, 'percent', true); +.generate-sizing('.tn', top, @percent-values, 'percent', true, true); // Right .generate-sizing('.r', right, @px-values, 'px', true); +.generate-sizing('.rn', right, @px-values-negative, 'px', true, true); .generate-sizing('.r', right, @percent-values, 'percent', true); +.generate-sizing('.rn', right, @percent-values, 'percent', true, true); // Bottom .generate-sizing('.b', bottom, @px-values, 'px', true); +.generate-sizing('.bn', bottom, @px-values-negative, 'px', true, true); .generate-sizing('.b', bottom, @percent-values, 'percent', true); +.generate-sizing('.bn', bottom, @percent-values, 'percent', true, true); // Left .generate-sizing('.l', left, @px-values, 'px', true); +.generate-sizing('.ln', left, @px-values-negative, 'px', true, true); .generate-sizing('.l', left, @percent-values, 'percent', true); +.generate-sizing('.ln', left, @percent-values, 'percent', true, true); diff --git a/packages/stacks-classic/lib/atomic/spacing.less b/packages/stacks-classic/lib/atomic/spacing.less index 70076588c7..3e08c174d8 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less +++ b/packages/stacks-classic/lib/atomic/spacing.less @@ -3,39 +3,50 @@ @px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128; @px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128; -@percent-values: 50% 100%; +@percent-values: 50 100; // MARGIN -// Margin .m-auto { margin: auto !important; } .generate-sizing('.m', margin, @px-values, 'px', true); +.generate-sizing('.mn', margin, @px-values-negative, 'px', true, true); .generate-sizing('.m', margin, @percent-values, 'percent', true); +.generate-sizing('.mn', margin, @percent-values, 'percent', true, true); // Margin top .mt-auto { margin-top: auto !important; } .generate-sizing('.mt', margin-top, @px-values, 'px', true); +.generate-sizing('.mtn', margin-top, @px-values-negative, 'px', true, true); .generate-sizing('.mt', margin-top, @percent-values, 'percent', true); +.generate-sizing('.mtn', margin-top, @percent-values, 'percent', true, true); // Margin right .mr-auto { margin-right: auto !important; } .generate-sizing('.mr', margin-right, @px-values, 'px', true); +.generate-sizing('.mrn', margin-right, @px-values-negative, 'px', true, true); .generate-sizing('.mr', margin-right, @percent-values, 'percent', true); +.generate-sizing('.mrn', margin-right, @percent-values, 'percent', true, true); // Margin bottom .mb-auto { margin-bottom: auto !important; } .generate-sizing('.mb', margin-bottom, @px-values, 'px', true); +.generate-sizing('.mbn', margin-bottom, @px-values-negative, 'px', true, true); .generate-sizing('.mb', margin-bottom, @percent-values, 'percent', true); +.generate-sizing('.mbn', margin-bottom, @percent-values, 'percent', true, true); // Margin left .ml-auto { margin-left: auto !important; } .generate-sizing('.ml', margin-left, @px-values, 'px', true); +.generate-sizing('.mln', margin-left, @px-values-negative, 'px', true, true); .generate-sizing('.ml', margin-left, @percent-values, 'percent', true); +.generate-sizing('.mln', margin-left, @percent-values, 'percent', true, true); // 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-sizing('.mx', margin-left, margin-right; @px-values; 'px', true); -.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px', true); +.generate-sizing('.mx'; margin-left, margin-right; @px-values; 'px'; true); +.generate-sizing('.mxn'; margin-left, margin-right; @px-values-negative; 'px'; true; true); +.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px'; true); +.generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true); // PADDING .generate-sizing('.p', padding, @px-values, 'px'); @@ -43,5 +54,5 @@ .generate-sizing('.pr', padding-right, @px-values, 'px'); .generate-sizing('.pb', padding-bottom, @px-values, 'px'); .generate-sizing('.pl', padding-left, @px-values, 'px'); -.generate-sizing('.px'; padding-left, padding-right; @px-values, 'px'); -.generate-sizing('.py'; padding-top, padding-bottom; @px-values, 'px'); +.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'); +.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'); diff --git a/packages/stacks-classic/lib/atomic/width.less b/packages/stacks-classic/lib/atomic/width.less index 31e0d28ef9..a973d0cfbb 100644 --- a/packages/stacks-classic/lib/atomic/width.less +++ b/packages/stacks-classic/lib/atomic/width.less @@ -1,26 +1,27 @@ +@import (reference) "../base/internal.less"; @import (reference) "../exports/mixins.less"; // `width` properties .generate-sizing('.w', width, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px'); .generate-su-sizing('.ws', width); // Static sizing units -.generate-sizing('.w', width, 10% 20% 30% 40% 60% 70% 80% 90%, 'percent'); -.generate-sizing('.w', width, 25% 50% 75% 100%, 'percent', true); // responsive +.generate-sizing('.w', width, 10 20 30 40 60 70 80 90, 'percent'); +.generate-sizing('.w', width, 25 50 75 100, 'percent', true); // responsive #stacks-internals #responsify('.w33', { width: calc(100% / 3) !important; }); #stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; }); #stacks-internals #responsify('.w-auto', { width: auto !important; }); #stacks-internals #responsify('.w-screen', { width: 100vw !important; }); // `min-width` properties -.generate-su-sizing('.wmn', min-width); .generate-sizing('.wmn', min-width, 0, 'px'); -.generate-sizing('.wmn', min-width, 25% 50% 75%, 'percent'); +.generate-su-sizing('.wmn', min-width); // Static sizing units +.generate-sizing('.wmn', min-width, 25 50 75, 'percent'); #stacks-internals #responsify('.wmn100', { min-width: 100% !important; }); #stacks-internals #responsify('.wmn-initial', { min-width: initial !important; }); #stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; }); // `max-width` properties .generate-su-sizing('.wmx', max-width); // Static sizing units -.generate-sizing('.wmx', max-width, 25% 50% 75%, 'percent'); +.generate-sizing('.wmx', max-width, 25 50 75, 'percent'); #stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); #stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); #stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); diff --git a/packages/stacks-classic/lib/atomic/width.less.test.ts b/packages/stacks-classic/lib/atomic/width.less.test.ts new file mode 100644 index 0000000000..a300d04801 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/width.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: width", () => { + it("should output all width custom properties", async () => { + const css = await renderLess(` + @import "./lib/atomic/width.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/exports/mixins.less b/packages/stacks-classic/lib/exports/mixins.less index c2128dbb14..9b43de7ebe 100644 --- a/packages/stacks-classic/lib/exports/mixins.less +++ b/packages/stacks-classic/lib/exports/mixins.less @@ -283,65 +283,29 @@ * @type: px | percent - What set of value to generate. */ .generate-sizing(@prefix, @properties, @values, @type: 'px', @responsive: false, @negative: false) { - & when (@type = 'px') { - #stacks-internals #build-classes( - @prefix, - { - .template(@value) { - each(@properties, .(@prop) { + #stacks-internals #build-classes( + @prefix, + { + .template(@value) { + each(@properties, #(@prop) { + & when (@type = 'px') and (@negative = false) { @{prop}: var(~"--su@{value}") !important; - }); - } - }, - @values, - @responsive - ); - - & when (@negative = true) { - #stacks-internals #build-classes( - ~"@{prefix}n", - { - .template(@value) { - each(@properties, .(@prop) { - @{prop}: calc(var(~"--su@{value}") * -1) !important; - }); } - }, - @values, - @responsive - ); - } - } - - & when (@type = 'percent') { - #stacks-internals #build-classes( - @prefix, - { - .template(@value) { - each(@properties, .(@prop) { - @{prop}: @value !important; - }); - } - }, - @values, - @responsive - ); - - & when (@negative = true) { - #stacks-internals #build-classes( - ~"@{prefix}n", - { - .template(@value) { - each(@properties, .(@prop) { - @{prop}: -@value !important; - }); + & when (@type = 'px') and (@negative = true) { + @{prop}: var(~"--sun@{value}") !important; } - }, - @values, - @responsive - ); - } - } + & when (@type = 'percent') and (@negative = false) { + @{prop}: ~"@{value}% !important"; + } + & when (@type = 'percent') and (@negative = true) { + @{prop}: ~"-@{value}% !important"; + } + }); + } + }, + @values, + @responsive + ); } .generate-su-sizing(@prefix, @property) { diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html index 7e725c287f..7d1d032b34 100644 --- a/packages/stacks-docs/product/base/width.html +++ b/packages/stacks-docs/product/base/width.html @@ -297,14 +297,6 @@
.wmx0max-width: 0;- - {% icon "Checkmark", "fc-green-400" %} -
.wmx{{ size.level }}