From 05de147dd21655ced0ea88f9cb99f6c9476d1cd5 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 16:38:25 -0500 Subject: [PATCH 01/15] Replace all `--su-static` vars w/ `--su` --- .../stacks-classic/lib/atomic/border.less | 30 ++++++++-------- packages/stacks-classic/lib/atomic/misc.less | 35 +++++++++++------- .../stacks-classic/lib/atomic/sizing.less | 31 ++-------------- .../lib/base/reset-normalize.less | 4 +-- .../activity-indicator.less | 6 ++-- .../lib/components/avatar/avatar.less | 32 ++++++++--------- .../lib/components/badge/badge.less | 2 +- .../lib/components/banner/banner.less | 2 +- .../lib/components/block-link/block-link.less | 2 +- .../components/button-group/button-group.less | 4 +-- .../lib/components/button/button.less | 14 ++++---- .../lib/components/card/card.less | 2 +- .../checkbox_radio/checkbox_radio.less | 6 ++-- .../lib/components/code-block/code-block.less | 2 +- .../lib/components/input-fill/input-fill.less | 6 ++-- .../lib/components/input-icon/input-icon.less | 4 +-- .../input_textarea/input_textarea.less | 4 +-- .../lib/components/label/label.less | 10 +++--- .../components/link-preview/link-preview.less | 6 ++-- .../lib/components/link/link.less | 6 ++-- .../lib/components/menu/menu.less | 2 +- .../lib/components/navigation/navigation.less | 2 +- .../lib/components/notice/notice.less | 2 +- .../lib/components/page-title/page-title.less | 2 +- .../lib/components/pagination/pagination.less | 8 ++--- .../lib/components/popover/popover.less | 4 +-- .../components/progress-bar/progress-bar.less | 34 +++++++++--------- .../lib/components/prose/prose.less | 18 +++++----- .../lib/components/select/select.less | 36 +++++++++++++------ .../lib/components/table/table.less | 28 +++++++-------- .../lib/components/tag/tag.less | 8 ++--- .../toggle-switch/toggle-switch.less | 4 +-- .../lib/components/topbar/topbar.less | 26 +++++++------- .../lib/components/uploader/uploader.less | 10 +++--- .../lib/components/user-card/user-card.less | 4 +-- .../lib/exports/constants-helpers.less | 12 +++---- .../src/components/Toast/Toast.svelte | 2 +- 37 files changed, 205 insertions(+), 205 deletions(-) diff --git a/packages/stacks-classic/lib/atomic/border.less b/packages/stacks-classic/lib/atomic/border.less index b3a63e1581..b2411f3a70 100644 --- a/packages/stacks-classic/lib/atomic/border.less +++ b/packages/stacks-classic/lib/atomic/border.less @@ -11,34 +11,34 @@ // ---------------------------------------------------------------------------- // $$ All Sides #stacks-internals #responsify('.baw0', { border-width: 0 !important; }); -.baw1 { border-width: var(--su-static1) !important; } -.baw2 { border-width: var(--su-static2) !important; } -.baw3 { border-width: var(--su-static4) !important; } +.baw1 { border-width: var(--su1) !important; } +.baw2 { border-width: var(--su2) !important; } +.baw3 { border-width: var(--su4) !important; } // $$ Top Border #stacks-internals #responsify('.btw0', { border-top-width: 0 !important; }); -.btw1 { border-top-width: var(--su-static1) !important; } -.btw2 { border-top-width: var(--su-static2) !important; } -.btw3 { border-top-width: var(--su-static4) !important; } +.btw1 { border-top-width: var(--su1) !important; } +.btw2 { border-top-width: var(--su2) !important; } +.btw3 { border-top-width: var(--su4) !important; } // $$ Right Border #stacks-internals #responsify('.brw0', { border-right-width: 0 !important; }); -.brw1 { border-right-width: var(--su-static1) !important; } -.brw2 { border-right-width: var(--su-static2) !important; } -.brw3 { border-right-width: var(--su-static4) !important; } +.brw1 { border-right-width: var(--su1) !important; } +.brw2 { border-right-width: var(--su2) !important; } +.brw3 { border-right-width: var(--su4) !important; } // $$ Bottom Border #stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; }); -.bbw1 { border-bottom-width: var(--su-static1) !important; } -.bbw2 { border-bottom-width: var(--su-static2) !important; } -.bbw3 { border-bottom-width: var(--su-static4) !important; } +.bbw1 { border-bottom-width: var(--su1) !important; } +.bbw2 { border-bottom-width: var(--su2) !important; } +.bbw3 { border-bottom-width: var(--su4) !important; } // $$ Left Border #stacks-internals #responsify('.blw0', { border-left-width: 0 !important; }); .blw0 { border-left-width: 0 !important; } -.blw1 { border-left-width: var(--su-static1) !important; } -.blw2 { border-left-width: var(--su-static2) !important; } -.blw3 { border-left-width: var(--su-static4) !important; } +.blw1 { border-left-width: var(--su1) !important; } +.blw2 { border-left-width: var(--su2) !important; } +.blw3 { border-left-width: var(--su4) !important; } // $$ Y-Axis Border .byw0 { .btw0; .bbw0; } diff --git a/packages/stacks-classic/lib/atomic/misc.less b/packages/stacks-classic/lib/atomic/misc.less index 0e84027cc9..af263e3abc 100644 --- a/packages/stacks-classic/lib/atomic/misc.less +++ b/packages/stacks-classic/lib/atomic/misc.less @@ -185,14 +185,14 @@ // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ border: 0; /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ - clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px) + clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); clip-path: inset(50%); - height: var(--su-static1); - margin: calc(var(--su-static1) * -1); // -1px + height: var(--su1); + margin: var(--sun1); overflow: hidden; padding: 0; position: absolute; - width: var(--su-static1); + width: var(--su1); overflow-wrap: normal; } @@ -202,7 +202,16 @@ .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; } -.clearfix { .clearfix(); } +.clearfix { + &:before, + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } +} .clear-left { clear: left !important; } .clear-right { clear: right !important; } .clear-both { clear: both !important; } @@ -303,7 +312,7 @@ // $ OUTLINE // ---------------------------------------------------------------------------- .outline-none { outline: 0 !important; } -.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); } // TODO SHINE revisit this value once theme colors are finalized +.outline-ring { .focus-styles(false, true); } .f\:outline-ring { &:focus, @@ -329,7 +338,7 @@ .bs-lg { box-shadow: var(--bs-lg) !important; } .h\:bs-lg:hover { .bs-lg; } .bs-xl { box-shadow: var(--bs-xl) !important; } -.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); } +.bs-ring { box-shadow: 0 0 0 var(--su4) var(--focus-ring); } .h\:bs-ring:hover { .bs-ring; } .f\:bs-ring { &:focus, @@ -340,12 +349,12 @@ // -- Added hover styles for box-shadow // TODO do we still need them? Can we deprecate/remove these weird hover classes? -.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) .set-black()[150] !important; } -.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) .set-black()[225] !important; } -.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(.set-black()[350], 70%) !important; } -.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[300], 75%) !important; } -.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(.set-black()[350], 80%) !important; } -.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 .set-black()[350] !important; } +.bs-sm.bs-hover:hover { box-shadow: 0 var(--su2) var(--su8) .set-black()[150] !important; } +.bs-md.bs-hover:hover { box-shadow: 0 var(--su4) var(--su8) .set-black()[225] !important; } +.bs-lg.bs-hover:hover { box-shadow: 0 var(--su4) var(--su12) fade(.set-black()[350], 70%) !important; } +.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su8) 0 fade(.set-black()[300], 75%) !important; } +.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su8) 0 fade(.set-black()[350], 80%) !important; } +.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su12) 0 .set-black()[350] !important; } // ============================================================================ // $ TRANSITIONS diff --git a/packages/stacks-classic/lib/atomic/sizing.less b/packages/stacks-classic/lib/atomic/sizing.less index b9a38221d4..aed3a0a0f6 100644 --- a/packages/stacks-classic/lib/atomic/sizing.less +++ b/packages/stacks-classic/lib/atomic/sizing.less @@ -3,8 +3,9 @@ // SIZING UNITS CSS CUSTOM PROPERTIES body { --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). + --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su1` (1px). --su2: 0.125rem; + --su3: 0.1875rem; --su4: 0.25rem; --su6: 0.375rem; --su8: 0.5rem; @@ -35,6 +36,7 @@ body { // This is a common subset sizing units for negative values --sun1: calc(var(--su1) * -1); --sun2: calc(var(--su2) * -1); + --sun3: calc(var(--su3) * -1); --sun4: calc(var(--su4) * -1); --sun6: calc(var(--su6) * -1); --sun8: calc(var(--su8) * -1); @@ -46,31 +48,4 @@ body { --sun64: calc(var(--su64) * -1); --sun96: calc(var(--su96) * -1); --sun128: calc(var(--su128) * -1); - - // 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; } diff --git a/packages/stacks-classic/lib/base/reset-normalize.less b/packages/stacks-classic/lib/base/reset-normalize.less index de97eb6d22..b7478ad8d6 100644 --- a/packages/stacks-classic/lib/base/reset-normalize.less +++ b/packages/stacks-classic/lib/base/reset-normalize.less @@ -69,7 +69,7 @@ main { /* 1 */ */ figure { - margin: 1em calc(var(--su-static32) + var(--su-static8)); // 1em 40px + margin: 1em calc(var(--su32) + var(--su8)); // 1em 40px } /** @@ -303,7 +303,7 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: var(--su-static1) dotted ButtonText; + outline: var(--su1) dotted ButtonText; } /** diff --git a/packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less b/packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less index c8fde3d91c..aed6e5f642 100644 --- a/packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less +++ b/packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less @@ -1,8 +1,8 @@ .s-activity-indicator { --_ai-bg: var(--pink-400); --_ai-fc: var(--white); - --_ai-min-size: var(--su-static16); - --_ai-p: 0 calc(var(--su-static4) - var(--su-static1)); + --_ai-min-size: var(--su16); + --_ai-p: 0 var(--su3); // VARIANTS &&__danger { @@ -19,7 +19,7 @@ } &&__sm { - --_ai-min-size: calc(var(--su-static8) + var(--su-static2)); + --_ai-min-size: calc(var(--su8) + var(--su2)); --_ai-p: 0; } diff --git a/packages/stacks-classic/lib/components/avatar/avatar.less b/packages/stacks-classic/lib/components/avatar/avatar.less index 385c541752..e70c3cbaf4 100644 --- a/packages/stacks-classic/lib/components/avatar/avatar.less +++ b/packages/stacks-classic/lib/components/avatar/avatar.less @@ -1,7 +1,7 @@ .s-avatar { - --_av-size: var(--su-static16); + --_av-size: var(--su16); --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars - --_av-fs-letter: calc(var(--su-static12) - var(--su-static1)); + --_av-fs-letter: calc(var(--su12) - var(--su1)); --_av-scale-badge: 1; // CONTEXTUAL STYLES @@ -11,7 +11,7 @@ } background-color: var(--black); - box-shadow: 0 0 0 var(--su-static1) var(--black); + box-shadow: 0 0 0 var(--su1) var(--black); color: var(--white); }); @@ -23,37 +23,37 @@ } &&__24 { - --_av-size: var(--su-static24); - --_av-fs-letter: var(--su-static16); + --_av-size: var(--su24); + --_av-fs-letter: var(--su16); --_av-scale-badge: 1.1; } &&__32 { - --_av-size: var(--su-static32); - --_av-fs-letter: calc(var(--su-static24) - var(--su-static2)); + --_av-size: var(--su32); + --_av-fs-letter: calc(var(--su24) - var(--su2)); --_av-scale-badge: 1.3; } &&__48 { - --_av-size: var(--su-static48); - --_av-fs-letter: calc(var(--su-static32) + var(--su-static2)); + --_av-size: var(--su48); + --_av-fs-letter: calc(var(--su32) + var(--su2)); --_av-scale-badge: 1.6; } &&__64 { - --_av-size: var(--su-static64); - --_av-fs-letter: calc(var(--su-static48) - var(--su-static4)); + --_av-size: var(--su64); + --_av-fs-letter: calc(var(--su48) - var(--su4)); --_av-scale-badge: 2.4; } &&__96 { - --_av-size: var(--su-static96); - --_av-fs-letter: calc(var(--su-static64) + var(--su-static2)); + --_av-size: var(--su96); + --_av-fs-letter: calc(var(--su64) + var(--su2)); } &&__128 { - --_av-size: var(--su-static128); - --_av-fs-letter: calc(var(--su-static96) - var(--su-static8)); + --_av-size: var(--su128); + --_av-fs-letter: calc(var(--su96) - var(--su8)); } // CHILD ELEMENTS @@ -87,7 +87,7 @@ } & &--indicator { - box-shadow: 0 0 0 var(--su-static2) var(--white); + box-shadow: 0 0 0 var(--su2) var(--white); bottom: 100%; left: 100%; position: absolute; diff --git a/packages/stacks-classic/lib/components/badge/badge.less b/packages/stacks-classic/lib/components/badge/badge.less index 6d394dba4a..0344c9c51b 100644 --- a/packages/stacks-classic/lib/components/badge/badge.less +++ b/packages/stacks-classic/lib/components/badge/badge.less @@ -17,7 +17,7 @@ // SIZES &&__sm { - --_ba-wmn: calc(var(--su-static16) + var(--su-static2)); + --_ba-wmn: calc(var(--su16) + var(--su2)); --_ba-as: flex-start; --_ba-fs: var(--fs-fine); //12px --_ba-px: var(--su4); diff --git a/packages/stacks-classic/lib/components/banner/banner.less b/packages/stacks-classic/lib/components/banner/banner.less index 61373d4136..ad25a9a2b4 100644 --- a/packages/stacks-classic/lib/components/banner/banner.less +++ b/packages/stacks-classic/lib/components/banner/banner.less @@ -3,7 +3,7 @@ // This would reduce the amount of CSS we ship to the client and simplify our codebase .s-banner { --_no-ty-offset: 0; - --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))); + --_no-ty: var(--theme-topbar-height, calc(var(--su48) + var(--su8))); .construct-notice-component(s-banner); &--icon { diff --git a/packages/stacks-classic/lib/components/block-link/block-link.less b/packages/stacks-classic/lib/components/block-link/block-link.less index 78e9aa3903..cf8af4d765 100644 --- a/packages/stacks-classic/lib/components/block-link/block-link.less +++ b/packages/stacks-classic/lib/components/block-link/block-link.less @@ -33,7 +33,7 @@ a.s-block-link, &&__right { &.is-selected { - --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4)); // -3px + --_li-block-bs-offset-x: calc(var(--su1) - var(--su4)); // -3px } } 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 e66708e25b..62e050bc87 100644 --- a/packages/stacks-classic/lib/components/button-group/button-group.less +++ b/packages/stacks-classic/lib/components/button-group/button-group.less @@ -74,9 +74,9 @@ } // STATIC COMPONENT STYLES - border: var(--su-static1) solid var(--black-300); + border: var(--su1) solid var(--black-300); border-radius: var(--br-md); display: inline-flex; flex-wrap: wrap; - padding: calc(var(--su-static4) - var(--su-static1)); + padding: var(--su3); } diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index 050f9c889c..e9d6a4ee62 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -1,5 +1,5 @@ .s-btn { - --_bu-baw: var(--su-static1); + --_bu-baw: var(--su1); --_bu-br: var(--br-pill); --_bu-fs: var(--fs-body1); --_bu-lh: var(--lh-base); @@ -9,7 +9,7 @@ --_bu-badge-fs: var(--fs-caption); --_bu-badge-px: var(--su6); --_bu-badge-py: var(--su2); - --_bu-dropdown-bw: var(--su-static4); + --_bu-dropdown-bw: var(--su4); // VARIANTS // Base @@ -316,14 +316,14 @@ border: 0; clip-path: inset(50%); /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ - clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px) - height: var(--su-static1); + clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); // rect(1px, 1px, 1px, 1px) + height: var(--su1); margin: var(--sun1); overflow-wrap: normal; overflow: hidden; padding: 0; position: absolute; - width: var(--su-static1); + width: var(--su1); } // Sizes @@ -333,7 +333,7 @@ --_bu-px: var(--su12); --_bu-badge-fs: var(--fs-fine); --_bu-badge-py: var(--su1); - --_bu-badge-px: calc(var(--su2) + var(--su1)); // 3px + --_bu-badge-px: var(--su3); } &&__xs { --_bu-g: var(--su4); @@ -349,7 +349,7 @@ --_bu-fs: var(--fs-body2); --_bu-px: var(--su24); --_bu-py: calc(var(--su12) + var(--su1)); // 13px - --_bu-badge-py: calc(var(--su2) + var(--su1)); // 3px + --_bu-badge-py: var(--su3); // 3px } // INTERACTION diff --git a/packages/stacks-classic/lib/components/card/card.less b/packages/stacks-classic/lib/components/card/card.less index caf2bcc520..f28df139b0 100644 --- a/packages/stacks-classic/lib/components/card/card.less +++ b/packages/stacks-classic/lib/components/card/card.less @@ -29,7 +29,7 @@ margin-bottom: 0; } - border: var(--su-static1) solid var(--_ca-bc); + border: var(--su1) solid var(--_ca-bc); background-color: var(--white); border-radius: var(--br-md); diff --git a/packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less b/packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less index 21d039771d..0613e63e9b 100644 --- a/packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less +++ b/packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less @@ -8,13 +8,13 @@ --_ch-gap: var(--su8); // inputs - --_ch-input-baw: var(--su-static1); + --_ch-input-baw: var(--su1); --_ch-input-bc: var(--black-350); --_ch-input-bg: var(--white); --_ch-input-bg-image: unset; - --_ch-input-br: var(--su-static1); + --_ch-input-br: var(--su1); --_ch-input-cursor: pointer; - --_ch-input-h: calc(var(--su-static12) + var(--su-static2)); // 14px + --_ch-input-h: calc(var(--su12) + var(--su2)); // 14px @media (forced-colors: active) { // This is for Windows High Contrast Mode &:checked, 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 e0c74e0daa..b5909e5eb2 100644 --- a/packages/stacks-classic/lib/components/code-block/code-block.less +++ b/packages/stacks-classic/lib/components/code-block/code-block.less @@ -92,7 +92,7 @@ border-color: var(--bc-medium); border-style: solid; - border-width: 0 var(--su-static1) 0 0; + border-width: 0 var(--su1) 0 0; color: var(--black-350); float: left; margin: var(--sun12); diff --git a/packages/stacks-classic/lib/components/input-fill/input-fill.less b/packages/stacks-classic/lib/components/input-fill/input-fill.less index daa1e5013e..376f38c767 100644 --- a/packages/stacks-classic/lib/components/input-fill/input-fill.less +++ b/packages/stacks-classic/lib/components/input-fill/input-fill.less @@ -12,17 +12,17 @@ } &.order-first { - --_if-blw: var(--su-static1); + --_if-blw: var(--su1); --_if-blr: var(--br-md); } &.order-last { - --_if-brw: var(--su-static1); + --_if-brw: var(--su1); --_if-brr: var(--br-md); } background-color: var(--_if-bg); - border: var(--su-static1) solid var(--_if-bc); + border: var(--su1) solid var(--_if-bc); border-left-width: var(--_if-blw); border-right-width: var(--_if-brw); border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr); 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 1f2290b4f3..11d3d00312 100644 --- a/packages/stacks-classic/lib/components/input-icon/input-icon.less +++ b/packages/stacks-classic/lib/components/input-icon/input-icon.less @@ -1,6 +1,6 @@ .s-input-icon { --_ii-fc: unset; - --_ii-r: calc((var(--su-static8) + var(--su-static2))); // 10px + --_ii-r: calc((var(--su8) + var(--su2))); // 10px // MODIFIERS .has-error & { @@ -32,7 +32,7 @@ --_ii-r: auto; color: var(--black-400); - left: calc((var(--su-static8) + var(--su-static2))); // 10px + left: calc((var(--su8) + var(--su2))); // 10px } color: var(--_ii-fc); diff --git a/packages/stacks-classic/lib/components/input_textarea/input_textarea.less b/packages/stacks-classic/lib/components/input_textarea/input_textarea.less index 0f0f5e78b3..f5347f1da1 100644 --- a/packages/stacks-classic/lib/components/input_textarea/input_textarea.less +++ b/packages/stacks-classic/lib/components/input_textarea/input_textarea.less @@ -6,7 +6,7 @@ --_in-bc: var(--black-300); --_in-bg: var(--white); --_in-br: var(--br-md); - --_in-bw: var(--su-static1); + --_in-bw: var(--su1); --_in-c: unset; --_in-d: unset; --_in-fc: var(--black-600); @@ -74,7 +74,7 @@ &&__creditcard, &&__search { - --_in-pl: calc(var(--su-static32) + var(--su-static4)); // 36px + --_in-pl: calc(var(--su32) + var(--su4)); // 36px } // INTERACTION diff --git a/packages/stacks-classic/lib/components/label/label.less b/packages/stacks-classic/lib/components/label/label.less index c8afd3c7ec..a5d5507844 100644 --- a/packages/stacks-classic/lib/components/label/label.less +++ b/packages/stacks-classic/lib/components/label/label.less @@ -28,19 +28,19 @@ // MODIFIERS // Sizes &&__sm { - .size-styles(sm; la; @styles: fs); + --_la-fs: var(--fs-caption); } &&__md { - .size-styles(md; la; @styles: fs); + --_la-fs: var(--fs-body3); } &&__lg { - .size-styles(lg; la; @styles: fs); + --_la-fs: var(--fs-title); } &&__xl { - .size-styles(xl; la; @styles: fs); + --_la-fs: var(--fs-headline1); } // CHILD ELEMENTS @@ -53,7 +53,7 @@ --_la-status-fc: var(--fc-medium); .highcontrast-mode({ - --_la-status-b: var(--su-static1) solid currentColor; + --_la-status-b: var(--su1) solid currentColor; }); // TODO: include child component class (without variant) on selector diff --git a/packages/stacks-classic/lib/components/link-preview/link-preview.less b/packages/stacks-classic/lib/components/link-preview/link-preview.less index 30061242af..02c0bb3086 100644 --- a/packages/stacks-classic/lib/components/link-preview/link-preview.less +++ b/packages/stacks-classic/lib/components/link-preview/link-preview.less @@ -68,7 +68,7 @@ border-bottom-left-radius: var(--br-md); border-bottom-right-radius: var(--br-md); - border-top: var(--su-static1) solid var(--bc-medium); + border-top: var(--su1) solid var(--bc-medium); display: flex; font-size: var(--fs-caption); justify-content: space-between; @@ -77,7 +77,7 @@ & &--header { background: var(--_lp-header-bg); - border-bottom: var(--su-static1) solid var(--bc-medium); + border-bottom: var(--su1) solid var(--bc-medium); border-top-left-radius: var(--br-md); border-top-right-radius: var(--br-md); display: flex; @@ -141,7 +141,7 @@ white-space: nowrap; } - border: var(--su-static1) solid var(--bc-medium); + border: var(--su1) solid var(--bc-medium); border-radius: var(--br-md); box-shadow: var(--bs-sm); text-align: left; diff --git a/packages/stacks-classic/lib/components/link/link.less b/packages/stacks-classic/lib/components/link/link.less index 7acc869f9e..d3f80307b2 100644 --- a/packages/stacks-classic/lib/components/link/link.less +++ b/packages/stacks-classic/lib/components/link/link.less @@ -41,16 +41,16 @@ a, // MODIFIERS &__dropdown { &:after { - border-width: var(--su-static4); // this needs to come before any below border modifications + border-width: var(--su4); // this needs to come before any below border modifications border-bottom-width: 0; border-color: currentColor transparent; border-style: solid; - border-top-width: var(--su-static4); + border-top-width: var(--su4); content: ""; pointer-events: none; position: absolute; right: 0; - top: calc(50% - var(--su-static2)); + top: calc(50% - var(--su2)); z-index: var(--zi-active); } diff --git a/packages/stacks-classic/lib/components/menu/menu.less b/packages/stacks-classic/lib/components/menu/menu.less index cead96f47f..51baebf346 100644 --- a/packages/stacks-classic/lib/components/menu/menu.less +++ b/packages/stacks-classic/lib/components/menu/menu.less @@ -6,7 +6,7 @@ // CHILD ELEMENTS & &--divider { background-color: var(--black-200); - height: var(--su-static1); + height: var(--su1); margin: var(--su8) 0; } diff --git a/packages/stacks-classic/lib/components/navigation/navigation.less b/packages/stacks-classic/lib/components/navigation/navigation.less index 07f55d8460..afbf1598c4 100644 --- a/packages/stacks-classic/lib/components/navigation/navigation.less +++ b/packages/stacks-classic/lib/components/navigation/navigation.less @@ -13,7 +13,7 @@ --_na-item-selected-bg: none; --_na-item-selected-fc: var(--black-600); --_na-item-selected-bg-hover: var(--_na-item-bg-hover); - --_na-item-selected-h: var(--su-static2); + --_na-item-selected-h: var(--su2); --_na-item-text-ta: center; --_na-title-mt: var(--su24); --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E"); diff --git a/packages/stacks-classic/lib/components/notice/notice.less b/packages/stacks-classic/lib/components/notice/notice.less index d82285d5a3..f2f5a21469 100644 --- a/packages/stacks-classic/lib/components/notice/notice.less +++ b/packages/stacks-classic/lib/components/notice/notice.less @@ -146,7 +146,7 @@ code { background-color: var(--_no-code-bg); color: var(--_no-code-fc); - outline: var(--su-static1) solid var(--_no-code-bc); + outline: var(--su1) solid var(--_no-code-bc); padding-left: var(--su2); padding-right: var(--su2); white-space: nowrap; diff --git a/packages/stacks-classic/lib/components/page-title/page-title.less b/packages/stacks-classic/lib/components/page-title/page-title.less index 86ada24e75..9ebd2a2dd5 100644 --- a/packages/stacks-classic/lib/components/page-title/page-title.less +++ b/packages/stacks-classic/lib/components/page-title/page-title.less @@ -43,7 +43,7 @@ align-items: var(--_pt-ai); flex-direction: var(--_pt-fd); - border-bottom: var(--su-static1) solid var(--bc-medium); + border-bottom: var(--su1) solid var(--bc-medium); display: flex; justify-content: space-between; padding-bottom: var(--su16); diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 1c22a9fac8..d0e117fa4a 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -11,7 +11,7 @@ --_pa-item-bg: unset; --_pa-item-br: unset; --_pa-item-fc: var(--black-400); - --_pa-item-p: var(--su-static4); + --_pa-item-p: var(--su4); // MODIFIERS &.is-selected { @@ -20,7 +20,7 @@ &:not(:hover):not(:focus-visible):before { background-color: var(--black-600); content: ""; - height: var(--su-static2); + height: var(--su2); left: 0; position: absolute; right: 0; @@ -31,7 +31,7 @@ --_pa-item-bg: var(--black-150); --_pa-item-br: var(--br-circle); --_pa-item-fc: var(--black-600); - --_pa-item-p: var(--su-static6); + --_pa-item-p: var(--su6); aspect-ratio: 1 / 1; @@ -64,7 +64,7 @@ display: inline-flex; align-items: center; justify-content: center; - margin: var(--su-static1); + margin: var(--su1); position: relative; } diff --git a/packages/stacks-classic/lib/components/popover/popover.less b/packages/stacks-classic/lib/components/popover/popover.less index 3bbe6a8328..0fb2150364 100644 --- a/packages/stacks-classic/lib/components/popover/popover.less +++ b/packages/stacks-classic/lib/components/popover/popover.less @@ -7,7 +7,7 @@ --_po-w: 100%; // content // --_po-topbar-height assumes the topbar height based on topbar styles - --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))); + --_po-topbar-height: var(--theme-topbar-height, calc(var(--su48) + var(--su8))); --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48)); // CONTEXTUAL STYLES @@ -42,7 +42,7 @@ } background-color: var(--_po-bg); - border: var(--su-static1) solid var(--_po-bc); + border: var(--su1) solid var(--_po-bc); box-shadow: var(--_po-bs); display: var(--_po-d); min-width: var(--_po-wmn); 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 b9d9e11974..091e50b173 100644 --- a/packages/stacks-classic/lib/components/progress-bar/progress-bar.less +++ b/packages/stacks-classic/lib/components/progress-bar/progress-bar.less @@ -7,10 +7,10 @@ --_pr-h: unset; --_pr-size: unset; --_pr-w: 100%; - --_pr-hmn: var(--su-static4); + --_pr-hmn: var(--su4); --_pr-bar-bar: var(--br-md); --_pr-bar-bg: var(--green-400); - --_pr-bar-hmn: var(--su-static4); + --_pr-bar-hmn: var(--su4); --_pr-label-ai: unset; --_pr-label-bc: transparent; --_pr-label-d: unset; @@ -69,20 +69,20 @@ &&__circular { --_pr-bg: transparent; - --_pr-size: var(--su-static32); + --_pr-size: var(--su32); --s-progress-value: 0; &.s-progress { &__sm { - --_pr-size: var(--su-static24); + --_pr-size: var(--su24); } &__md { - --_pr-size: var(--su-static48); + --_pr-size: var(--su48); } &__lg { - --_pr-size: var(--su-static64); + --_pr-size: var(--su64); } } @@ -101,7 +101,7 @@ fill: none; stroke-linecap: round; - stroke-width: var(--su-static4); + stroke-width: var(--su4); } transform: rotate(270deg); // Make everything originate from the top of the circle @@ -138,9 +138,9 @@ background: var(--black-250); border-radius: 0; - height: var(--su-static6); + height: var(--su6); position: absolute; - top: calc(var(--su-static8) + var(--su-static1)); + top: calc(var(--su8) + var(--su1)); z-index: var(--zi-base); } @@ -171,7 +171,7 @@ &--stop { background: var(--theme-secondary); - box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized + box-shadow: 0 0 0 var(--su6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized } } } @@ -208,10 +208,10 @@ border-radius: 100%; color: var(--_white-static); display: flex; - height: var(--su-static24); + height: var(--su24); justify-content: center; position: relative; - width: var(--su-static24); + width: var(--su24); z-index: var(--zi-selected); } } @@ -224,13 +224,13 @@ min-height: var(--_pr-hmn); height: 100%; - min-width: var(--su-static6); + min-width: var(--su6); position: relative; } & &--label { align-items: var(--_pr-label-ai); - border: var(--su-static1) solid var(--_pr-label-bc); + border: var(--su1) solid var(--_pr-label-bc); display: var(--_pr-label-d); gap: var(--_pr-label-g); justify-content: var(--_pr-label-jc); @@ -257,11 +257,11 @@ left: var(--sun1); position: absolute; top: 0; - width: var(--su-static4); + width: var(--su4); } display: block; - padding-top: var(--su-static4); + padding-top: var(--su4); position: relative; text-align: center; } @@ -282,7 +282,7 @@ height: var(--_pr-size, var(--_pr-h)); min-height: var(--_pr-hmn); - min-width: var(--su-static6); + min-width: var(--su6); position: relative; width: var(--_pr-size, var(--_pr-w)); } diff --git a/packages/stacks-classic/lib/components/prose/prose.less b/packages/stacks-classic/lib/components/prose/prose.less index 43f972a702..f788af762f 100644 --- a/packages/stacks-classic/lib/components/prose/prose.less +++ b/packages/stacks-classic/lib/components/prose/prose.less @@ -4,7 +4,7 @@ @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc. @pr-spoiler-transition: opacity 0.1s ease-in-out; // COMPONENT-SPECIFIC CUSTOM PROPERTIES - --_pr-fs: calc(var(--su-static16) - var(--su-static1)); // Force a font size that doesn’t change at the smallest breakpoint; + --_pr-fs: unset; --_pr-lh: 1.5; --_pr-blockquote-ml: 1em; --_pr-blockquote-mt: 0; @@ -19,7 +19,7 @@ --_pr-hr-bg: var(--black-225); // used for both background-color and color properties --_pr-img-mb: @pr-spacing; --_pr-kbd-bc: var(--black-300); - --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static); + --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static); --_pr-spoiler-cursor: pointer; --_pr-spoiler-after-t: 1em; --_pr-soiler-after-o: unset; @@ -33,7 +33,7 @@ .dark-mode({ --_pr-kbd-bc: transparent; --_pr-kbd-btc: var(--black-400); - --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8); + --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8); }); .highcontrast-mode({ @@ -247,7 +247,7 @@ &:before { background: var(--_pr-blockquote-before-bg); - border-radius: var(--su-static8); + border-radius: var(--su8); bottom: 0; content: ""; display: block; @@ -299,7 +299,7 @@ color: var(--_pr-hr-bg); // value set for background-color reused for color intentionally border: 0; - height: var(--su-static1); + height: var(--su1); margin-bottom: @pr-spacing; } @@ -311,7 +311,7 @@ } kbd { - border: var(--su-static1) solid var(--_pr-kbd-bc); + border: var(--su1) solid var(--_pr-kbd-bc); border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc)); box-shadow: var(--_pr-kbd-bs); @@ -325,7 +325,7 @@ margin: 0 0.1em; overflow-wrap: break-word; padding: 0.1em 0.6em; - text-shadow: 0 var(--su-static1) 0 var(--white); + text-shadow: 0 var(--su1) 0 var(--white); } li { @@ -412,7 +412,7 @@ background: var(--black-150); border-radius: var(--br-md); color: var(--black-600); - min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number + min-height: var(--su48); // TODO: Let's find a solution that doesn't have a magic number } .youtube-embed { // [2] @@ -434,7 +434,7 @@ width: 100%; } - font-size: var(--_pr-fs); // Force a font size that doesn’t change at the smallest breakpoint + font-size: var(--_pr-fs); line-height: var(--_pr-lh); overflow-wrap: break-word; diff --git a/packages/stacks-classic/lib/components/select/select.less b/packages/stacks-classic/lib/components/select/select.less index e817ea7875..3ccaa00a48 100644 --- a/packages/stacks-classic/lib/components/select/select.less +++ b/packages/stacks-classic/lib/components/select/select.less @@ -5,13 +5,13 @@ --_se-select-br: var(--br-md); --_se-select-fc: var(--black); --_se-select-px: 0.7em; - --_se-select-py: var(--su-static8); + --_se-select-py: var(--su8); --_se-select-fs: var(--fs-body1); --_se-select-lh: var(--lh-base); // CONTEXTUAL STYLES @supports (-webkit-overflow-scrolling: touch) { - --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused + --_se-select-fs: var(--su16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size } @@ -24,36 +24,52 @@ .validation-states(se-select); &&__sm { - .size-styles(sm; se-select; @styles: fs); + --_se-select-fs: var(--fs-caption); --_se-select-lh: var(--lh-sm); - --_se-select-py: calc(var(--su6) - var(--su-static1) / 2); + --_se-select-py: calc(var(--su6) - var(--su1) / 2); } &&__lg { - .size-styles(md; se-select; @styles: fs); + --_se-select-fs: var(--fs-title); --_se-select-lh: var(--lh-lg); } // CHILD ELEMENTS select&, & > select { - .webkit-autofill(); + // TODO: Investigate if this is still needed. + &:-webkit-autofill { + &:focus { + border-color: var(--blue-400); + // Since the box shadow is overwritten to show a background, we have to re-add the focus outline + -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su4) var(--focus-ring); + } + + -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset; // This acts as a background color by stretching an inset box shadow across the input + -webkit-text-fill-color: var(--black); + border-color: var(--blue-400); + transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser. + } + + &::-webkit-contacts-auto-fill-button { + background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware + } } &:after { // Chevron16UpDown icon background-color: currentColor; content: ""; - height: var(--su-static16); + height: var(--su16); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; pointer-events: none; position: absolute; - right: calc(var(--su32) - var(--su-static24)); + right: calc(var(--su32) - var(--su24)); top: 50%; transform: translateY(-50%); - width: var(--su-static16); + width: var(--su16); z-index: var(--zi-selected); } @@ -98,7 +114,7 @@ } background-color: var(--_se-select-bg); - border: var(--su-static1) solid var(--_se-select-bc); + border: var(--su1) solid var(--_se-select-bc); border-radius: var(--_se-select-br); color: var(--_se-select-fc); font-size: var(--_se-select-fs); diff --git a/packages/stacks-classic/lib/components/table/table.less b/packages/stacks-classic/lib/components/table/table.less index 011e53bedc..53e4899380 100644 --- a/packages/stacks-classic/lib/components/table/table.less +++ b/packages/stacks-classic/lib/components/table/table.less @@ -1,9 +1,9 @@ .s-table { - @ta-cell-border: var(--su-static1) solid var(--bc-medium); + @ta-cell-border: var(--su1) solid var(--bc-medium); @ta-columns: (100% / 12); --_ta-tbody-tbody-bc: var(--bc-medium); - --_ta-tbody-tbody-bw: var(--su-static2); + --_ta-tbody-tbody-bw: var(--su2); --_ta-tbody-tr-even-bg: unset; --_ta-td-bbw: 0; --_ta-td-bc: var(--bc-medium); @@ -68,7 +68,7 @@ --_ta-td-bc: transparent; --_ta-th-bc: transparent; --_ta-tbody-tbody-bc: transparent; // [1] - --_ta-tbody-tbody-bw: var(--su-static12); // [1] + --_ta-tbody-tbody-bw: var(--su12); // [1] --_ta-thead-th-bg: transparent; thead th { @@ -135,7 +135,7 @@ border: 0; cursor: pointer; display: flex; - gap: var(--su-static4); + gap: var(--su4); font-weight: inherit; margin: calc(var(--_ta-th-p) * -1); padding: var(--_ta-th-p); @@ -214,14 +214,14 @@ &.s-table--progress-bar { --_ta-td-blw: 0; --_ta-td-pl: 0; - --_ta-td-w: calc(var(--su-static12) * 10); // 120px + --_ta-td-w: calc(var(--su12) * 10); // 120px } - border: var(--su-static1) solid var(--_ta-td-bc); - border-bottom-width: var(--_ta-td-bbw, var(--su-static1)); - border-left-width: var(--_ta-td-blw, var(--su-static1)); - border-right-width: var(--_ta-td-brw, var(--su-static1)); - border-top-width: var(--_ta-td-btw, var(--su-static1)); + border: var(--su1) solid var(--_ta-td-bc); + border-bottom-width: var(--_ta-td-bbw, var(--su1)); + border-left-width: var(--_ta-td-blw, var(--su1)); + border-right-width: var(--_ta-td-brw, var(--su1)); + border-top-width: var(--_ta-td-btw, var(--su1)); font-size: var(--_ta-td-fs); font-weight: var(--_ta-td-fw); padding: var(--_ta-td-p); @@ -249,8 +249,8 @@ --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px } - border: var(--su-static1) solid var(--_ta-th-bc); - border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw); + border: var(--su1) solid var(--_ta-th-bc); + border-width: var(--su1) var(--su1) var(--_ta-th-bbw); font-size: var(--_ta-th-fs); padding: var(--_ta-th-p); padding-top: var(--_ta-th-pt, var(--_ta-th-p)); @@ -274,8 +274,8 @@ tr { &:last-of-type { - --_ta-td-bbw: var(--su-static1); - --_ta-th-bbw: var(--su-static1); + --_ta-td-bbw: var(--su1); + --_ta-th-bbw: var(--su1); } &.is-disabled { diff --git a/packages/stacks-classic/lib/components/tag/tag.less b/packages/stacks-classic/lib/components/tag/tag.less index cd03d8c0fe..945dbe798c 100644 --- a/packages/stacks-classic/lib/components/tag/tag.less +++ b/packages/stacks-classic/lib/components/tag/tag.less @@ -49,10 +49,10 @@ background-color: currentColor; content: ""; display: block; - height: calc(var(--su-static16) - var(--su-static2)); + height: calc(var(--su16) - var(--su2)); -webkit-mask-size: contain; mask-size: contain; - width: calc(var(--su-static16) - var(--su-static2)); + width: calc(var(--su16) - var(--su2)); } } @@ -150,7 +150,7 @@ height: 100%; } - max-width: calc(var(--su-static16) + var(--su-static2)); + max-width: calc(var(--su16) + var(--su2)); margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0; } @@ -169,7 +169,7 @@ } background-color: var(--_ta-bg); - border: var(--su-static1) solid var(--_ta-bc); + border: var(--su1) solid var(--_ta-bc); color: var(--_ta-fc); font-size: var(--_ta-fs); padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl); diff --git a/packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less b/packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less index ee6885987c..5e9b9fbdda 100644 --- a/packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less +++ b/packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less @@ -97,10 +97,10 @@ border-radius: 1000px; cursor: pointer; flex-shrink: 0; - height: var(--su-static24); + height: var(--su24); margin: 0; // guard against production adding 5px of margin to these transition: background-position 0.2s ease; vertical-align: top; - width: calc(var(--su-static48) - var(--su-static4)); + width: calc(var(--su48) - var(--su4)); } } diff --git a/packages/stacks-classic/lib/components/topbar/topbar.less b/packages/stacks-classic/lib/components/topbar/topbar.less index cedc0794c8..fe038d9036 100644 --- a/packages/stacks-classic/lib/components/topbar/topbar.less +++ b/packages/stacks-classic/lib/components/topbar/topbar.less @@ -1,12 +1,12 @@ .s-topbar { --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary)); - --_tb-h: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))); + --_tb-h: var(--theme-topbar-height, calc(var(--su48) + var(--su8))); // CHILD COMPONENT CUSTOM PROPERTIES // Item --_tb-item-bg: unset; --_tb-item-fc: var(--theme-topbar-item-color, var(--black-400)); // Item s-activity-indicator - --_tb-item-ai-bs: 0 0 0 var(--su-static2) var(--theme-topbar-background-color, var(--white)); + --_tb-item-ai-bs: 0 0 0 var(--su2) var(--theme-topbar-background-color, var(--white)); --_tb-item-ai-t: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px; // Logo --_tb-logo-bg: transparent; @@ -16,9 +16,9 @@ --_tb-menu-btn-fc-hover: unset; --_tb-menu-btn-span-bg: var(--theme-topbar-item-color, var(--black-400)); --_tb-menu-btn-span-fc: unset; - --_tb-menu-btn-span-after-t: calc(var(--su-static6) - var(--su-static1)); // 5px; + --_tb-menu-btn-span-after-t: calc(var(--su6) - var(--su1)); // 5px; --_tb-menu-btn-span-after-rotate: 0deg; - --_tb-menu-btn-span-before-t: calc(var(--su-static1) - var(--su-static6)); // -5px; + --_tb-menu-btn-span-before-t: calc(var(--su1) - var(--su6)); // -5px; --_tb-menu-btn-span-before-rotate: 0deg; // Notice --_tb-notice-bg: transparent; @@ -84,7 +84,7 @@ --theme-topbar-item-background-hover: var(--black-300); --theme-topbar-item-color-current: var(--black); - border-bottom: var(--su-static1) solid currentColor; + border-bottom: var(--su1) solid currentColor; }); .highcontrast-dark-mode({ @@ -179,7 +179,7 @@ --_tb-item-bg: var(--theme-topbar-item-background-hover, var(--black-200)); --_tb-item-fc: var(--theme-topbar-item-color-hover, var(--black-600)); - --_tb-item-ai-bs: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200)); + --_tb-item-ai-bs: 0 0 0 var(--su2) var(--theme-topbar-item-background-hover, var(--black-200)); --_tb-item-ai-t: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px outline: none; @@ -190,7 +190,7 @@ top: var(--_tb-item-ai-t); position: absolute; - right: var(--su-static2); + right: var(--su2); transition: top var(--te-smooth) 0.15s; } @@ -247,9 +247,9 @@ &, &:after, &:before { - height: var(--su-static2); + height: var(--su2); position: relative; - width: var(--su-static16); + width: var(--su16); } &:after, @@ -319,7 +319,7 @@ } background-color: var(--_tb-notice-bg); - border: var(--su-static1) solid var(--_tb-notice-bg); // notice border-color matches background-color + border: var(--su1) solid var(--_tb-notice-bg); // notice border-color matches background-color color: var(--_tb-notice-fc); text-decoration: var(--_tb-notice-td); @@ -474,7 +474,7 @@ align-items: center; background-color: var(--theme-topbar-background-color, var(--white)); - border-bottom: var(--theme-topbar-bottom-border, var(--su-static1) solid var(--black-225)); + border-bottom: var(--theme-topbar-bottom-border, var(--su1) solid var(--black-225)); border-top: var(--_tb-bt); display: flex; height: var(--_tb-h); @@ -501,7 +501,7 @@ #calc-topbar-lightness-increase(); --theme-topbar-background-color: @topbar-actual-background; - --theme-topbar-bottom-border: var(--su-static1) solid @topbar-actual-background; + --theme-topbar-bottom-border: var(--su1) solid @topbar-actual-background; // Search input --theme-topbar-search-color: lighten(@topbar-actual-background, 80% + @topbar-search-lightness-increase); @@ -531,7 +531,7 @@ // TODO extend forced light mode instead of overriding --theme-topbar-background-color: var(--_white-static); - --theme-topbar-bottom-border: var(--su-static1) solid .set-black()[225]; + --theme-topbar-bottom-border: var(--su1) solid .set-black()[225]; // Search input --theme-topbar-search-color: .set-black()[500]; diff --git a/packages/stacks-classic/lib/components/uploader/uploader.less b/packages/stacks-classic/lib/components/uploader/uploader.less index c8f2a71635..96f8d32029 100644 --- a/packages/stacks-classic/lib/components/uploader/uploader.less +++ b/packages/stacks-classic/lib/components/uploader/uploader.less @@ -82,7 +82,7 @@ display: flex; flex-direction: column; justify-content: center; - min-height: var(--su-static128); + min-height: var(--su128); padding: var(--su8) var(--su16); position: relative; text-align: center; @@ -114,7 +114,7 @@ & &--preview-thumbnail { .highcontrast-mode({ - border: var(--su-static1) solid var(--black); + border: var(--su1) solid var(--black); }); &:is(img) { @@ -129,7 +129,7 @@ background-color: var(--white); border-radius: var(--br-md); box-shadow: var(--bs-md); - max-height: var(--su-static128); + max-height: var(--su128); max-width: 100%; overflow: hidden; text-overflow: ellipsis; @@ -171,9 +171,9 @@ } color: transparent; - height: var(--su-static32); + height: var(--su32); flex-shrink: 0; - width: var(--su-static32); + width: var(--su32); } } diff --git a/packages/stacks-classic/lib/components/user-card/user-card.less b/packages/stacks-classic/lib/components/user-card/user-card.less index b92804d91c..e89ba7e4f4 100644 --- a/packages/stacks-classic/lib/components/user-card/user-card.less +++ b/packages/stacks-classic/lib/components/user-card/user-card.less @@ -24,7 +24,7 @@ } .s-user-card--group:has(> .s-user-card--rep) { - margin-top: calc(var(--su2) * -1); + margin-top: var(--sun2); } --_uc-ai: flex-start; @@ -82,7 +82,7 @@ } &--username__op { - --_uc-username-p: calc(var(--su4) - var(--su1)) var(--su4) calc(var(--su4) - var(--su1)) var(--su4); + --_uc-username-p: var(--su3) var(--su4) var(--su3) var(--su4); --_uc-username-bg: var(--blue-100); --_uc-username-bl: var(--su4) solid var(--blue-300); --_uc-username-d: flex; diff --git a/packages/stacks-classic/lib/exports/constants-helpers.less b/packages/stacks-classic/lib/exports/constants-helpers.less index 2a9331caee..b31acf2d39 100644 --- a/packages/stacks-classic/lib/exports/constants-helpers.less +++ b/packages/stacks-classic/lib/exports/constants-helpers.less @@ -31,7 +31,7 @@ body { --zi-modals: 9000; // Modals // Border Radius - --br-md: calc(var(--su-static4) + var(--su-static6)); // 10px + --br-md: calc(var(--su4) + var(--su6)); // 10px --br-circle: 50%; --br-pill: 1000px; // TODO SHINE Retaining legacy border radius for backward compatibility @@ -64,18 +64,18 @@ body { // ---------------------------------------------------------------------------- @scrollbar-styles: { &::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } &::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } &::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -101,6 +101,6 @@ body { // Show focus styles on keyboard focus. &:focus-visible { outline: none; - box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted); + box-shadow: 0 0 0 var(--su4) var(--focus-ring-muted); } } diff --git a/packages/stacks-svelte/src/components/Toast/Toast.svelte b/packages/stacks-svelte/src/components/Toast/Toast.svelte index a390e5fe91..c1e31bec9b 100644 --- a/packages/stacks-svelte/src/components/Toast/Toast.svelte +++ b/packages/stacks-svelte/src/components/Toast/Toast.svelte @@ -103,5 +103,5 @@ From 353240c7b9de3a81defee6acac360e617e6d18b7 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 16:38:43 -0500 Subject: [PATCH 02/15] Remove unused mixins --- .../stacks-classic/lib/exports/mixins.less | 305 ++---------------- 1 file changed, 27 insertions(+), 278 deletions(-) diff --git a/packages/stacks-classic/lib/exports/mixins.less b/packages/stacks-classic/lib/exports/mixins.less index 5ceb14203a..f5ff97e30a 100644 --- a/packages/stacks-classic/lib/exports/mixins.less +++ b/packages/stacks-classic/lib/exports/mixins.less @@ -1,52 +1,10 @@ -/* stylelint-disable indentation */ -// -// STACK OVERFLOW -// MIXINS -// -// 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/ -// -// ============================================================================ -// $ Clearfix -// ----------------------------------------------------------------------------- -.clearfix() { - &:before, - &:after { - content: ""; - display: table; - } - &:after { clear: both; } -} - -// ============================================================================ -// -- LIGHTMODE -// .light-mode-forced ensures light color scheme is used in .theme-light__forced -// -// .light-mode-forced({ color: var(--black-600) }); -// -// --------------------------------------------------------------------------- - -.light-mode-forced(@rules) { - .theme-light__forced &, - body.theme-system .theme-light__forced &, - body.theme-dark .theme-light__forced & { - @rules(); - } -} - -// =========================================================================== -// -- DARKMODE -// .darkmode renders a dark mode override behind the -// prefers-color-scheme: dark media query and .theme-system. It also -// renders the same rules outside of the media query with .theme-dark -// -// Usage example: -// -// .dark-mode({ background-color: var(--black-100); }); -// -// --------------------------------------------------------------------------- - +// COLOR MODE OVERRIDES +/** + * Applies styles rules when dark mode is active. + * + * Usage example: + * .dark-mode({ background-color: var(--black-100); }); + */ .dark-mode(@rules) { body.theme-system & { @media (prefers-color-scheme: dark) { @@ -61,22 +19,24 @@ } } -// =========================================================================== -// -- HIGHCONTRAST -// .highcontrast-mode renders a high contrast mode override for .theme-highcontrast -// -// Usage example: -// -// .highcontrast-mode({ background-color: var(--black-100); }); -// -// --------------------------------------------------------------------------- - +/** + * Applies styles rules when high contrast mode is active. + * + * Usage example: + * .highcontrast-mode({ background-color: var(--black-100); }); + */ .highcontrast-mode(@rules) { body.theme-highcontrast & { @rules(); } } +/** + * Applies styles rules when high contrast and dark mode is active. + * + * Usage example: + * .highcontrast-dark-mode({ background-color: var(--black-100); }); + */ .highcontrast-dark-mode(@rules) { body.theme-highcontrast.theme-system & { @media (prefers-color-scheme: dark) { @@ -88,31 +48,9 @@ } } -// =========================================================================== -// -- FONT FACE -// Used to load hosted, custom webfonts. You must provide the font's -// full file path in the mixin. All modern browsers the WOFF file format. -// Will automatically add various local()s to try using already-installed -// fonts before downloading. -// --------------------------------------------------------------------------- -/* stylelint-disable at-rule-descriptor-value-no-unknown */ -.font-face(@family, @path, @weight, @style) { - @font-face { - font-family: "@{family}"; - font-style: @style; - font-weight: @weight; - & when (@style=italic) { - #stacks-internals #font-face-src(@family, @path, @weight, " Italic"); - } - & when not (@style=italic) { - #stacks-internals #font-face-src(@family, @path, @weight, ""); - } - } -} -/* stylelint-enable at-rule-descriptor-value-no-unknown */ - +// FOCUS STYLES /** - * Focus styles for the given context. + * Applies focus styles for the given context. * * Usage example: * .focus-styles(true, true); @@ -122,152 +60,29 @@ */ .focus-styles(@inset: false, @border: false) { & when not (@inset) and not (@border) { - box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme); + box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme); } & when not (@inset) and (@border) { border-color: var(--focus-neutral) !important; - box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme); + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); } & when (@inset) and not (@border) { - box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral); + box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral); } & when (@inset) and (@border) { border-color: var(--focus-theme) !important; - box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral); + box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral); } // We include a 2px transparent outline to ensure Windows High Contrast Forced Color Mode // includes outlines as expected See https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ - outline: var(--su-static2) solid transparent !important; -} - -// ============================================================================= -// -- COLORS -// The following mixins let us do color math on the browser. They take a -// color prefix, and they expect the different values to be stored in -// --{prefix}-h, --{prefix}-s and --{prefix}-l -// ----------------------------------------------------------------------------- - -.load-color-variables(@amount) { - @amountDecimal: (@amount / 100); - @amountPercentage: @amount * 1%; - @complementDecimal: 1 - @amountDecimal; - @additionDecimal: 1 + @amountDecimal; -} - -.assemble-color(@color-prefix) { - @result: hsl(var(~"--@{color-prefix}-h"), - var(~"--@{color-prefix}-s"), - var(~"--@{color-prefix}-l")); -} - -// Increase the lightness of a color in the HSL color space by an absolute amount. -.native-lighten(@color-prefix, @amount) { - .load-color-variables(@amount); - @result: hsl(var(~"--@{color-prefix}-h"), - var(~"--@{color-prefix}-s"), - calc(var(~"--@{color-prefix}-l") + @amountPercentage)); -} - -// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts. -.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) { - @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage]; - @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage]; - @result: hsl(var(~"--@{color-prefix}-h"), - calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage), - calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage)); -} - - -// Decrease the lightness of a color in the HSL color space by an absolute amount. -.native-darken(@color-prefix, @amount) { - .load-color-variables(@amount); - @result: hsl(var(~"--@{color-prefix}-h"), - var(~"--@{color-prefix}-s"), - calc(var(~"--@{color-prefix}-l") - @amountPercentage)); -} - -// Mix color with white in variable proportion -.native-tint(@color-prefix, @amount) { - .load-color-variables(@amount); - @ramount: 255 * @amountDecimal; - @gamount: 255 * @amountDecimal; - @bamount: 255 * @amountDecimal; - @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal), - calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal), - calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal)); -} - -// Mix color with black in variable proportion -.native-shade(@color-prefix, @amount) { - .load-color-variables(@amount); - @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal), - calc(var(~"--@{color-prefix}-g") * @complementDecimal), - calc(var(~"--@{color-prefix}-b") * @complementDecimal)); -} - -// Set the absolute opacity of a color. -.native-fade(@color-prefix, @amount) { - .load-color-variables(@amount); - @result: hsla(var(~"--@{color-prefix}-h"), - var(~"--@{color-prefix}-s"), - var(~"--@{color-prefix}-l"), - @amountDecimal); -} - -// ============================================================================= -// -- SIZE STYLES -// The following mixins let us generate pseudo-private custom properties -// for common sizes. They expect a size (@size), a prefix for the custom -// property (@prefix), and an array of comma-separates abbreviated styles -// (@styles). -// ----------------------------------------------------------------------------- - -.size-styles(@size, @prefix, @styles, @index: length(@styles)) { - & when (@index > 0) { - @style: extract(@styles, @index); - - // xs - & when (@size = xs) and (@style = fs) { - --_@{prefix}-fs: var(--fs-fine); - } - - // sm - & when (@size = sm) and (@style = fs) { - --_@{prefix}-fs: var(--fs-caption); - } - - // md - & when (@size = md) and (@style = br) { - --_@{prefix}-br: calc(var(--br-md) + var(--su-static1)); - } - & when (@size = md) and (@style = fs) { - --_@{prefix}-fs: var(--fs-body3); - } - - // lg - & when (@size = lg) and (@style = br) { - --_@{prefix}-br: calc(var(--br-md) + var(--su-static1)); - } - & when (@size = lg) and (@style = fs) { - --_@{prefix}-fs: var(--fs-title); - } - - // xl - & when (@size = xl) and (@style = br) { - --_@{prefix}-br: var(--br-md); - } - & when (@size = xl) and (@style = fs) { - --_@{prefix}-fs: var(--fs-headline1); - } - - .size-styles(@size, @prefix, @styles, @index: @index - 1); - } + outline: var(--su2) solid transparent !important; } +// SIZING /** * Generate base and responsive atomic sizing classes. * @@ -310,7 +125,6 @@ ); } - /** * Generate atomic sizing classes using predefined SU (spacing unit) values. * @@ -338,68 +152,3 @@ 1 2 3 4 5 6 7 8 9 10 11 12 ); } - -// ============================================================================= -// -- WEBKIT AUTOFILL -// ----------------------------------------------------------------------------- -.webkit-autofill() { - &:-webkit-autofill { - &:focus { - border-color: var(--blue-400); - // Since the box shadow is overwritten to show a background, we have to re-add the focus outline - -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su-static4) var(--focus-ring); - } - - -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset; // This acts as a background color by stretching an inset box shadow across the input - -webkit-text-fill-color: var(--black); - border-color: var(--blue-400); - transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser. - } - - &::-webkit-contacts-auto-fill-button { - background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware - } - -} - -// =========================================================================== -// Internals only beyond this point -- helpers for .font-face() -// --------------------------------------------------------------------------- - - -#stacks-internals() { - - // Generate all common variants for local names that this font face may have. - // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript - // name or the full font name". - // For example, given the family "Comic Sans MS", weight 800, italic, we're - // trying these local names: - // - // - Comic Sans MS Extra Bold Italic - // - ComicSansMS-ExtraBoldItalic - // - Comic Sans MS 800 Italic - // - ComicSansMS-800Italic - // - // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic"). - - #font-face-src(@family, @path, @weight, @style-postfix) { - @index: round(@weight/100); - @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black"; - @weight-name: extract(@weight-names, @index); - #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix); - } - - #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) { - @family-nospace: replace(@family, " ", ""); - @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", ""); - @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", ""); - - & when (@postfix-name="Regular") { - src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff"); - } - - & when not (@postfix-name="Regular") { - src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff"); - } - } -} From b7411fbabaa41735c8a1e113d135b04dc45c2da3 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 18:07:29 -0500 Subject: [PATCH 03/15] Reorganize eleventy data files --- packages/stacks-docs/.eleventy.js | 21 +++++++++++++++++++ .../_data/{ => atomic}/atomics.json | 6 +++--- .../_data/{ => atomic}/backgrounds.json | 0 .../stacks-docs/_data/{ => atomic}/bling.json | 0 .../_data/{ => atomic}/borders.json | 0 .../stacks-docs/_data/{ => atomic}/flex.json | 0 .../stacks-docs/_data/{ => atomic}/gap.json | 0 .../stacks-docs/_data/{ => atomic}/grid.json | 0 .../_data/{ => atomic}/margin.json | 0 .../_data/{ => atomic}/padding.json | 0 .../_data/{ => atomic}/position.json | 0 .../_data/{ => atomic}/typography.json | 0 packages/stacks-docs/_data/colors.json | 2 +- .../{ => components}/activity-indicator.json | 0 .../{ => components}/avatars-component.json | 0 .../_data/{ => components}/badges.json | 0 .../_data/{ => components}/banners.json | 0 .../_data/{ => components}/breadcrumbs.json | 0 .../_data/{ => components}/button-groups.json | 0 .../_data/{ => components}/buttons.json | 0 .../{ => components}/checkbox_radio.json | 0 .../_data/{ => components}/inputs.json | 0 .../_data/{ => components}/link-previews.json | 0 .../_data/{ => components}/links.json | 0 .../_data/{ => components}/loader.json | 0 .../_data/{ => components}/menu.json | 0 .../_data/{ => components}/modals.json | 0 .../_data/{ => components}/navigation.json | 0 .../_data/{ => components}/notices.json | 0 .../pagination-component.json | 0 .../_data/{ => components}/popovers.json | 0 .../_data/{ => components}/post-summary.json | 0 .../_data/{ => components}/tables.json | 0 .../{ => components}/tags-component.json | 0 .../_data/{ => components}/topbar.json | 0 .../{ => components}/uploader-component.json | 0 .../_data/{ => components}/user-card.json | 0 .../_data/{ => components}/vote.json | 0 38 files changed, 25 insertions(+), 4 deletions(-) rename packages/stacks-docs/_data/{ => atomic}/atomics.json (99%) rename packages/stacks-docs/_data/{ => atomic}/backgrounds.json (100%) rename packages/stacks-docs/_data/{ => atomic}/bling.json (100%) rename packages/stacks-docs/_data/{ => atomic}/borders.json (100%) rename packages/stacks-docs/_data/{ => atomic}/flex.json (100%) rename packages/stacks-docs/_data/{ => atomic}/gap.json (100%) rename packages/stacks-docs/_data/{ => atomic}/grid.json (100%) rename packages/stacks-docs/_data/{ => atomic}/margin.json (100%) rename packages/stacks-docs/_data/{ => atomic}/padding.json (100%) rename packages/stacks-docs/_data/{ => atomic}/position.json (100%) rename packages/stacks-docs/_data/{ => atomic}/typography.json (100%) rename packages/stacks-docs/_data/{ => components}/activity-indicator.json (100%) rename packages/stacks-docs/_data/{ => components}/avatars-component.json (100%) rename packages/stacks-docs/_data/{ => components}/badges.json (100%) rename packages/stacks-docs/_data/{ => components}/banners.json (100%) rename packages/stacks-docs/_data/{ => components}/breadcrumbs.json (100%) rename packages/stacks-docs/_data/{ => components}/button-groups.json (100%) rename packages/stacks-docs/_data/{ => components}/buttons.json (100%) rename packages/stacks-docs/_data/{ => components}/checkbox_radio.json (100%) rename packages/stacks-docs/_data/{ => components}/inputs.json (100%) rename packages/stacks-docs/_data/{ => components}/link-previews.json (100%) rename packages/stacks-docs/_data/{ => components}/links.json (100%) rename packages/stacks-docs/_data/{ => components}/loader.json (100%) rename packages/stacks-docs/_data/{ => components}/menu.json (100%) rename packages/stacks-docs/_data/{ => components}/modals.json (100%) rename packages/stacks-docs/_data/{ => components}/navigation.json (100%) rename packages/stacks-docs/_data/{ => components}/notices.json (100%) rename packages/stacks-docs/_data/{ => components}/pagination-component.json (100%) rename packages/stacks-docs/_data/{ => components}/popovers.json (100%) rename packages/stacks-docs/_data/{ => components}/post-summary.json (100%) rename packages/stacks-docs/_data/{ => components}/tables.json (100%) rename packages/stacks-docs/_data/{ => components}/tags-component.json (100%) rename packages/stacks-docs/_data/{ => components}/topbar.json (100%) rename packages/stacks-docs/_data/{ => components}/uploader-component.json (100%) rename packages/stacks-docs/_data/{ => components}/user-card.json (100%) rename packages/stacks-docs/_data/{ => components}/vote.json (100%) diff --git a/packages/stacks-docs/.eleventy.js b/packages/stacks-docs/.eleventy.js index a33d3f593b..16ad2d080b 100644 --- a/packages/stacks-docs/.eleventy.js +++ b/packages/stacks-docs/.eleventy.js @@ -1,3 +1,5 @@ +const fs = require('fs'); +const path = require('path'); const cheerio = require('cheerio'); const llmsTxtPlugin = require("eleventy-plugin-llms-txt"); const { version } = require("../stacks-classic/package.json"); @@ -9,11 +11,30 @@ const bannerExamplePlugin = require("./plugins/banner-example"); const tipPlugin = require("./plugins/tip"); const markdownPlugin = require("./plugins/markdown"); +const dataDir = path.join(__dirname, '_data'); + +// Re-expose JSON from _data/atomic/ and _data/components/ as top-level keys so +// templates keep using the same names (e.g. atomics, padding, buttons). +function registerSubfolderData(eleventyConfig, subdir) { + const dir = path.join(dataDir, subdir); + if (!fs.existsSync(dir)) return; + fs.readdirSync(dir) + .filter((f) => f.endsWith('.json')) + .forEach((file) => { + const key = path.basename(file, '.json'); + const filePath = path.join(dir, file); + eleventyConfig.addGlobalData(key, () => require(filePath)); + }); +} + module.exports = function(eleventyConfig) { eleventyConfig.setQuietMode(true); // Reduce the console output eleventyConfig.addLayoutAlias('home', 'layouts/home.html'); eleventyConfig.addLayoutAlias('page', 'layouts/page.html'); + registerSubfolderData(eleventyConfig, 'atomic'); + registerSubfolderData(eleventyConfig, 'components'); + eleventyConfig.addPlugin(bannerExamplePlugin); eleventyConfig.addPlugin(iconPlugin); eleventyConfig.addPlugin(headerPlugin); diff --git a/packages/stacks-docs/_data/atomics.json b/packages/stacks-docs/_data/atomic/atomics.json similarity index 99% rename from packages/stacks-docs/_data/atomics.json rename to packages/stacks-docs/_data/atomic/atomics.json index 95a24dd9a4..a8e0774c46 100644 --- a/packages/stacks-docs/_data/atomics.json +++ b/packages/stacks-docs/_data/atomic/atomics.json @@ -26,7 +26,7 @@ }, { "class": "bs-ring", - "output": "box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);", + "output": "box-shadow: 0 0 0 var(--su4) var(--focus-ring);", "hover": true, "focus": true } @@ -608,8 +608,8 @@ }, { "class": "outline-ring", - "output": "outline: solid var(--su-static4) var(--translucent-secondary);", - "define": "

Adds an outline using our translucent secondary color.

", + "output": "Standard Stacks focus style", + "define": "

Standard Stacks focus style.

", "focus": true } ], diff --git a/packages/stacks-docs/_data/backgrounds.json b/packages/stacks-docs/_data/atomic/backgrounds.json similarity index 100% rename from packages/stacks-docs/_data/backgrounds.json rename to packages/stacks-docs/_data/atomic/backgrounds.json diff --git a/packages/stacks-docs/_data/bling.json b/packages/stacks-docs/_data/atomic/bling.json similarity index 100% rename from packages/stacks-docs/_data/bling.json rename to packages/stacks-docs/_data/atomic/bling.json diff --git a/packages/stacks-docs/_data/borders.json b/packages/stacks-docs/_data/atomic/borders.json similarity index 100% rename from packages/stacks-docs/_data/borders.json rename to packages/stacks-docs/_data/atomic/borders.json diff --git a/packages/stacks-docs/_data/flex.json b/packages/stacks-docs/_data/atomic/flex.json similarity index 100% rename from packages/stacks-docs/_data/flex.json rename to packages/stacks-docs/_data/atomic/flex.json diff --git a/packages/stacks-docs/_data/gap.json b/packages/stacks-docs/_data/atomic/gap.json similarity index 100% rename from packages/stacks-docs/_data/gap.json rename to packages/stacks-docs/_data/atomic/gap.json diff --git a/packages/stacks-docs/_data/grid.json b/packages/stacks-docs/_data/atomic/grid.json similarity index 100% rename from packages/stacks-docs/_data/grid.json rename to packages/stacks-docs/_data/atomic/grid.json diff --git a/packages/stacks-docs/_data/margin.json b/packages/stacks-docs/_data/atomic/margin.json similarity index 100% rename from packages/stacks-docs/_data/margin.json rename to packages/stacks-docs/_data/atomic/margin.json diff --git a/packages/stacks-docs/_data/padding.json b/packages/stacks-docs/_data/atomic/padding.json similarity index 100% rename from packages/stacks-docs/_data/padding.json rename to packages/stacks-docs/_data/atomic/padding.json diff --git a/packages/stacks-docs/_data/position.json b/packages/stacks-docs/_data/atomic/position.json similarity index 100% rename from packages/stacks-docs/_data/position.json rename to packages/stacks-docs/_data/atomic/position.json diff --git a/packages/stacks-docs/_data/typography.json b/packages/stacks-docs/_data/atomic/typography.json similarity index 100% rename from packages/stacks-docs/_data/typography.json rename to packages/stacks-docs/_data/atomic/typography.json diff --git a/packages/stacks-docs/_data/colors.json b/packages/stacks-docs/_data/colors.json index 5c282bb469..21ec3b8943 100644 --- a/packages/stacks-docs/_data/colors.json +++ b/packages/stacks-docs/_data/colors.json @@ -227,7 +227,7 @@ "accessibility": [ { "heading": "Contrast", - "copy": "Contrast is the difference in luminance or color between any two elements. All visual readers require ample luminance contrast for fluent readability. Based on APCA bronze standards, all text must have a Lightness contrast (Lc) value of 60, body copy must have a Lc value of 75, icons must have a Lc value of 45, and placeholder and disabled text must have a Lc of 30. These numbers will be negative when calculating for dark mode.", + "copy": "Contrast is the difference in luminance or color between any two elements. All visual readers require ample luminance contrast for fluent readability. Based on APCA bronze standards, all text must have a Lightness contrast (Lc) value of 60, icons must have a Lc value of 45, and placeholder and disabled text must have a Lc of 30. These numbers will be negative when calculating for dark mode.", "groups": [ { "correct": true, diff --git a/packages/stacks-docs/_data/activity-indicator.json b/packages/stacks-docs/_data/components/activity-indicator.json similarity index 100% rename from packages/stacks-docs/_data/activity-indicator.json rename to packages/stacks-docs/_data/components/activity-indicator.json diff --git a/packages/stacks-docs/_data/avatars-component.json b/packages/stacks-docs/_data/components/avatars-component.json similarity index 100% rename from packages/stacks-docs/_data/avatars-component.json rename to packages/stacks-docs/_data/components/avatars-component.json diff --git a/packages/stacks-docs/_data/badges.json b/packages/stacks-docs/_data/components/badges.json similarity index 100% rename from packages/stacks-docs/_data/badges.json rename to packages/stacks-docs/_data/components/badges.json diff --git a/packages/stacks-docs/_data/banners.json b/packages/stacks-docs/_data/components/banners.json similarity index 100% rename from packages/stacks-docs/_data/banners.json rename to packages/stacks-docs/_data/components/banners.json diff --git a/packages/stacks-docs/_data/breadcrumbs.json b/packages/stacks-docs/_data/components/breadcrumbs.json similarity index 100% rename from packages/stacks-docs/_data/breadcrumbs.json rename to packages/stacks-docs/_data/components/breadcrumbs.json diff --git a/packages/stacks-docs/_data/button-groups.json b/packages/stacks-docs/_data/components/button-groups.json similarity index 100% rename from packages/stacks-docs/_data/button-groups.json rename to packages/stacks-docs/_data/components/button-groups.json diff --git a/packages/stacks-docs/_data/buttons.json b/packages/stacks-docs/_data/components/buttons.json similarity index 100% rename from packages/stacks-docs/_data/buttons.json rename to packages/stacks-docs/_data/components/buttons.json diff --git a/packages/stacks-docs/_data/checkbox_radio.json b/packages/stacks-docs/_data/components/checkbox_radio.json similarity index 100% rename from packages/stacks-docs/_data/checkbox_radio.json rename to packages/stacks-docs/_data/components/checkbox_radio.json diff --git a/packages/stacks-docs/_data/inputs.json b/packages/stacks-docs/_data/components/inputs.json similarity index 100% rename from packages/stacks-docs/_data/inputs.json rename to packages/stacks-docs/_data/components/inputs.json diff --git a/packages/stacks-docs/_data/link-previews.json b/packages/stacks-docs/_data/components/link-previews.json similarity index 100% rename from packages/stacks-docs/_data/link-previews.json rename to packages/stacks-docs/_data/components/link-previews.json diff --git a/packages/stacks-docs/_data/links.json b/packages/stacks-docs/_data/components/links.json similarity index 100% rename from packages/stacks-docs/_data/links.json rename to packages/stacks-docs/_data/components/links.json diff --git a/packages/stacks-docs/_data/loader.json b/packages/stacks-docs/_data/components/loader.json similarity index 100% rename from packages/stacks-docs/_data/loader.json rename to packages/stacks-docs/_data/components/loader.json diff --git a/packages/stacks-docs/_data/menu.json b/packages/stacks-docs/_data/components/menu.json similarity index 100% rename from packages/stacks-docs/_data/menu.json rename to packages/stacks-docs/_data/components/menu.json diff --git a/packages/stacks-docs/_data/modals.json b/packages/stacks-docs/_data/components/modals.json similarity index 100% rename from packages/stacks-docs/_data/modals.json rename to packages/stacks-docs/_data/components/modals.json diff --git a/packages/stacks-docs/_data/navigation.json b/packages/stacks-docs/_data/components/navigation.json similarity index 100% rename from packages/stacks-docs/_data/navigation.json rename to packages/stacks-docs/_data/components/navigation.json diff --git a/packages/stacks-docs/_data/notices.json b/packages/stacks-docs/_data/components/notices.json similarity index 100% rename from packages/stacks-docs/_data/notices.json rename to packages/stacks-docs/_data/components/notices.json diff --git a/packages/stacks-docs/_data/pagination-component.json b/packages/stacks-docs/_data/components/pagination-component.json similarity index 100% rename from packages/stacks-docs/_data/pagination-component.json rename to packages/stacks-docs/_data/components/pagination-component.json diff --git a/packages/stacks-docs/_data/popovers.json b/packages/stacks-docs/_data/components/popovers.json similarity index 100% rename from packages/stacks-docs/_data/popovers.json rename to packages/stacks-docs/_data/components/popovers.json diff --git a/packages/stacks-docs/_data/post-summary.json b/packages/stacks-docs/_data/components/post-summary.json similarity index 100% rename from packages/stacks-docs/_data/post-summary.json rename to packages/stacks-docs/_data/components/post-summary.json diff --git a/packages/stacks-docs/_data/tables.json b/packages/stacks-docs/_data/components/tables.json similarity index 100% rename from packages/stacks-docs/_data/tables.json rename to packages/stacks-docs/_data/components/tables.json diff --git a/packages/stacks-docs/_data/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json similarity index 100% rename from packages/stacks-docs/_data/tags-component.json rename to packages/stacks-docs/_data/components/tags-component.json diff --git a/packages/stacks-docs/_data/topbar.json b/packages/stacks-docs/_data/components/topbar.json similarity index 100% rename from packages/stacks-docs/_data/topbar.json rename to packages/stacks-docs/_data/components/topbar.json diff --git a/packages/stacks-docs/_data/uploader-component.json b/packages/stacks-docs/_data/components/uploader-component.json similarity index 100% rename from packages/stacks-docs/_data/uploader-component.json rename to packages/stacks-docs/_data/components/uploader-component.json diff --git a/packages/stacks-docs/_data/user-card.json b/packages/stacks-docs/_data/components/user-card.json similarity index 100% rename from packages/stacks-docs/_data/user-card.json rename to packages/stacks-docs/_data/components/user-card.json diff --git a/packages/stacks-docs/_data/vote.json b/packages/stacks-docs/_data/components/vote.json similarity index 100% rename from packages/stacks-docs/_data/vote.json rename to packages/stacks-docs/_data/components/vote.json From 350631944425969b81d152c762b58455debe7732 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 18:14:28 -0500 Subject: [PATCH 04/15] Minor outline docs update/cleanup --- packages/stacks-docs/product/base/outline.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/stacks-docs/product/base/outline.html b/packages/stacks-docs/product/base/outline.html index 3e64001774..ba0a12f834 100644 --- a/packages/stacks-docs/product/base/outline.html +++ b/packages/stacks-docs/product/base/outline.html @@ -6,7 +6,7 @@ ---
{% tip, "warning" %} - Warning: .outline-ring does not meet our accessibility standards for focus state styling and should be used for decorative purposes only. + Warning: Atomic outline classes mimic or remove default Stacks focus styles. They should only be applied when absolutely necessary. {% endtip %} {% header "h2", "Classes" %} @@ -38,8 +38,9 @@
…
{% endhighlight %}
-
.outline-none
-
.outline-ring
+ {% for atomic in atomics.outline %} +
.{{ atomic.class }}
+ {% endfor %}
From f55995cc74583a1adc444d1b93d828c0b86c577e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 18:19:52 -0500 Subject: [PATCH 05/15] Move box-shadow docs data to standalone json file --- .../stacks-docs/_data/atomic/atomics.json | 32 ----------------- .../stacks-docs/_data/atomic/box-shadow.json | 34 +++++++++++++++++++ .../stacks-docs/product/base/box-shadow.html | 4 +-- 3 files changed, 36 insertions(+), 34 deletions(-) create mode 100644 packages/stacks-docs/_data/atomic/box-shadow.json diff --git a/packages/stacks-docs/_data/atomic/atomics.json b/packages/stacks-docs/_data/atomic/atomics.json index a8e0774c46..b162856baa 100644 --- a/packages/stacks-docs/_data/atomic/atomics.json +++ b/packages/stacks-docs/_data/atomic/atomics.json @@ -1,36 +1,4 @@ { - "box-shadow": [ - { - "class": "bs-none", - "output": "box-shadow: none;", - "responsive": true - }, - { - "class": "bs-sm", - "output": "box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05)", - "hover": true - }, - { - "class": "bs-md", - "output": "box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.06),
0 2px 6px hsla(0, 0%, 0%, 0.06),
0 3px 8px hsla(0, 0%, 0%, 0.09)", - "hover": true - }, - { - "class": "bs-lg", - "output": "box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09),
0 3px 8px hsla(0, 0%, 0%, 0.09),
0 4px 13px hsla(0, 0%, 0%, 0.13)", - "hover": true - }, - { - "class": "bs-xl", - "output": "box-shadow: 0 10px 24px hsla(0, 0%, 0%, 0.05),
0 20px 48px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.1)" - }, - { - "class": "bs-ring", - "output": "box-shadow: 0 0 0 var(--su4) var(--focus-ring);", - "hover": true, - "focus": true - } - ], "box-sizing": [ { "class": "box-content", diff --git a/packages/stacks-docs/_data/atomic/box-shadow.json b/packages/stacks-docs/_data/atomic/box-shadow.json new file mode 100644 index 0000000000..ffe4585f09 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/box-shadow.json @@ -0,0 +1,34 @@ +{ + "classes": [ + { + "class": "bs-none", + "output": "box-shadow: none;", + "responsive": true + }, + { + "class": "bs-sm", + "output": "box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.05),
0 2px 8px hsla(0, 0%, 0%, 0.05)", + "hover": true + }, + { + "class": "bs-md", + "output": "box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.06),
0 2px 6px hsla(0, 0%, 0%, 0.06),
0 3px 8px hsla(0, 0%, 0%, 0.09)", + "hover": true + }, + { + "class": "bs-lg", + "output": "box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.09),
0 3px 8px hsla(0, 0%, 0%, 0.09),
0 4px 13px hsla(0, 0%, 0%, 0.13)", + "hover": true + }, + { + "class": "bs-xl", + "output": "box-shadow: 0 10px 24px hsla(0, 0%, 0%, 0.05),
0 20px 48px hsla(0, 0%, 0%, 0.05),
0 1px 4px hsla(0, 0%, 0%, 0.1)" + }, + { + "class": "bs-ring", + "output": "box-shadow: 0 0 0 var(--su4) var(--focus-ring);", + "hover": true, + "focus": true + } + ] +} diff --git a/packages/stacks-docs/product/base/box-shadow.html b/packages/stacks-docs/product/base/box-shadow.html index eafcc95e79..146ec860f5 100644 --- a/packages/stacks-docs/product/base/box-shadow.html +++ b/packages/stacks-docs/product/base/box-shadow.html @@ -19,7 +19,7 @@ - {% for atomic in atomics.box-shadow %} + {% for atomic in box-shadow.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -55,7 +55,7 @@ {% endhighlight %}
- {% for atomic in atomics.box-shadow %} + {% for atomic in box-shadow.classes %} {% if atomic.class != "bs-none" %}
.{{ atomic.class }} From b804de6e202fd60c706e40c580d559d95dc12190 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 18:43:27 -0500 Subject: [PATCH 06/15] Split atomic classes from atomic.json to independent files --- .../stacks-docs/_data/atomic/atomics.json | 855 ------------------ .../stacks-docs/_data/atomic/box-sizing.json | 22 + .../_data/atomic/current-color.json | 14 + .../stacks-docs/_data/atomic/cursors.json | 44 + .../stacks-docs/_data/atomic/display.json | 72 ++ packages/stacks-docs/_data/atomic/float.json | 52 ++ .../_data/atomic/interactivity.json | 56 ++ packages/stacks-docs/_data/atomic/lists.json | 32 + .../stacks-docs/_data/atomic/object-fit.json | 34 + .../stacks-docs/_data/atomic/opacity.json | 70 ++ .../stacks-docs/_data/atomic/outline.json | 16 + .../stacks-docs/_data/atomic/overflow.json | 64 ++ .../stacks-docs/_data/atomic/position.json | 32 + packages/stacks-docs/_data/atomic/sizing.json | 171 ++++ .../stacks-docs/_data/atomic/transitions.json | 58 ++ .../_data/atomic/vertical-alignment.json | 49 + .../stacks-docs/_data/atomic/visibility.json | 19 + .../stacks-docs/_data/atomic/z-index.json | 64 ++ .../stacks-docs/_data/site-navigation.json | 8 +- .../stacks-docs/product/base/box-sizing.html | 8 +- .../product/base/current-color.html | 2 +- .../stacks-docs/product/base/cursors.html | 4 +- .../stacks-docs/product/base/display.html | 2 +- packages/stacks-docs/product/base/floats.html | 8 +- packages/stacks-docs/product/base/height.html | 12 +- .../product/base/interactivity.html | 10 +- packages/stacks-docs/product/base/lists.html | 2 +- .../stacks-docs/product/base/object-fit.html | 4 +- .../stacks-docs/product/base/opacity.html | 4 +- .../stacks-docs/product/base/outline.html | 4 +- .../stacks-docs/product/base/overflow.html | 4 +- .../stacks-docs/product/base/position.html | 2 +- .../stacks-docs/product/base/transitions.html | 2 +- .../product/base/vertical-alignment.html | 4 +- .../stacks-docs/product/base/visibility.html | 2 +- packages/stacks-docs/product/base/width.html | 16 +- .../stacks-docs/product/base/z-index.html | 4 +- 37 files changed, 920 insertions(+), 906 deletions(-) delete mode 100644 packages/stacks-docs/_data/atomic/atomics.json create mode 100644 packages/stacks-docs/_data/atomic/box-sizing.json create mode 100644 packages/stacks-docs/_data/atomic/current-color.json create mode 100644 packages/stacks-docs/_data/atomic/cursors.json create mode 100644 packages/stacks-docs/_data/atomic/display.json create mode 100644 packages/stacks-docs/_data/atomic/float.json create mode 100644 packages/stacks-docs/_data/atomic/interactivity.json create mode 100644 packages/stacks-docs/_data/atomic/lists.json create mode 100644 packages/stacks-docs/_data/atomic/object-fit.json create mode 100644 packages/stacks-docs/_data/atomic/opacity.json create mode 100644 packages/stacks-docs/_data/atomic/outline.json create mode 100644 packages/stacks-docs/_data/atomic/overflow.json create mode 100644 packages/stacks-docs/_data/atomic/sizing.json create mode 100644 packages/stacks-docs/_data/atomic/transitions.json create mode 100644 packages/stacks-docs/_data/atomic/vertical-alignment.json create mode 100644 packages/stacks-docs/_data/atomic/visibility.json create mode 100644 packages/stacks-docs/_data/atomic/z-index.json diff --git a/packages/stacks-docs/_data/atomic/atomics.json b/packages/stacks-docs/_data/atomic/atomics.json deleted file mode 100644 index b162856baa..0000000000 --- a/packages/stacks-docs/_data/atomic/atomics.json +++ /dev/null @@ -1,855 +0,0 @@ -{ - "box-sizing": [ - { - "class": "box-content", - "output": "box-sizing: content-box;", - "define": "

Indicates that the element's width and height affects only the element's content box, that is the area minus the element's margin, padding, and borders. This is the default browser value.

", - "responsive": false - }, - { - "class": "box-border", - "output": "box-sizing: border-box;", - "define": "

Indicates that the element's width and height affects the entire element. This is the preferred default value for Stacks.", - "responsive": false - }, - { - "class": "box-unset", - "output": "box-sizing: unset;", - "define": "

Removes the previously set box-sizing value, reverting it back to the initial browser value.

", - "responsive": false - } - ], - "cursors": [ - { - "class": "c-auto", - "output": "cursor: auto;", - "responsive": false - }, - { - "class": "c-default", - "output": "cursor: default;", - "responsive": false - }, - { - "class": "c-pointer", - "output": "cursor: pointer;", - "responsive": false - }, - { - "class": "c-text", - "output": "cursor: text;", - "responsive": false - }, - { - "class": "c-wait", - "output": "cursor: wait;", - "responsive": false - }, - { - "class": "c-move", - "output": "cursor: move;", - "responsive": false - }, - { - "class": "c-not-allowed", - "output": "cursor: not-allowed;", - "responsive": false - }, - { - "class": "c-help", - "output": "cursor: help;", - "responsive": false - } - ], - "visibility": [ - { - "class": "v-visible", - "definition": "The element visible", - "responsive": false - }, - { - "class": "v-visible-sr", - "definition": "The element is visible only to screen readers", - "responsive": false - }, - { - "class": "v-hidden", - "definition": "The element is invisible, but still affects layout as normal", - "responsive": false - } - ], - "pointer-events": [ - { - "class": "pe-auto", - "output": "pointer-events: auto;", - "define": "

The element behaves as it would if the pointer-events property were not specified.

", - "responsive": false - }, - { - "class": "pe-none", - "output": "pointer-events: none;", - "define": "

Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.

", - "responsive": false - } - ], - "user-select": [ - { - "class": "us-auto", - "output": "user-select: auto;", - "define": "

The element behaves as it would if the user-select property were not specified.

", - "responsive": false - }, - { - "class": "us-none", - "output": "user-select: none;", - "define": "

The text of the element and its sub-elements is not selectable. It may be appropriate to combine with .c-default

", - "responsive": false - } - ], - "user-drag": [ - { - "class": "ud-auto", - "output": "user-drag: auto;", - "define": "

The element behaves as it would if the user-drag property were not specified.

", - "responsive": false - }, - { - "class": "ud-none", - "output": "user-drag: none;", - "define": "

The element and its sub-elements are not draggable. When applied to an image, the ghosted image will not appear in a loaded mouse cursor.

", - "responsive": false - } - ], - "focus": [ - { - "class": "focus", - "output": "", - "define": "

The element will have the default Stacks focus style applied.

", - "responsive": false - }, - { - "class": "focus-inset", - "output": "", - "define": "

The element will have the inset Stacks focus style applied.

", - "responsive": false - }, - { - "class": "focus-bordered", - "output": "", - "define": "

The element will have the default Stacks focus style applied and match the border to the focus style.

", - "responsive": false - }, - { - "class": "focus-inset-bordered", - "output": "", - "define": "

The element will have the inset Stacks focus style applied and match the border to the focus style.

", - "responsive": false - } - ], - "display": [ - { - "class": "d-block", - "output": "display: block;", - "define": "

This turns any element into a block-level element.

", - "responsive": true, - "print": true - }, - { - "class": "d-inline", - "output": "display: inline;", - "define": "

Turns any element into an inline element that flows like text.

", - "responsive": true - }, - { - "class": "d-inline-block", - "output": "display: inline-block;", - "define": "

Turns any element into a block-level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

", - "responsive": true - }, - { - "class": "d-flex", - "output": "display: flex;", - "define": "

Lays out its content according to the flexbox model.

", - "responsive": true - }, - { - "class": "d-inline-flex", - "output": "display: inline-flex;", - "define": "

This makes the element behave like an inline element and lays out its content according to the flexbox model.

", - "responsive": true - }, - { - "class": "d-grid", - "output": "display: grid;", - "define": "

This lays out an element and its contents using grid layout.

", - "responsive": true - }, - { - "class": "d-inline-grid", - "output": "display: inline-grid;", - "define": "

This makes the element behave like an inline element and lays out its content according to the grid model.

", - "responsive": true - }, - { - "class": "d-table", - "output": "display: table;", - "define": "

This makes your element behave like table HTML elements. It defines a block-level box.

", - "responsive": false - }, - { - "class": "d-table-cell", - "output": "display: table-cell;", - "define": "

These elements behave like td HTML elements.

", - "responsive": false - }, - { - "class": "d-none", - "output": "display: none;", - "define": "

Effectively removes the element from the DOM. Useful for showing / hiding elements.

To hide things when the page is printed, apply .print:d-none

", - "responsive": true, - "print": true - }, - { - "class": "d-unset", - "output": "display: unset;", - "define": "

Removes any display property from the element.

", - "responsive": false - } - ], - "floats": [ - { - "class": "float-left", - "output": "float: left;", - "define": "

Indicates that the element must float on the left side of the parent container.

", - "responsive": false - }, - { - "class": "float-right", - "output": "float: right;", - "define": "

Indicates that the element must float on the right side of the parent container.

", - "responsive": false - }, - { - "class": "float-none", - "output": "float: none;", - "define": "

Indicates that the element must not float.

", - "responsive": false - }, - { - "class": "clearfix", - "output": ".clearfix();", - "define": "

This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.

", - "responsive": false - }, - { - "class": "clear-left", - "output": "clear: left;", - "define": "

Indicates that the element must be moved down to clear past left floats.

", - "responsive": false - }, - { - "class": "clear-right", - "output": "clear: right;", - "define": "

Indicates that the element must be moved down to clear past right floats.

", - "responsive": false - }, - { - "class": "clear-both", - "output": "clear: both;", - "define": "

Indicates that the element must be moved down to clear past left and right floats.

", - "responsive": false - }, - { - "class": "clear-none", - "output": "clear: none;", - "define": "

Indicates that the element is not moved to clear past floating elements.

", - "responsive": false - } - ], - "sizing": { - "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 - } - ] - }, - "opacity": [ - { - "class": "o0", - "output": "opacity: 0;", - "responsive": false, - "hover": true - }, - { - "class": "o5", - "output": "opacity: 0.05;", - "responsive": false, - "hover": true - }, - { - "class": "o10", - "output": "opacity: 0.1;", - "responsive": false - }, - { - "class": "o20", - "output": "opacity: 0.2;", - "responsive": false - }, - { - "class": "o30", - "output": "opacity: 0.3;", - "responsive": false - }, - { - "class": "o40", - "output": "opacity: 0.4;", - "responsive": false - }, - { - "class": "o50", - "output": "opacity: 0.5;", - "responsive": false, - "hover": true - }, - { - "class": "o60", - "output": "opacity: 0.6;", - "responsive": false - }, - { - "class": "o70", - "output": "opacity: 0.7;", - "responsive": false - }, - { - "class": "o80", - "output": "opacity: 0.8;", - "responsive": false, - "hover": true - }, - { - "class": "o90", - "output": "opacity: 0.9;", - "responsive": false - }, - { - "class": "o100", - "output": "opacity: 1;", - "responsive": false, - "hover": true, - "focus": true - } - ], - "overflow": [ - { - "class": "overflow-auto", - "output": "overflow: auto;", - "define": "

If content fits inside the content box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", - "responsive": false - }, - { - "class": "overflow-x-auto", - "output": "overflow-x: auto;", - "define": "

If content fits inside the content box, it looks the same as visible in the x dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", - "responsive": false - }, - { - "class": "overflow-y-auto", - "output": "overflow-y: auto;", - "define": "

If content fits inside the content box, it looks the same as visible in the y dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", - "responsive": false - }, - { - "class": "overflow-hidden", - "output": "overflow: hidden;", - "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided.

", - "responsive": false - }, - { - "class": "overflow-x-hidden", - "output": "overflow-x: hidden;", - "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided in the x dimension.

", - "responsive": false - }, - { - "class": "overflow-y-hidden", - "output": "overflow-y: hidden;", - "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided in the y dimension.

", - "responsive": false - }, - { - "class": "overflow-scroll", - "output": "overflow: scroll;", - "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

", - "responsive": false - }, - { - "class": "overflow-x-scroll", - "output": "overflow-x: scroll;", - "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the x dimension.

", - "responsive": false - }, - { - "class": "overflow-y-scroll", - "output": "overflow-y: scroll;", - "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the y dimension.

", - "responsive": false - }, - { - "class": "overflow-visible", - "output": "overflow: visible;", - "define": "

Content is not clipped and may be rendered outside the content box. This is the default value.

", - "responsive": false - } - ], - "outline": [ - { - "class": "outline-none", - "output": "outline: 0;", - "define": "

Removes the browser’s default focus style. To maintain accessibility, care should be taken to replace the style that’s been removed.

", - "focus": false - }, - { - "class": "outline-ring", - "output": "Standard Stacks focus style", - "define": "

Standard Stacks focus style.

", - "focus": true - } - ], - "position": [ - { - "class": "ps-absolute", - "output": "position: absolute;", - "define": "

Absolutely positions an element. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don’t have a z-index assigned.

", - "responsive": true - }, - { - "class": "ps-fixed", - "output": "position: fixed;", - "define": "

Fixes an element within the viewport. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Fixing an element’s position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.

", - "responsive": true - }, - { - "class": "ps-relative", - "output": "position: relative;", - "define": "

Relatively positions an element in relation to elements around it. The top and bottom properties specify the vertical offset from its normal position. In the same way the left and right properties specify the horizontal offset.

", - "responsive": true - }, - { - "class": "ps-static", - "output": "position: static;", - "define": "

An element is positioned according to the document’s flow. The top, right, bottom, left, and z-index properties have no effect.

This is the default value.

", - "responsive": true - }, - { - "class": "ps-sticky", - "output": "position: sticky;", - "define": "

An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.

Notes:
Sticky elements, by design, will not work inside an element with overflow:hidden; or overflow:auto; values.

", - "responsive": true - } - ], - "vertical-alignment": [ - { - "class": "va-baseline", - "output": "vertical-align: baseline;", - "responsive": false - }, - { - "class": "va-bottom", - "output": "vertical-align: bottom;", - "responsive": false - }, - { - "class": "va-middle", - "output": "vertical-align: middle;", - "responsive": false - }, - { - "class": "va-sub", - "output": "vertical-align: sub;", - "responsive": false - }, - { - "class": "va-super", - "output": "vertical-align: super;", - "responsive": false - }, - { - "class": "va-text-bottom", - "output": "vertical-align: text-bottom;", - "responsive": false - }, - { - "class": "va-text-top", - "output": "vertical-align: text-top;", - "responsive": false - }, - { - "class": "va-top", - "output": "vertical-align: top;", - "responsive": false - }, - { - "class": "va-unset", - "output": "vertical-align: unset;", - "responsive": false - } - ], - "z-index": [ - { - "class": "z-hide", - "output": "z-index: -1;", - "responsive": false - }, - { - "class": "z-base", - "output": "z-index: 0;", - "responsive": false - }, - { - "class": "z-selected", - "output": "z-index: 25;", - "responsive": false - }, - { - "class": "z-active", - "output": "z-index: 50;", - "responsive": false - }, - { - "class": "z-dropdown", - "output": "z-index: 1000;", - "responsive": false - }, - { - "class": "z-popover", - "output": "z-index: 2000;", - "responsive": false - }, - { - "class": "z-tooltip", - "output": "z-index: 3000;", - "responsive": false - }, - { - "class": "z-banner", - "output": "z-index: 4000;", - "responsive": false - }, - { - "class": "z-nav", - "output": "z-index: 5000;", - "responsive": false - }, - { - "class": "z-nav-fixed", - "output": "z-index: 5050;", - "responsive": false - }, - { - "class": "z-modal-bg", - "output": "z-index: 8050;", - "responsive": false - }, - { - "class": "z-modal", - "output": "z-index: 9000;", - "responsive": false - } - ], - "current-color": [ - { - "class": "fill-current", - "output": "fill: currentColor;", - "responsive": false - }, - { - "class": "stroke-current", - "output": "stroke: currentColor;", - "responsive": false - } - ], - "lists": [ - { - "class": "list-reset", - "output": "list-style: none; margin: 0; padding: 0;" - }, - { - "class": "list-ls-none", - "output": "list-style: none;" - }, - { - "class": "list-ls-disc", - "output": "list-style-type: disc;" - }, - { - "class": "list-ls-decimal", - "output": "list-style-type: decimal;" - }, - { - "class": "list-ls-unset", - "output": "list-style-type: inherit;" - }, - { - "class": "list-inside", - "output": "list-style-position: inside;" - }, - { - "class": "list-outside", - "output": "list-style-position: outside;" - } - ], - "transitions": [ - { - "class": "t", - "output": "transition-duration: .1s; transition-property: all; transition-timing-function: ease-in; transition-delay: 0s;", - "define": "

Apply a default transition style to an element.

", - "responsive": false - }, - { - "class": "t-slow", - "output": "transition-duration: .25s;", - "define": "

Slow down the default transition to 0.25s.

", - "responsive": false - }, - { - "class": "t-fast", - "output": "transition-duration: .05s;", - "define": "

Speed up the default transition to 0.05s.

", - "responsive": false - }, - { - "class": "t-unset", - "output": "transition-property: none;", - "define": "

Remove transition properties from an element.

", - "responsive": false - }, - { - "class": "t-bg", - "output": "transition-property: background-color;", - "define": "

Transition the background property of an element.

", - "responsive": false - }, - { - "class": "t-opacity", - "output": "transition-property: opacity;", - "define": "

Transition the opacity property of an element.

", - "responsive": false - }, - { - "class": "t-shadow", - "output": "transition-property: box-shadow;", - "define": "

Transition the box shadow property of an element.

", - "responsive": false - }, - { - "class": "t-delay", - "output": "transition-delay: .25s;", - "define": "

Apply a transition delay to an element.

", - "responsive": false - }, - { - "class": "t-delay-unset", - "output": "transition-delay: 0s;", - "define": "

Remove a transition delay from an element.

", - "responsive": false - } - ], - "object-fit": [ - { - "class": "of-contain", - "output": "object-fit: contain", - "define": "

Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box.

" - }, - { - "class": "of-cover", - "output": "object-fit: cover", - "define": "

Cover the entire content box with the content while preserving its aspect ratio. This may crop the content.

" - }, - { - "class": "of-fill", - "output": "object-fit: fill", - "define": "

Stretch and scale the content’s dimensions to match its content box. This is the default browser value.

" - }, - { - "class": "of-none", - "output": "object-fit: none", - "define": "

Prevent the content from being resized.

" - }, - { - "class": "of-scale-down", - "output": "object-fit: scale-down", - "define": "

When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content’s original dimensions.

" - }, - { - "class": "op-center", - "output": "object-position: center", - "define": "

Center the content within its content box.

" - } - ] -} diff --git a/packages/stacks-docs/_data/atomic/box-sizing.json b/packages/stacks-docs/_data/atomic/box-sizing.json new file mode 100644 index 0000000000..7c20aeb1f7 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/box-sizing.json @@ -0,0 +1,22 @@ +{ + "classes": [ + { + "class": "box-content", + "output": "box-sizing: content-box;", + "define": "

Indicates that the element's width and height affects only the element's content box, that is the area minus the element's margin, padding, and borders. This is the default browser value.

", + "responsive": false + }, + { + "class": "box-border", + "output": "box-sizing: border-box;", + "define": "

Indicates that the element's width and height affects the entire element. This is the preferred default value for Stacks.", + "responsive": false + }, + { + "class": "box-unset", + "output": "box-sizing: unset;", + "define": "

Removes the previously set box-sizing value, reverting it back to the initial browser value.

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/current-color.json b/packages/stacks-docs/_data/atomic/current-color.json new file mode 100644 index 0000000000..55eaee84d0 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/current-color.json @@ -0,0 +1,14 @@ +{ + "classes": [ + { + "class": "fill-current", + "output": "fill: currentColor;", + "responsive": false + }, + { + "class": "stroke-current", + "output": "stroke: currentColor;", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/cursors.json b/packages/stacks-docs/_data/atomic/cursors.json new file mode 100644 index 0000000000..2adb63bad6 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/cursors.json @@ -0,0 +1,44 @@ +{ + "classes": [ + { + "class": "c-auto", + "output": "cursor: auto;", + "responsive": false + }, + { + "class": "c-default", + "output": "cursor: default;", + "responsive": false + }, + { + "class": "c-pointer", + "output": "cursor: pointer;", + "responsive": false + }, + { + "class": "c-text", + "output": "cursor: text;", + "responsive": false + }, + { + "class": "c-wait", + "output": "cursor: wait;", + "responsive": false + }, + { + "class": "c-move", + "output": "cursor: move;", + "responsive": false + }, + { + "class": "c-not-allowed", + "output": "cursor: not-allowed;", + "responsive": false + }, + { + "class": "c-help", + "output": "cursor: help;", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/display.json b/packages/stacks-docs/_data/atomic/display.json new file mode 100644 index 0000000000..0b8bb7856c --- /dev/null +++ b/packages/stacks-docs/_data/atomic/display.json @@ -0,0 +1,72 @@ +{ + "classes": [ + { + "class": "d-block", + "output": "display: block;", + "define": "

This turns any element into a block-level element.

", + "responsive": true, + "print": true + }, + { + "class": "d-inline", + "output": "display: inline;", + "define": "

Turns any element into an inline element that flows like text.

", + "responsive": true + }, + { + "class": "d-inline-block", + "output": "display: inline-block;", + "define": "

Turns any element into a block-level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

", + "responsive": true + }, + { + "class": "d-flex", + "output": "display: flex;", + "define": "

Lays out its content according to the flexbox model.

", + "responsive": true + }, + { + "class": "d-inline-flex", + "output": "display: inline-flex;", + "define": "

This makes the element behave like an inline element and lays out its content according to the flexbox model.

", + "responsive": true + }, + { + "class": "d-grid", + "output": "display: grid;", + "define": "

This lays out an element and its contents using grid layout.

", + "responsive": true + }, + { + "class": "d-inline-grid", + "output": "display: inline-grid;", + "define": "

This makes the element behave like an inline element and lays out its content according to the grid model.

", + "responsive": true + }, + { + "class": "d-table", + "output": "display: table;", + "define": "

This makes your element behave like table HTML elements. It defines a block-level box.

", + "responsive": false + }, + { + "class": "d-table-cell", + "output": "display: table-cell;", + "define": "

These elements behave like td HTML elements.

", + "responsive": false + }, + { + "class": "d-none", + "output": "display: none;", + "define": "

Effectively removes the element from the DOM. Useful for showing / hiding elements.

To hide things when the page is printed, apply .print:d-none

", + "responsive": true, + "print": true + }, + { + "class": "d-unset", + "output": "display: unset;", + "define": "

Removes any display property from the element.

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/float.json b/packages/stacks-docs/_data/atomic/float.json new file mode 100644 index 0000000000..c1b80d3881 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/float.json @@ -0,0 +1,52 @@ +{ + "classes": [ + { + "class": "float-left", + "output": "float: left;", + "define": "

Indicates that the element must float on the left side of the parent container.

", + "responsive": false + }, + { + "class": "float-right", + "output": "float: right;", + "define": "

Indicates that the element must float on the right side of the parent container.

", + "responsive": false + }, + { + "class": "float-none", + "output": "float: none;", + "define": "

Indicates that the element must not float.

", + "responsive": false + }, + { + "class": "clearfix", + "output": ".clearfix();", + "define": "

This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.

", + "responsive": false + }, + { + "class": "clear-left", + "output": "clear: left;", + "define": "

Indicates that the element must be moved down to clear past left floats.

", + "responsive": false + }, + { + "class": "clear-right", + "output": "clear: right;", + "define": "

Indicates that the element must be moved down to clear past right floats.

", + "responsive": false + }, + { + "class": "clear-both", + "output": "clear: both;", + "define": "

Indicates that the element must be moved down to clear past left and right floats.

", + "responsive": false + }, + { + "class": "clear-none", + "output": "clear: none;", + "define": "

Indicates that the element is not moved to clear past floating elements.

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/interactivity.json b/packages/stacks-docs/_data/atomic/interactivity.json new file mode 100644 index 0000000000..0b3d2d7317 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/interactivity.json @@ -0,0 +1,56 @@ +{ + "focus": [ + { + "class": "focus", + "output": "", + "define": "

The element will have the default Stacks focus style applied.

", + "responsive": false + }, + { + "class": "focus-inset", + "output": "", + "define": "

The element will have the inset Stacks focus style applied.

", + "responsive": false + }, + { + "class": "focus-bordered", + "output": "", + "define": "

The element will have the default Stacks focus style applied and match the border to the focus style.

", + "responsive": false + }, + { + "class": "focus-inset-bordered", + "output": "", + "define": "

The element will have the inset Stacks focus style applied and match the border to the focus style.

", + "responsive": false + } + ], + "pointer-events": [ + { + "class": "pe-auto", + "output": "pointer-events: auto;", + "define": "

The element behaves as it would if the pointer-events property were not specified.

", + "responsive": false + }, + { + "class": "pe-none", + "output": "pointer-events: none;", + "define": "

Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.

", + "responsive": false + } + ], + "user-select": [ + { + "class": "us-auto", + "output": "user-select: auto;", + "define": "

The element behaves as it would if the user-select property were not specified.

", + "responsive": false + }, + { + "class": "us-none", + "output": "user-select: none;", + "define": "

The text of the element and its sub-elements is not selectable. It may be appropriate to combine with .c-default

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/lists.json b/packages/stacks-docs/_data/atomic/lists.json new file mode 100644 index 0000000000..317cc4e179 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/lists.json @@ -0,0 +1,32 @@ +{ + "classes": [ + { + "class": "list-reset", + "output": "list-style: none; margin: 0; padding: 0;" + }, + { + "class": "list-ls-none", + "output": "list-style: none;" + }, + { + "class": "list-ls-disc", + "output": "list-style-type: disc;" + }, + { + "class": "list-ls-decimal", + "output": "list-style-type: decimal;" + }, + { + "class": "list-ls-unset", + "output": "list-style-type: inherit;" + }, + { + "class": "list-inside", + "output": "list-style-position: inside;" + }, + { + "class": "list-outside", + "output": "list-style-position: outside;" + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/object-fit.json b/packages/stacks-docs/_data/atomic/object-fit.json new file mode 100644 index 0000000000..c02d3ec49c --- /dev/null +++ b/packages/stacks-docs/_data/atomic/object-fit.json @@ -0,0 +1,34 @@ +{ + "classes": [ + { + "class": "of-contain", + "output": "object-fit: contain", + "define": "

Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box.

" + }, + { + "class": "of-cover", + "output": "object-fit: cover", + "define": "

Cover the entire content box with the content while preserving its aspect ratio. This may crop the content.

" + }, + { + "class": "of-fill", + "output": "object-fit: fill", + "define": "

Stretch and scale the content’s dimensions to match its content box. This is the default browser value.

" + }, + { + "class": "of-none", + "output": "object-fit: none", + "define": "

Prevent the content from being resized.

" + }, + { + "class": "of-scale-down", + "output": "object-fit: scale-down", + "define": "

When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content’s original dimensions.

" + }, + { + "class": "op-center", + "output": "object-position: center", + "define": "

Center the content within its content box.

" + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/opacity.json b/packages/stacks-docs/_data/atomic/opacity.json new file mode 100644 index 0000000000..abb1406936 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/opacity.json @@ -0,0 +1,70 @@ +{ + "classes": [ + { + "class": "o0", + "output": "opacity: 0;", + "responsive": false, + "hover": true + }, + { + "class": "o5", + "output": "opacity: 0.05;", + "responsive": false, + "hover": true + }, + { + "class": "o10", + "output": "opacity: 0.1;", + "responsive": false + }, + { + "class": "o20", + "output": "opacity: 0.2;", + "responsive": false + }, + { + "class": "o30", + "output": "opacity: 0.3;", + "responsive": false + }, + { + "class": "o40", + "output": "opacity: 0.4;", + "responsive": false + }, + { + "class": "o50", + "output": "opacity: 0.5;", + "responsive": false, + "hover": true + }, + { + "class": "o60", + "output": "opacity: 0.6;", + "responsive": false + }, + { + "class": "o70", + "output": "opacity: 0.7;", + "responsive": false + }, + { + "class": "o80", + "output": "opacity: 0.8;", + "responsive": false, + "hover": true + }, + { + "class": "o90", + "output": "opacity: 0.9;", + "responsive": false + }, + { + "class": "o100", + "output": "opacity: 1;", + "responsive": false, + "hover": true, + "focus": true + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/outline.json b/packages/stacks-docs/_data/atomic/outline.json new file mode 100644 index 0000000000..9d71a12cfa --- /dev/null +++ b/packages/stacks-docs/_data/atomic/outline.json @@ -0,0 +1,16 @@ +{ + "classes": [ + { + "class": "outline-none", + "output": "outline: 0;", + "define": "

Removes the browser’s default focus style. To maintain accessibility, care should be taken to replace the style that’s been removed.

", + "focus": false + }, + { + "class": "outline-ring", + "output": "Standard Stacks focus style", + "define": "

Standard Stacks focus style.

", + "focus": true + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/overflow.json b/packages/stacks-docs/_data/atomic/overflow.json new file mode 100644 index 0000000000..f396762f8f --- /dev/null +++ b/packages/stacks-docs/_data/atomic/overflow.json @@ -0,0 +1,64 @@ +{ + "classes": [ + { + "class": "overflow-auto", + "output": "overflow: auto;", + "define": "

If content fits inside the content box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", + "responsive": false + }, + { + "class": "overflow-x-auto", + "output": "overflow-x: auto;", + "define": "

If content fits inside the content box, it looks the same as visible in the x dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", + "responsive": false + }, + { + "class": "overflow-y-auto", + "output": "overflow-y: auto;", + "define": "

If content fits inside the content box, it looks the same as visible in the y dimension, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

", + "responsive": false + }, + { + "class": "overflow-hidden", + "output": "overflow: hidden;", + "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided.

", + "responsive": false + }, + { + "class": "overflow-x-hidden", + "output": "overflow-x: hidden;", + "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided in the x dimension.

", + "responsive": false + }, + { + "class": "overflow-y-hidden", + "output": "overflow-y: hidden;", + "define": "

Content is clipped if necessary to fit the content box. No scrollbars are provided in the y dimension.

", + "responsive": false + }, + { + "class": "overflow-scroll", + "output": "overflow: scroll;", + "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

", + "responsive": false + }, + { + "class": "overflow-x-scroll", + "output": "overflow-x: scroll;", + "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the x dimension.

", + "responsive": false + }, + { + "class": "overflow-y-scroll", + "output": "overflow-y: scroll;", + "define": "

Content is clipped if necessary to fit the content box. Browsers display scrollbars whether or not any content is actually clipped in the y dimension.

", + "responsive": false + }, + { + "class": "overflow-visible", + "output": "overflow: visible;", + "define": "

Content is not clipped and may be rendered outside the content box. This is the default value.

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/position.json b/packages/stacks-docs/_data/atomic/position.json index c63c7c9a68..7c89ca8b11 100644 --- a/packages/stacks-docs/_data/atomic/position.json +++ b/packages/stacks-docs/_data/atomic/position.json @@ -1,4 +1,36 @@ { + "classes": [ + { + "class": "ps-absolute", + "output": "position: absolute;", + "define": "

Absolutely positions an element. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don’t have a z-index assigned.

", + "responsive": true + }, + { + "class": "ps-fixed", + "output": "position: fixed;", + "define": "

Fixes an element within the viewport. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Fixing an element’s position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.

", + "responsive": true + }, + { + "class": "ps-relative", + "output": "position: relative;", + "define": "

Relatively positions an element in relation to elements around it. The top and bottom properties specify the vertical offset from its normal position. In the same way the left and right properties specify the horizontal offset.

", + "responsive": true + }, + { + "class": "ps-static", + "output": "position: static;", + "define": "

An element is positioned according to the document’s flow. The top, right, bottom, left, and z-index properties have no effect.

This is the default value.

", + "responsive": true + }, + { + "class": "ps-sticky", + "output": "position: sticky;", + "define": "

An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.

Notes:
Sticky elements, by design, will not work inside an element with overflow:hidden; or overflow:auto; values.

", + "responsive": true + } + ], "values": "0, 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 50%, 100%", "properties": "t, r, b, l, i", "definitions": [ diff --git a/packages/stacks-docs/_data/atomic/sizing.json b/packages/stacks-docs/_data/atomic/sizing.json new file mode 100644 index 0000000000..bcd13ab52a --- /dev/null +++ b/packages/stacks-docs/_data/atomic/sizing.json @@ -0,0 +1,171 @@ +{ + "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 + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/transitions.json b/packages/stacks-docs/_data/atomic/transitions.json new file mode 100644 index 0000000000..ab2d522114 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/transitions.json @@ -0,0 +1,58 @@ +{ + "classes": [ + { + "class": "t", + "output": "transition-duration: .1s; transition-property: all; transition-timing-function: ease-in; transition-delay: 0s;", + "define": "

Apply a default transition style to an element.

", + "responsive": false + }, + { + "class": "t-slow", + "output": "transition-duration: .25s;", + "define": "

Slow down the default transition to 0.25s.

", + "responsive": false + }, + { + "class": "t-fast", + "output": "transition-duration: .05s;", + "define": "

Speed up the default transition to 0.05s.

", + "responsive": false + }, + { + "class": "t-unset", + "output": "transition-property: none;", + "define": "

Remove transition properties from an element.

", + "responsive": false + }, + { + "class": "t-bg", + "output": "transition-property: background-color;", + "define": "

Transition the background property of an element.

", + "responsive": false + }, + { + "class": "t-opacity", + "output": "transition-property: opacity;", + "define": "

Transition the opacity property of an element.

", + "responsive": false + }, + { + "class": "t-shadow", + "output": "transition-property: box-shadow;", + "define": "

Transition the box shadow property of an element.

", + "responsive": false + }, + { + "class": "t-delay", + "output": "transition-delay: .25s;", + "define": "

Apply a transition delay to an element.

", + "responsive": false + }, + { + "class": "t-delay-unset", + "output": "transition-delay: 0s;", + "define": "

Remove a transition delay from an element.

", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/vertical-alignment.json b/packages/stacks-docs/_data/atomic/vertical-alignment.json new file mode 100644 index 0000000000..e8b80871e6 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/vertical-alignment.json @@ -0,0 +1,49 @@ +{ + "classes": [ + { + "class": "va-baseline", + "output": "vertical-align: baseline;", + "responsive": false + }, + { + "class": "va-bottom", + "output": "vertical-align: bottom;", + "responsive": false + }, + { + "class": "va-middle", + "output": "vertical-align: middle;", + "responsive": false + }, + { + "class": "va-sub", + "output": "vertical-align: sub;", + "responsive": false + }, + { + "class": "va-super", + "output": "vertical-align: super;", + "responsive": false + }, + { + "class": "va-text-bottom", + "output": "vertical-align: text-bottom;", + "responsive": false + }, + { + "class": "va-text-top", + "output": "vertical-align: text-top;", + "responsive": false + }, + { + "class": "va-top", + "output": "vertical-align: top;", + "responsive": false + }, + { + "class": "va-unset", + "output": "vertical-align: unset;", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/visibility.json b/packages/stacks-docs/_data/atomic/visibility.json new file mode 100644 index 0000000000..4e75da35a0 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/visibility.json @@ -0,0 +1,19 @@ +{ + "classes": [ + { + "class": "v-visible", + "definition": "The element visible", + "responsive": false + }, + { + "class": "v-visible-sr", + "definition": "The element is visible only to screen readers", + "responsive": false + }, + { + "class": "v-hidden", + "definition": "The element is invisible, but still affects layout as normal", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/atomic/z-index.json b/packages/stacks-docs/_data/atomic/z-index.json new file mode 100644 index 0000000000..4a4ce30fb8 --- /dev/null +++ b/packages/stacks-docs/_data/atomic/z-index.json @@ -0,0 +1,64 @@ +{ + "classes": [ + { + "class": "z-hide", + "output": "z-index: -1;", + "responsive": false + }, + { + "class": "z-base", + "output": "z-index: 0;", + "responsive": false + }, + { + "class": "z-selected", + "output": "z-index: 25;", + "responsive": false + }, + { + "class": "z-active", + "output": "z-index: 50;", + "responsive": false + }, + { + "class": "z-dropdown", + "output": "z-index: 1000;", + "responsive": false + }, + { + "class": "z-popover", + "output": "z-index: 2000;", + "responsive": false + }, + { + "class": "z-tooltip", + "output": "z-index: 3000;", + "responsive": false + }, + { + "class": "z-banner", + "output": "z-index: 4000;", + "responsive": false + }, + { + "class": "z-nav", + "output": "z-index: 5000;", + "responsive": false + }, + { + "class": "z-nav-fixed", + "output": "z-index: 5050;", + "responsive": false + }, + { + "class": "z-modal-bg", + "output": "z-index: 8050;", + "responsive": false + }, + { + "class": "z-modal", + "output": "z-index: 9000;", + "responsive": false + } + ] +} diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 692e4c153d..5ea4eb6214 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -87,14 +87,14 @@ "title": "Box sizing", "url": "/product/base/box-sizing/" }, - { - "title": "Cursors", - "url": "/product/base/cursors/" - }, { "title": "Current color", "url": "/product/base/current-color/" }, + { + "title": "Cursors", + "url": "/product/base/cursors/" + }, { "title": "Display", "url": "/product/base/display/" diff --git a/packages/stacks-docs/product/base/box-sizing.html b/packages/stacks-docs/product/base/box-sizing.html index cced274aa4..a25fa6b7da 100644 --- a/packages/stacks-docs/product/base/box-sizing.html +++ b/packages/stacks-docs/product/base/box-sizing.html @@ -16,11 +16,11 @@ - {% for box in atomics.box-sizing %} + {% for atomic in box-sizing.classes %} - .{{ box.class }} - {{ box.output }} - {{ box.define }} + .{{ atomic.class }} + {{ atomic.output }} + {{ atomic.define }} {% endfor %} diff --git a/packages/stacks-docs/product/base/current-color.html b/packages/stacks-docs/product/base/current-color.html index 2a9c6ad8a3..fa18e8cdc2 100644 --- a/packages/stacks-docs/product/base/current-color.html +++ b/packages/stacks-docs/product/base/current-color.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.current-color %} + {% for atomic in current-color.classes %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/cursors.html b/packages/stacks-docs/product/base/cursors.html index 9284b11f7c..0526e81dd4 100644 --- a/packages/stacks-docs/product/base/cursors.html +++ b/packages/stacks-docs/product/base/cursors.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.cursors %} + {% for atomic in cursors.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -39,7 +39,7 @@ {% endhighlight %}
- {% for atomic in atomics.cursors %} + {% for atomic in cursors.classes %}
.{{ atomic.class }}
diff --git a/packages/stacks-docs/product/base/display.html b/packages/stacks-docs/product/base/display.html index dceda0a8b6..b2e8ffc2e5 100644 --- a/packages/stacks-docs/product/base/display.html +++ b/packages/stacks-docs/product/base/display.html @@ -18,7 +18,7 @@ - {% for atomic in atomics.display %} + {% for atomic in display.classes %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/floats.html b/packages/stacks-docs/product/base/floats.html index 90919b6579..80b9998386 100644 --- a/packages/stacks-docs/product/base/floats.html +++ b/packages/stacks-docs/product/base/floats.html @@ -16,11 +16,11 @@ - {% for floats in atomics.floats %} + {% for atomic in floats.classes %} - .{{ floats.class }} - {{ floats.output }} - {{ floats.define }} + .{{ atomic.class }} + {{ atomic.output }} + {{ atomic.define }} {% endfor %} diff --git a/packages/stacks-docs/product/base/height.html b/packages/stacks-docs/product/base/height.html index ed673f91a1..00293bd809 100644 --- a/packages/stacks-docs/product/base/height.html +++ b/packages/stacks-docs/product/base/height.html @@ -21,7 +21,7 @@ - {% for size in atomics.sizing.px %} + {% for size in sizing.px %} .h{{ size.px }} height: {{ size.px }}px; @@ -54,7 +54,7 @@
…
{% endhighlight %}
- {% for size in atomics.sizing.px %} + {% for size in sizing.px %}
.h{{ size.px }}
@@ -81,7 +81,7 @@ - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .hs{{ size.level }} height: {{ size.px }}px; @@ -115,7 +115,7 @@ {% endhighlight %}
- {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %}
.hs{{ size.level }}
@@ -208,7 +208,7 @@ {% icon "Checkmark", "fc-green-400" %} - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .hmn{{ size.level }} min-height: {{ size.px }}px; @@ -266,7 +266,7 @@ - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .hmx{{ size.level }} max-height: {{ size.px }}px; diff --git a/packages/stacks-docs/product/base/interactivity.html b/packages/stacks-docs/product/base/interactivity.html index 333b92e070..b244cba630 100644 --- a/packages/stacks-docs/product/base/interactivity.html +++ b/packages/stacks-docs/product/base/interactivity.html @@ -18,7 +18,7 @@ - {% for atomic in atomics.pointer-events %} + {% for atomic in interactivity.pointer-events %} .{{ atomic.class }} {{ atomic.output }} @@ -57,7 +57,7 @@ - {% for atomic in atomics.focus %} + {% for atomic in interactivity.focus %} .{{ atomic.class }} {{ atomic.define }} @@ -77,7 +77,7 @@ {% endhighlight %}
- {% for atomic in atomics.focus %} + {% for atomic in interactivity.focus %}
.{{ atomic.class }}
{% endfor %}
@@ -95,7 +95,7 @@ {% endhighlight %}
- {% for atomic in atomics.focus %} + {% for atomic in interactivity.focus %}
.f:{{ atomic.class }}
{% endfor %}
@@ -117,7 +117,7 @@ - {% for atomic in atomics.user-select %} + {% for atomic in interactivity.user-select %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/lists.html b/packages/stacks-docs/product/base/lists.html index 0224f6383a..bfd9b7a1ee 100644 --- a/packages/stacks-docs/product/base/lists.html +++ b/packages/stacks-docs/product/base/lists.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.lists %} + {% for atomic in lists.classes %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/object-fit.html b/packages/stacks-docs/product/base/object-fit.html index d9b5b9ac6a..8e2782e629 100644 --- a/packages/stacks-docs/product/base/object-fit.html +++ b/packages/stacks-docs/product/base/object-fit.html @@ -16,7 +16,7 @@ - {% for atomic in atomics.object-fit %} + {% for atomic in object-fit.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -39,7 +39,7 @@ {% endhighlight %}
- {% for atomic in atomics.object-fit %} + {% for atomic in object-fit.classes %} {% assign atomicClass = atomic.class %} {% if atomic.class == 'op-center' %} {% assign atomicClass = atomicClass | append: ' op-none' %} diff --git a/packages/stacks-docs/product/base/opacity.html b/packages/stacks-docs/product/base/opacity.html index 82a2bd4a9c..cf692d3df6 100644 --- a/packages/stacks-docs/product/base/opacity.html +++ b/packages/stacks-docs/product/base/opacity.html @@ -17,7 +17,7 @@ - {% for atomic in atomics.opacity %} + {% for atomic in opacity.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -54,7 +54,7 @@
…
{% endhighlight %}
- {% for atomic in atomics.opacity %} + {% for atomic in opacity.classes %}
.{{ atomic.class }}
diff --git a/packages/stacks-docs/product/base/outline.html b/packages/stacks-docs/product/base/outline.html index ba0a12f834..924933d089 100644 --- a/packages/stacks-docs/product/base/outline.html +++ b/packages/stacks-docs/product/base/outline.html @@ -20,7 +20,7 @@ - {% for atomic in atomics.outline %} + {% for atomic in outline.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -38,7 +38,7 @@
…
{% endhighlight %}
- {% for atomic in atomics.outline %} + {% for atomic in outline.classes %}
.{{ atomic.class }}
{% endfor %}
diff --git a/packages/stacks-docs/product/base/overflow.html b/packages/stacks-docs/product/base/overflow.html index ba7e6a898c..b65d831704 100644 --- a/packages/stacks-docs/product/base/overflow.html +++ b/packages/stacks-docs/product/base/overflow.html @@ -16,7 +16,7 @@ - {% for atomic in atomics.overflow %} + {% for atomic in overflow.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -42,7 +42,7 @@
…
{% endhighlight %}
- {% for atomic in atomics.overflow %} + {% for atomic in overflow.classes %}
.{{ atomic.class }}
diff --git a/packages/stacks-docs/product/base/position.html b/packages/stacks-docs/product/base/position.html index d474e797f6..25ed007721 100644 --- a/packages/stacks-docs/product/base/position.html +++ b/packages/stacks-docs/product/base/position.html @@ -17,7 +17,7 @@ - {% for atomic in atomics.position %} + {% for atomic in position.classes %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/transitions.html b/packages/stacks-docs/product/base/transitions.html index 63038d7454..542eddb8fc 100644 --- a/packages/stacks-docs/product/base/transitions.html +++ b/packages/stacks-docs/product/base/transitions.html @@ -19,7 +19,7 @@ - {% for atomic in atomics.transitions %} + {% for atomic in transitions.classes %} .{{ atomic.class }} {{ atomic.output }} diff --git a/packages/stacks-docs/product/base/vertical-alignment.html b/packages/stacks-docs/product/base/vertical-alignment.html index b37b79eac7..4ce8291b05 100644 --- a/packages/stacks-docs/product/base/vertical-alignment.html +++ b/packages/stacks-docs/product/base/vertical-alignment.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.vertical-alignment %} + {% for atomic in vertical-alignment.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -41,7 +41,7 @@ {% endhighlight %}
- {% for atomic in atomics.vertical-alignment %} + {% for atomic in vertical-alignment.classes %}
.{{ atomic.class }}
{% endfor %}
diff --git a/packages/stacks-docs/product/base/visibility.html b/packages/stacks-docs/product/base/visibility.html index 200d69a06f..8d08367b4f 100644 --- a/packages/stacks-docs/product/base/visibility.html +++ b/packages/stacks-docs/product/base/visibility.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.visibility %} + {% for atomic in visibility.classes %} .{{ atomic.class }} {{ atomic.definition }} diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html index 1c3d3cf15f..b225327e9d 100644 --- a/packages/stacks-docs/product/base/width.html +++ b/packages/stacks-docs/product/base/width.html @@ -21,7 +21,7 @@ - {% for size in atomics.sizing.px %} + {% for size in sizing.px %} .w{{ size.px }} width: {{ size.px }}px; @@ -56,7 +56,7 @@
…
{% endhighlight %}
- {% for size in atomics.sizing.px %} + {% for size in sizing.px %}
.w{{ size.px }}
@@ -83,7 +83,7 @@ - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .ws{{ size.level }} width: {{ size.px }}px; @@ -116,7 +116,7 @@
…
{% endhighlight %}
- {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %}
.ws{{ size.level }}
@@ -141,7 +141,7 @@ - {% for size in atomics.sizing.percent %} + {% for size in sizing.percent %} .w{{ size.percentage }} width: {{ size.percentage }}% @@ -190,7 +190,7 @@ {% endhighlight %}
- {% for size in atomics.sizing.percent %} + {% for size in sizing.percent %}
.w{{ size.percentage }}
@@ -227,7 +227,7 @@ {% icon "Checkmark", "fc-green-400" %} - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .wmn{{ size.level }} min-width: {{ size.px }}px; @@ -292,7 +292,7 @@ - {% for size in atomics.sizing.sizing-units %} + {% for size in sizing.sizing-units %} .wmx{{ size.level }} max-width: {{ size.px }}px; diff --git a/packages/stacks-docs/product/base/z-index.html b/packages/stacks-docs/product/base/z-index.html index 0e1b48ed59..7c22f7124a 100644 --- a/packages/stacks-docs/product/base/z-index.html +++ b/packages/stacks-docs/product/base/z-index.html @@ -15,7 +15,7 @@ - {% for atomic in atomics.z-index %} + {% for atomic in z-index.classes %} .{{ atomic.class }} {{ atomic.output }} @@ -44,7 +44,7 @@
{% assign baseClasses = "docs-box bc-black-300 h96 w96 ps-absolute" %} - {% for atomic in atomics.z-index %} + {% for atomic in z-index.classes %}
.{{ atomic.class }}
From f241d5e574473b0a6c16ab3608fdb85e7c4b5a0b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 18:44:06 -0500 Subject: [PATCH 07/15] move box-shadow styles to independent less file --- .../box-shadow.less.test.ts.snap | 35 ++++ .../__snapshots__/misc.less.test.ts.snap | 173 ++++++------------ .../__snapshots__/sizing.less.test.ts.snap | 27 +-- .../stacks-classic/lib/atomic/box-shadow.less | 29 +++ .../lib/atomic/box-shadow.less.test.ts | 12 ++ packages/stacks-classic/lib/atomic/misc.less | 29 --- .../stacks-classic/lib/stacks-static.less | 5 +- 7 files changed, 133 insertions(+), 177 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/box-shadow.less create mode 100644 packages/stacks-classic/lib/atomic/box-shadow.less.test.ts diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap new file mode 100644 index 0000000000..8b48761478 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap @@ -0,0 +1,35 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: misc > should output all atomic css classes 1`] = ` +".bs-none { + box-shadow: none !important; +} + +.bs-sm, +.h\\:bs-sm:hover { + box-shadow: var(--bs-sm) !important; +} + +.bs-md, +.h\\:bs-md:hover { + box-shadow: var(--bs-md) !important; +} + +.bs-lg, +.h\\:bs-lg:hover { + box-shadow: var(--bs-lg) !important; +} + +.bs-xl, +.h\\:bs-xl:hover { + box-shadow: var(--bs-xl) !important; +} + +.bs-ring, +.h\\:bs-ring:hover, +.f\\:bs-ring:focus, +.f\\:bs-ring:focus-within { + box-shadow: 0 0 0 var(--su4) var(--focus-ring); +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap index 3724a544e5..22e0fac2f5 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap @@ -168,31 +168,31 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` .focus, .f\\:focus:focus, .f\\:focus:focus-within { - box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme); - outline: var(--su-static2) solid transparent !important; + box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme); + outline: var(--su2) solid transparent !important; } .focus-inset, .f\\:focus-inset:focus, .f\\:focus-inset:focus-within { - box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral); - outline: var(--su-static2) solid transparent !important; + box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral); + outline: var(--su2) solid transparent !important; } .focus-bordered, .f\\:focus-bordered:focus, .f\\:focus-bordered:focus-within { border-color: var(--focus-neutral) !important; - box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme); - outline: var(--su-static2) solid transparent !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; } .focus-inset-bordered, .f\\:focus-inset-bordered:focus, .f\\:focus-inset-bordered:focus-within { border-color: var(--focus-theme) !important; - box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral); - outline: var(--su-static2) solid transparent !important; + box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral); + outline: var(--su2) solid transparent !important; } .of-contain { @@ -284,14 +284,14 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` .v-visible-sr { border: 0; /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ - clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); + clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); clip-path: inset(50%); - height: var(--su-static1); - margin: calc(var(--su-static1) * -1); + height: var(--su1); + margin: var(--sun1); overflow: hidden; padding: 0; position: absolute; - width: var(--su-static1); + width: var(--su1); overflow-wrap: normal; } @@ -411,18 +411,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-auto::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -437,18 +437,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-x-auto::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -463,18 +463,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-y-auto::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -489,18 +489,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-hidden::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -515,18 +515,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-x-hidden::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -541,18 +541,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-y-hidden::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -567,18 +567,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-scroll::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -593,18 +593,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-x-scroll::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-x-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -619,18 +619,18 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .overflow-y-scroll::-webkit-scrollbar { - width: calc(var(--su-static12) - var(--su-static2)); - height: calc(var(--su-static12) - var(--su-static2)); + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: transparent; } .overflow-y-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su-static12) - var(--su-static2)); + border-radius: calc(var(--su12) - var(--su2)); background-color: var(--scrollbar); } @@ -769,12 +769,16 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` } .outline-ring { - outline: solid var(--su-static4) var(--translucent-secondary); + border-color: var(--focus-neutral) !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; } .f\\:outline-ring:focus, .f\\:outline-ring:focus-within { - outline: solid var(--su-static4) var(--translucent-secondary); + border-color: var(--focus-neutral) !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; } .fill-current { @@ -785,75 +789,6 @@ exports[`atomic: misc > should output all atomic css classes 1`] = ` stroke: currentColor !important; } -.bs-none { - box-shadow: none !important; -} - -.bs-sm { - box-shadow: var(--bs-sm) !important; -} - -.h\\:bs-sm:hover { - box-shadow: var(--bs-sm) !important; -} - -.bs-md { - box-shadow: var(--bs-md) !important; -} - -.h\\:bs-md:hover { - box-shadow: var(--bs-md) !important; -} - -.bs-lg { - box-shadow: var(--bs-lg) !important; -} - -.h\\:bs-lg:hover { - box-shadow: var(--bs-lg) !important; -} - -.bs-xl { - box-shadow: var(--bs-xl) !important; -} - -.bs-ring { - box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); -} - -.h\\:bs-ring:hover { - box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); -} - -.f\\:bs-ring:focus, -.f\\:bs-ring:focus-within { - box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); -} - -.bs-sm.bs-hover:hover { - box-shadow: 0 var(--su-static2) var(--su-static8) #f0efed !important; -} - -.bs-md.bs-hover:hover { - box-shadow: 0 var(--su-static4) var(--su-static8) #d7d8db !important; -} - -.bs-lg.bs-hover:hover { - box-shadow: 0 var(--su-static4) var(--su-static12) rgba(132, 135, 140, 0.7) !important; -} - -.bs-i-sm.bs-hover:hover { - box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(167, 170, 176, 0.75) !important; -} - -.bs-i-md.bs-hover:hover { - box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(132, 135, 140, 0.8) !important; -} - -.bs-i-lg.bs-hover:hover { - box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 #84878c !important; -} - .t { transition-duration: var(--transition-time); transition-property: all; 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 5bc77abfc7..e9986b7cdf 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 @@ -5,6 +5,7 @@ exports[`atomic: sizing > should output all sizing custom properties 1`] = ` --su0: 0; --su1: clamp(1px, 0.063rem, 0.063rem); --su2: 0.125rem; + --su3: 0.1875rem; --su4: 0.25rem; --su6: 0.375rem; --su8: 0.5rem; @@ -32,6 +33,7 @@ exports[`atomic: sizing > should output all sizing custom properties 1`] = ` --s-step: calc(var(--s-full) / 12); --sun1: calc(var(--su1) * -1); --sun2: calc(var(--su2) * -1); + --sun3: calc(var(--su3) * -1); --sun4: calc(var(--su4) * -1); --sun6: calc(var(--su6) * -1); --sun8: calc(var(--su8) * -1); @@ -43,31 +45,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-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; } " `; diff --git a/packages/stacks-classic/lib/atomic/box-shadow.less b/packages/stacks-classic/lib/atomic/box-shadow.less new file mode 100644 index 0000000000..e916234dd4 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/box-shadow.less @@ -0,0 +1,29 @@ +@import (reference) "../base/internal.less"; +@import (reference) "../exports/color-mixins.less"; +@import (reference) "../exports/constants-helpers.less"; +// @import (reference) "../exports/mixins.less"; + +#stacks-internals #responsify('.bs-none', { + box-shadow: none !important; +}); + +.bs-sm, +.h\:bs-sm:hover { + box-shadow: var(--bs-sm) !important; +} + +.bs-md, +.h\:bs-md:hover { box-shadow: var(--bs-md) !important; } + +.bs-lg, +.h\:bs-lg:hover { box-shadow: var(--bs-lg) !important; } + +.bs-xl, +.h\:bs-xl:hover { box-shadow: var(--bs-xl) !important; } + +.bs-ring, +.h\:bs-ring:hover, +.f\:bs-ring:focus, +.f\:bs-ring:focus-within { + box-shadow: 0 0 0 var(--su4) var(--focus-ring); +} diff --git a/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts b/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts new file mode 100644 index 0000000000..18cdd87906 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: misc", () => { + it("should output all atomic css classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/box-shadow.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/misc.less b/packages/stacks-classic/lib/atomic/misc.less index af263e3abc..ad2f599702 100644 --- a/packages/stacks-classic/lib/atomic/misc.less +++ b/packages/stacks-classic/lib/atomic/misc.less @@ -327,35 +327,6 @@ .fill-current { fill: currentColor !important; } .stroke-current { stroke: currentColor !important; } -// ============================================================================ -// $ BOX SHADOW -// ---------------------------------------------------------------------------- -#stacks-internals #responsify('.bs-none', { box-shadow: none !important; }); -.bs-sm { box-shadow: var(--bs-sm) !important; } -.h\:bs-sm:hover { .bs-sm; } -.bs-md { box-shadow: var(--bs-md) !important; } -.h\:bs-md:hover { .bs-md; } -.bs-lg { box-shadow: var(--bs-lg) !important; } -.h\:bs-lg:hover { .bs-lg; } -.bs-xl { box-shadow: var(--bs-xl) !important; } -.bs-ring { box-shadow: 0 0 0 var(--su4) var(--focus-ring); } -.h\:bs-ring:hover { .bs-ring; } -.f\:bs-ring { - &:focus, - &:focus-within { - .bs-ring; - } -} - -// -- Added hover styles for box-shadow -// TODO do we still need them? Can we deprecate/remove these weird hover classes? -.bs-sm.bs-hover:hover { box-shadow: 0 var(--su2) var(--su8) .set-black()[150] !important; } -.bs-md.bs-hover:hover { box-shadow: 0 var(--su4) var(--su8) .set-black()[225] !important; } -.bs-lg.bs-hover:hover { box-shadow: 0 var(--su4) var(--su12) fade(.set-black()[350], 70%) !important; } -.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su8) 0 fade(.set-black()[300], 75%) !important; } -.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su8) 0 fade(.set-black()[350], 80%) !important; } -.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su1) var(--su12) 0 .set-black()[350] !important; } - // ============================================================================ // $ TRANSITIONS // ---------------------------------------------------------------------------- diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index 0ec3510d8a..88eba81937 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -58,6 +58,7 @@ // -- ATOMIC CLASSES @import "atomic/border.less"; +@import "atomic/box-shadow.less"; @import "atomic/color.less"; @import "atomic/flex.less"; @import "atomic/gap.less"; @@ -90,7 +91,3 @@ } } /* stylelint-enable */ - -// CONFIG -@import "base/configuration-static.less"; -@import "base/internal.less"; From 12083d70077c09bdd93a3ed7f310db51efd5f786 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 2 Feb 2026 20:08:55 -0500 Subject: [PATCH 08/15] Split misc.less and others into discrete groupings --- .../backgrounds.less.test.ts.snap | 124 +++ .../border-radius.less.test.ts.snap | 92 ++ .../__snapshots__/borders.less.test.ts.snap | 207 ++++ .../box-shadow.less.test.ts.snap | 2 +- .../box-sizing.less.test.ts.snap | 16 + .../__snapshots__/color.less.test.ts.snap | 2 +- .../current-color.less.test.ts.snap | 12 + .../__snapshots__/cursors.less.test.ts.snap | 36 + .../__snapshots__/display.less.test.ts.snap | 48 + .../__snapshots__/flex.less.test.ts.snap | 2 +- .../__snapshots__/floats.less.test.ts.snap | 42 + .../__snapshots__/gap.less.test.ts.snap | 199 ++++ .../__snapshots__/grid.less.test.ts.snap | 412 ++++++++ .../__snapshots__/height.less.test.ts.snap | 2 +- .../interactivity.less.test.ts.snap | 56 ++ .../__snapshots__/lists.less.test.ts.snap | 55 ++ .../__snapshots__/margin.less.test.ts.snap | 924 ++++++++++++++++++ .../__snapshots__/misc.less.test.ts.snap | 839 ---------------- .../object-fit.less.test.ts.snap | 28 + .../__snapshots__/opacity.less.test.ts.snap | 59 ++ .../__snapshots__/outline.less.test.ts.snap | 21 + .../__snapshots__/overflow.less.test.ts.snap | 242 +++++ .../__snapshots__/padding.less.test.ts.snap | 424 ++++++++ .../positioning.less.test.ts.snap | 26 +- .../__snapshots__/spacing.less.test.ts.snap | 2 +- .../transitions.less.test.ts.snap | 43 + .../truncation.less.test.ts.snap | 65 ++ .../typography.less.test.ts.snap | 333 +++++++ .../vertical-alignment.less.test.ts.snap | 40 + .../visibility.less.test.ts.snap | 26 + .../__snapshots__/width.less.test.ts.snap | 2 +- .../__snapshots__/z-index.less.test.ts.snap | 52 + .../lib/atomic/backgrounds.less | 67 ++ .../lib/atomic/backgrounds.less.test.ts | 12 + .../lib/atomic/border-radius.less | 38 + .../lib/atomic/border-radius.less.test.ts | 12 + .../lib/atomic/{border.less => borders.less} | 78 +- .../lib/atomic/borders.less.test.ts | 12 + .../lib/atomic/box-shadow.less.test.ts | 4 +- .../stacks-classic/lib/atomic/box-sizing.less | 3 + .../lib/atomic/box-sizing.less.test.ts | 12 + .../lib/atomic/color.less.test.ts | 2 +- .../lib/atomic/current-color.less | 2 + .../lib/atomic/current-color.less.test.ts | 12 + .../stacks-classic/lib/atomic/cursors.less | 8 + .../lib/atomic/cursors.less.test.ts | 12 + .../stacks-classic/lib/atomic/display.less | 15 + .../lib/atomic/display.less.test.ts | 12 + .../lib/atomic/flex.less.test.ts | 2 +- .../stacks-classic/lib/atomic/floats.less | 20 + .../lib/atomic/floats.less.test.ts | 12 + packages/stacks-classic/lib/atomic/gap.less | 2 + .../{misc.less.test.ts => gap.less.test.ts} | 6 +- packages/stacks-classic/lib/atomic/grid.less | 2 + ...spacing.less.test.ts => grid.less.test.ts} | 6 +- .../lib/atomic/height.less.test.ts | 2 +- .../lib/atomic/interactivity.less | 45 + .../lib/atomic/interactivity.less.test.ts | 12 + packages/stacks-classic/lib/atomic/lists.less | 29 + .../lib/atomic/lists.less.test.ts | 12 + .../lib/atomic/{spacing.less => margin.less} | 10 - .../lib/atomic/margin.less.test.ts | 12 + packages/stacks-classic/lib/atomic/misc.less | 360 ------- .../stacks-classic/lib/atomic/object-fit.less | 9 + .../lib/atomic/object-fit.less.test.ts | 12 + .../stacks-classic/lib/atomic/opacity.less | 54 + .../lib/atomic/opacity.less.test.ts | 12 + .../stacks-classic/lib/atomic/outline.less | 11 + .../lib/atomic/outline.less.test.ts | 12 + .../stacks-classic/lib/atomic/overflow.less | 17 + .../lib/atomic/overflow.less.test.ts | 12 + .../stacks-classic/lib/atomic/padding.less | 12 + .../lib/atomic/padding.less.test.ts | 12 + .../lib/atomic/positioning.less | 7 + .../lib/atomic/transitions.less | 20 + .../lib/atomic/transitions.less.test.ts | 12 + .../stacks-classic/lib/atomic/truncation.less | 58 ++ .../lib/atomic/truncation.less.test.ts | 12 + .../stacks-classic/lib/atomic/typography.less | 143 +-- .../lib/atomic/typography.less.test.ts | 12 + .../lib/atomic/vertical-alignment.less | 9 + .../atomic/vertical-alignment.less.test.ts | 12 + .../stacks-classic/lib/atomic/visibility.less | 18 + .../lib/atomic/visibility.less.test.ts | 12 + .../lib/atomic/width.less.test.ts | 2 +- .../stacks-classic/lib/atomic/z-index.less | 12 + .../lib/atomic/z-index.less.test.ts | 12 + .../lib/components/table/table.less | 4 + .../stacks-classic/lib/stacks-static.less | 59 +- .../stacks-docs/_data/site-navigation.json | 8 +- .../stacks-docs/product/base/display.html | 2 +- packages/stacks-docs/product/base/margin.html | 14 +- 92 files changed, 4413 insertions(+), 1444 deletions(-) create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/backgrounds.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/border-radius.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/borders.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/box-sizing.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/current-color.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/cursors.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/display.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/floats.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/grid.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/interactivity.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/lists.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/margin.less.test.ts.snap delete mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/object-fit.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/opacity.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/outline.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/overflow.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/padding.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/transitions.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/truncation.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/typography.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/vertical-alignment.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/visibility.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/z-index.less.test.ts.snap create mode 100644 packages/stacks-classic/lib/atomic/backgrounds.less create mode 100644 packages/stacks-classic/lib/atomic/backgrounds.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/border-radius.less create mode 100644 packages/stacks-classic/lib/atomic/border-radius.less.test.ts rename packages/stacks-classic/lib/atomic/{border.less => borders.less} (54%) create mode 100644 packages/stacks-classic/lib/atomic/borders.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/box-sizing.less create mode 100644 packages/stacks-classic/lib/atomic/box-sizing.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/current-color.less create mode 100644 packages/stacks-classic/lib/atomic/current-color.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/cursors.less create mode 100644 packages/stacks-classic/lib/atomic/cursors.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/display.less create mode 100644 packages/stacks-classic/lib/atomic/display.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/floats.less create mode 100644 packages/stacks-classic/lib/atomic/floats.less.test.ts rename packages/stacks-classic/lib/atomic/{misc.less.test.ts => gap.less.test.ts} (59%) rename packages/stacks-classic/lib/atomic/{spacing.less.test.ts => grid.less.test.ts} (58%) create mode 100644 packages/stacks-classic/lib/atomic/interactivity.less create mode 100644 packages/stacks-classic/lib/atomic/interactivity.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/lists.less create mode 100644 packages/stacks-classic/lib/atomic/lists.less.test.ts rename packages/stacks-classic/lib/atomic/{spacing.less => margin.less} (83%) create mode 100644 packages/stacks-classic/lib/atomic/margin.less.test.ts delete mode 100644 packages/stacks-classic/lib/atomic/misc.less create mode 100644 packages/stacks-classic/lib/atomic/object-fit.less create mode 100644 packages/stacks-classic/lib/atomic/object-fit.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/opacity.less create mode 100644 packages/stacks-classic/lib/atomic/opacity.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/outline.less create mode 100644 packages/stacks-classic/lib/atomic/outline.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/overflow.less create mode 100644 packages/stacks-classic/lib/atomic/overflow.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/padding.less create mode 100644 packages/stacks-classic/lib/atomic/padding.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/transitions.less create mode 100644 packages/stacks-classic/lib/atomic/transitions.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/truncation.less create mode 100644 packages/stacks-classic/lib/atomic/truncation.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/typography.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/vertical-alignment.less create mode 100644 packages/stacks-classic/lib/atomic/vertical-alignment.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/visibility.less create mode 100644 packages/stacks-classic/lib/atomic/visibility.less.test.ts create mode 100644 packages/stacks-classic/lib/atomic/z-index.less create mode 100644 packages/stacks-classic/lib/atomic/z-index.less.test.ts diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/backgrounds.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/backgrounds.less.test.ts.snap new file mode 100644 index 0000000000..ca3685600b --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/backgrounds.less.test.ts.snap @@ -0,0 +1,124 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: backgrounds > should output all atomic backgrounds classes 1`] = ` +".bg-bottom { + background-position: bottom !important; +} + +.bg-center { + background-position: center !important; +} + +.bg-left { + background-position: left !important; +} + +.bg-left-bottom { + background-position: left bottom !important; +} + +.bg-left-top { + background-position: left top !important; +} + +.bg-right { + background-position: right !important; +} + +.bg-right-bottom { + background-position: right bottom !important; +} + +.bg-right-top { + background-position: right top !important; +} + +.bg-top { + background-position: top !important; +} + +.bg-repeat { + background-repeat: repeat !important; +} + +.bg-no-repeat { + background-repeat: no-repeat !important; +} + +.bg-repeat-x { + background-repeat: repeat-x !important; +} + +.bg-repeat-y { + background-repeat: repeat-y !important; +} + +.bg-auto { + background-size: auto !important; +} + +.bg-cover { + background-size: cover !important; +} + +.bg-contain { + background-size: contain !important; +} + +.bg-fixed { + background-attachment: fixed !important; +} + +.bg-local { + background-attachment: local !important; +} + +.bg-scroll { + background-attachment: scroll !important; +} + +.bg-image-none { + background-image: none !important; +} + +.bg-loading { + animation: loadingBgAnimation 1.5s ease-out infinite; + animation-delay: 1ms; +} + +@keyframes loadingBgAnimation { + 0% { + background-color: var(--black-150); + opacity: 1; + } + + 50% { + background-color: var(--black-100); + opacity: 0.7; + } + + 100% { + background-color: var(--black-150); + opacity: 1; + } +} + +.bg-confetti-animated { + background-repeat: repeat-x; + background-position: top -10px center; + background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A"); +} + +@media (prefers-reduced-motion) { + .bg-confetti-animated { + background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); + } +} + +.bg-confetti-static { + background-repeat: repeat-x; + background-position: top -10px center; + background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/border-radius.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/border-radius.less.test.ts.snap new file mode 100644 index 0000000000..edec5998e0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/border-radius.less.test.ts.snap @@ -0,0 +1,92 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: border-radius > should output all atomic border-radius classes 1`] = ` +".bar0 { + border-radius: 0 !important; +} + +.bar-md { + border-radius: var(--br-md) !important; +} + +.bar-circle { + border-radius: var(--br-circle) !important; +} + +.bar-pill { + border-radius: var(--br-pill) !important; +} + +.btlr0 { + border-top-left-radius: 0 !important; +} + +.btlr-md { + border-top-left-radius: var(--br-md) !important; +} + +.btrr0 { + border-top-right-radius: 0 !important; +} + +.btrr-md { + border-top-right-radius: var(--br-md) !important; +} + +.bblr0 { + border-bottom-left-radius: 0 !important; +} + +.bblr-md { + border-bottom-left-radius: var(--br-md) !important; +} + +.bbrr0 { + border-bottom-right-radius: 0 !important; +} + +.bbrr-md { + border-bottom-right-radius: var(--br-md) !important; +} + +.btr0 { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} + +.btr-md { + border-top-left-radius: var(--br-md) !important; + border-top-right-radius: var(--br-md) !important; +} + +.brr0 { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.brr-md { + border-top-right-radius: var(--br-md) !important; + border-bottom-right-radius: var(--br-md) !important; +} + +.bbr0 { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.bbr-md { + border-bottom-left-radius: var(--br-md) !important; + border-bottom-right-radius: var(--br-md) !important; +} + +.blr0 { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.blr-md { + border-top-left-radius: var(--br-md) !important; + border-bottom-left-radius: var(--br-md) !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/borders.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/borders.less.test.ts.snap new file mode 100644 index 0000000000..32b16947db --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/borders.less.test.ts.snap @@ -0,0 +1,207 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: borders > should output all atomic borders classes 1`] = ` +".ba { + border-style: solid !important; + border-width: var(--su1) !important; +} + +.bt { + border-top-style: solid !important; + border-top-width: var(--su1) !important; +} + +.br { + border-right-style: solid !important; + border-right-width: var(--su1) !important; +} + +.bb { + border-bottom-style: solid !important; + border-bottom-width: var(--su1) !important; +} + +.bl { + border-left-style: solid !important; + border-left-width: var(--su1) !important; +} + +.bx { + border-left-style: solid !important; + border-right-style: solid !important; + border-right-width: var(--su1) !important; + border-left-width: var(--su1) !important; +} + +.by { + border-top-style: solid !important; + border-bottom-style: solid !important; + border-top-width: var(--su1) !important; + border-bottom-width: var(--su1) !important; +} + +.baw0 { + border-width: 0 !important; +} + +.baw1 { + border-width: var(--su1) !important; +} + +.baw2 { + border-width: var(--su2) !important; +} + +.baw3 { + border-width: var(--su4) !important; +} + +.btw0 { + border-top-width: 0 !important; +} + +.btw1 { + border-top-width: var(--su1) !important; +} + +.btw2 { + border-top-width: var(--su2) !important; +} + +.btw3 { + border-top-width: var(--su4) !important; +} + +.brw0 { + border-right-width: 0 !important; +} + +.brw1 { + border-right-width: var(--su1) !important; +} + +.brw2 { + border-right-width: var(--su2) !important; +} + +.brw3 { + border-right-width: var(--su4) !important; +} + +.bbw0 { + border-bottom-width: 0 !important; +} + +.bbw1 { + border-bottom-width: var(--su1) !important; +} + +.bbw2 { + border-bottom-width: var(--su2) !important; +} + +.bbw3 { + border-bottom-width: var(--su4) !important; +} + +.blw0 { + border-left-width: 0 !important; +} + +.blw0 { + border-left-width: 0 !important; +} + +.blw1 { + border-left-width: var(--su1) !important; +} + +.blw2 { + border-left-width: var(--su2) !important; +} + +.blw3 { + border-left-width: var(--su4) !important; +} + +.byw0 { + border-top-width: 0 !important; + border-bottom-width: 0 !important; +} + +.byw1 { + border-top-width: var(--su1) !important; + border-bottom-width: var(--su1) !important; +} + +.byw2 { + border-top-width: var(--su2) !important; + border-bottom-width: var(--su2) !important; +} + +.byw3 { + border-top-width: var(--su4) !important; + border-bottom-width: var(--su4) !important; +} + +.bxw0 { + border-right-width: 0 !important; + border-left-width: 0 !important; +} + +.bxw1 { + border-right-width: var(--su1) !important; + border-left-width: var(--su1) !important; +} + +.bxw2 { + border-right-width: var(--su2) !important; + border-left-width: var(--su2) !important; +} + +.bxw3 { + border-right-width: var(--su4) !important; + border-left-width: var(--su4) !important; +} + +.bas-solid { + border-style: solid !important; +} + +.bas-dashed { + border-style: dashed !important; +} + +.bts-solid { + border-top-style: solid !important; +} + +.bts-dashed { + border-top-style: dashed !important; +} + +.brs-solid { + border-right-style: solid !important; +} + +.brs-dashed { + border-right-style: dashed !important; +} + +.bbs-solid { + border-bottom-style: solid !important; +} + +.bbs-dashed { + border-bottom-style: dashed !important; +} + +.bls-solid { + border-left-style: solid !important; +} + +.bls-dashed { + border-left-style: dashed !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap index 8b48761478..8b42032b90 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/box-shadow.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: misc > should output all atomic css classes 1`] = ` +exports[`atomic: box-shadow > should output all atomic box-shadow classes 1`] = ` ".bs-none { box-shadow: none !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/box-sizing.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/box-sizing.less.test.ts.snap new file mode 100644 index 0000000000..7f06946d10 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/box-sizing.less.test.ts.snap @@ -0,0 +1,16 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: box-sizing > should output all atomic box-sizing classes 1`] = ` +".box-content { + box-sizing: content-box !important; +} + +.box-border { + box-sizing: border-box !important; +} + +.box-unset { + box-sizing: unset !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap index 1c6b966ec1..ddaa15a42f 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: color > should output v2 atomic css classes for colors 1`] = ` +exports[`atomic: color > should output all atomic color classes and custom properties 1`] = ` ".bg-white, .h\\:bg-white:hover, .f\\:bg-white:focus, diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/current-color.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/current-color.less.test.ts.snap new file mode 100644 index 0000000000..d2be5a4560 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/current-color.less.test.ts.snap @@ -0,0 +1,12 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: current-color > should output all atomic current-color classes 1`] = ` +".fill-current { + fill: currentColor !important; +} + +.stroke-current { + stroke: currentColor !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/cursors.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/cursors.less.test.ts.snap new file mode 100644 index 0000000000..fc995a2980 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/cursors.less.test.ts.snap @@ -0,0 +1,36 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: cursors > should output all atomic cursors classes 1`] = ` +".c-auto { + cursor: auto !important; +} + +.c-default { + cursor: default !important; +} + +.c-pointer { + cursor: pointer !important; +} + +.c-text { + cursor: text !important; +} + +.c-wait { + cursor: wait !important; +} + +.c-move { + cursor: move !important; +} + +.c-not-allowed { + cursor: not-allowed !important; +} + +.c-help { + cursor: help !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/display.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/display.less.test.ts.snap new file mode 100644 index 0000000000..114efd387d --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/display.less.test.ts.snap @@ -0,0 +1,48 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: display > should output all atomic display classes 1`] = ` +".d-block { + display: block !important; +} + +.d-flex { + display: flex !important; +} + +.d-inline-flex { + display: inline-flex !important; +} + +.d-grid { + display: grid !important; +} + +.d-inline-grid { + display: inline-grid !important; +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-table { + display: table !important; +} + +.d-table-cell { + display: table-cell !important; +} + +.d-none { + display: none !important; +} + +.d-unset { + display: unset !important; +} +" +`; 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 index aec2b893c0..2fc095aaf7 100644 --- a/packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap +++ b/packages/stacks-classic/lib/atomic/__snapshots__/flex.less.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`atomic: flex > should output all atomic flex css classes 1`] = ` +exports[`atomic: flex > should output all atomic flex classes 1`] = ` ".flex__fl-shrink0, .flex__fl-shrink0 > .d-flex, .flex__fl-shrink0 > .flex--item { diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/floats.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/floats.less.test.ts.snap new file mode 100644 index 0000000000..3c533005be --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/floats.less.test.ts.snap @@ -0,0 +1,42 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: floats > should output all atomic floats classes 1`] = ` +".float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.float-none { + float: none !important; +} + +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clear-left { + clear: left !important; +} + +.clear-right { + clear: right !important; +} + +.clear-both { + clear: both !important; +} + +.clear-none { + clear: none !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap new file mode 100644 index 0000000000..c7da02db95 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/gap.less.test.ts.snap @@ -0,0 +1,199 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: gap > should output all atomic gap classes 1`] = ` +".g0 { + --_gap-y: 0; + --_gap-x: 0; +} + +.g1 { + --_gap-y: var(--su1); + --_gap-x: var(--su1); +} + +.g2 { + --_gap-y: var(--su2); + --_gap-x: var(--su2); +} + +.g4 { + --_gap-y: var(--su4); + --_gap-x: var(--su4); +} + +.g6 { + --_gap-y: var(--su6); + --_gap-x: var(--su6); +} + +.g8 { + --_gap-y: var(--su8); + --_gap-x: var(--su8); +} + +.g12 { + --_gap-y: var(--su12); + --_gap-x: var(--su12); +} + +.g16 { + --_gap-y: var(--su16); + --_gap-x: var(--su16); +} + +.g24 { + --_gap-y: var(--su24); + --_gap-x: var(--su24); +} + +.g32 { + --_gap-y: var(--su32); + --_gap-x: var(--su32); +} + +.g48 { + --_gap-y: var(--su48); + --_gap-x: var(--su48); +} + +.g64 { + --_gap-y: var(--su64); + --_gap-x: var(--su64); +} + +.gx0 { + --_gap-x: 0; +} + +.gx1 { + --_gap-x: var(--su1); +} + +.gx2 { + --_gap-x: var(--su2); +} + +.gx4 { + --_gap-x: var(--su4); +} + +.gx6 { + --_gap-x: var(--su6); +} + +.gx8 { + --_gap-x: var(--su8); +} + +.gx12 { + --_gap-x: var(--su12); +} + +.gx16 { + --_gap-x: var(--su16); +} + +.gx24 { + --_gap-x: var(--su24); +} + +.gx32 { + --_gap-x: var(--su32); +} + +.gx48 { + --_gap-x: var(--su48); +} + +.gx64 { + --_gap-x: var(--su64); +} + +.gy0 { + --_gap-y: 0; +} + +.gy1 { + --_gap-y: var(--su1); +} + +.gy2 { + --_gap-y: var(--su2); +} + +.gy4 { + --_gap-y: var(--su4); +} + +.gy6 { + --_gap-y: var(--su6); +} + +.gy8 { + --_gap-y: var(--su8); +} + +.gy12 { + --_gap-y: var(--su12); +} + +.gy16 { + --_gap-y: var(--su16); +} + +.gy24 { + --_gap-y: var(--su24); +} + +.gy32 { + --_gap-y: var(--su32); +} + +.gy48 { + --_gap-y: var(--su48); +} + +.gy64 { + --_gap-y: var(--su64); +} + +.gx0, +.gx1, +.gx2, +.gx4, +.gx6, +.gx8, +.gx12, +.gx16, +.gx24, +.gx32, +.gx48, +.gx64, +.gy0, +.gy1, +.gy2, +.gy4, +.gy6, +.gy8, +.gy12, +.gy16, +.gy24, +.gy32, +.gy48, +.gy64, +.g0, +.g1, +.g2, +.g4, +.g6, +.g8, +.g12, +.g16, +.g24, +.g32, +.g48, +.g64 { + gap: var(--_gap-y, 0) var(--_gap-x, 0); +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/grid.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/grid.less.test.ts.snap new file mode 100644 index 0000000000..aed44c707c --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/grid.less.test.ts.snap @@ -0,0 +1,412 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: grid > should output all atomic grid classes 1`] = ` +".g-af-dense { + grid-auto-flow: dense; +} + +.g-af-row { + grid-auto-flow: row; +} + +.g-af-column { + grid-auto-flow: column; +} + +.grid__1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid__2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid__3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid__4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid__5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +.grid__6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); +} + +.grid__7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); +} + +.grid__8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); +} + +.grid__9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); +} + +.grid__10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); +} + +.grid__11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); +} + +.grid__12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +.grid__auto { + grid-template-columns: auto 1fr; +} + +.grid--col-all { + grid-column: 1 / -1; +} + +.grid--row-all { + grid-row: 1 / -1; +} + +.grid--col1 { + grid-column: span 1; +} + +.grid--col2 { + grid-column: span 2; +} + +.grid--col3 { + grid-column: span 3; +} + +.grid--col4 { + grid-column: span 4; +} + +.grid--col5 { + grid-column: span 5; +} + +.grid--col6 { + grid-column: span 6; +} + +.grid--col7 { + grid-column: span 7; +} + +.grid--col8 { + grid-column: span 8; +} + +.grid--col9 { + grid-column: span 9; +} + +.grid--col10 { + grid-column: span 10; +} + +.grid--col11 { + grid-column: span 11; +} + +.grid--col12 { + grid-column: span 12; +} + +.grid--row1 { + grid-row: span 1; +} + +.grid--row2 { + grid-row: span 2; +} + +.grid--row3 { + grid-row: span 3; +} + +.grid--row4 { + grid-row: span 4; +} + +.grid--row5 { + grid-row: span 5; +} + +.grid--row6 { + grid-row: span 6; +} + +.grid--row7 { + grid-row: span 7; +} + +.grid--row8 { + grid-row: span 8; +} + +.grid--row9 { + grid-row: span 9; +} + +.grid--row10 { + grid-row: span 10; +} + +.grid--row11 { + grid-row: span 11; +} + +.grid--row12 { + grid-row: span 12; +} + +.grid--col-start1 { + grid-column-start: 1; +} + +.grid--col-start2 { + grid-column-start: 2; +} + +.grid--col-start3 { + grid-column-start: 3; +} + +.grid--col-start4 { + grid-column-start: 4; +} + +.grid--col-start5 { + grid-column-start: 5; +} + +.grid--col-start6 { + grid-column-start: 6; +} + +.grid--col-start7 { + grid-column-start: 7; +} + +.grid--col-start8 { + grid-column-start: 8; +} + +.grid--col-start9 { + grid-column-start: 9; +} + +.grid--col-start10 { + grid-column-start: 10; +} + +.grid--col-start11 { + grid-column-start: 11; +} + +.grid--col-start12 { + grid-column-start: 12; +} + +.grid--col-end2 { + grid-column-end: 2; +} + +.grid--col-end3 { + grid-column-end: 3; +} + +.grid--col-end4 { + grid-column-end: 4; +} + +.grid--col-end5 { + grid-column-end: 5; +} + +.grid--col-end6 { + grid-column-end: 6; +} + +.grid--col-end7 { + grid-column-end: 7; +} + +.grid--col-end8 { + grid-column-end: 8; +} + +.grid--col-end9 { + grid-column-end: 9; +} + +.grid--col-end10 { + grid-column-end: 10; +} + +.grid--col-end11 { + grid-column-end: 11; +} + +.grid--col-end12 { + grid-column-end: 12; +} + +.grid--col-end13 { + grid-column-end: 13; +} + +.grid--row-start1 { + grid-row-start: 1; +} + +.grid--row-start2 { + grid-row-start: 2; +} + +.grid--row-start3 { + grid-row-start: 3; +} + +.grid--row-start4 { + grid-row-start: 4; +} + +.grid--row-start5 { + grid-row-start: 5; +} + +.grid--row-start6 { + grid-row-start: 6; +} + +.grid--row-start7 { + grid-row-start: 7; +} + +.grid--row-start8 { + grid-row-start: 8; +} + +.grid--row-start9 { + grid-row-start: 9; +} + +.grid--row-start10 { + grid-row-start: 10; +} + +.grid--row-start11 { + grid-row-start: 11; +} + +.grid--row-start12 { + grid-row-start: 12; +} + +.grid--row-end2 { + grid-row-end: 2; +} + +.grid--row-end3 { + grid-row-end: 3; +} + +.grid--row-end4 { + grid-row-end: 4; +} + +.grid--row-end5 { + grid-row-end: 5; +} + +.grid--row-end6 { + grid-row-end: 6; +} + +.grid--row-end7 { + grid-row-end: 7; +} + +.grid--row-end8 { + grid-row-end: 8; +} + +.grid--row-end9 { + grid-row-end: 9; +} + +.grid--row-end10 { + grid-row-end: 10; +} + +.grid--row-end11 { + grid-row-end: 11; +} + +.grid--row-end12 { + grid-row-end: 12; +} + +.grid--row-end13 { + grid-row-end: 13; +} + +.ji-auto { + justify-items: auto !important; +} + +.ji-center { + justify-items: center !important; +} + +.ji-start { + justify-items: start !important; +} + +.ji-end { + justify-items: end !important; +} + +.ji-stretch { + justify-items: stretch !important; +} + +.ji-unset { + justify-items: unset !important; +} + +.js-auto { + justify-self: auto !important; +} + +.js-center { + justify-self: center !important; +} + +.js-start { + justify-self: start !important; +} + +.js-end { + justify-self: end !important; +} + +.js-stretch { + justify-self: stretch !important; +} + +.js-unset { + justify-self: unset !important; +} +" +`; 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 8f165e89bf..a3d5766a15 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 classes 1`] = ` +exports[`atomic: height > should output all height atomic classes 1`] = ` ".h0 { height: var(--su0) !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/interactivity.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/interactivity.less.test.ts.snap new file mode 100644 index 0000000000..cdf5f7d5f0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/interactivity.less.test.ts.snap @@ -0,0 +1,56 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: interactivity > should output all atomic interactivity classes 1`] = ` +".focus, +.f\\:focus:focus, +.f\\:focus:focus-within { + box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme); + outline: var(--su2) solid transparent !important; +} + +.focus-inset, +.f\\:focus-inset:focus, +.f\\:focus-inset:focus-within { + box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral); + outline: var(--su2) solid transparent !important; +} + +.focus-bordered, +.f\\:focus-bordered:focus, +.f\\:focus-bordered:focus-within { + border-color: var(--focus-neutral) !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; +} + +.focus-inset-bordered, +.f\\:focus-inset-bordered:focus, +.f\\:focus-inset-bordered:focus-within { + border-color: var(--focus-theme) !important; + box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral); + outline: var(--su2) solid transparent !important; +} + +.pe-auto { + pointer-events: auto !important; +} + +.pe-none { + pointer-events: none !important; +} + +.us-auto { + -webkit-user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; +} + +.us-none { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/lists.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/lists.less.test.ts.snap new file mode 100644 index 0000000000..cbe2ef47d5 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/lists.less.test.ts.snap @@ -0,0 +1,55 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: lists > should output all atomic lists classes 1`] = ` +"ul, +ol { + padding: 0; + margin-left: 2.8em; +} + +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: decimal; +} + +.list-reset { + list-style: none; + margin: 0; + padding: 0; +} + +.list-ls-none { + list-style: none !important; +} + +.list-ls-disc { + list-style-type: disc !important; +} + +.list-ls-decimal { + list-style-type: decimal !important; +} + +.list-ls-unset { + list-style-type: unset !important; +} + +.list-inside { + list-style-position: inside !important; +} + +.list-outside { + list-style-position: outside !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/margin.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/margin.less.test.ts.snap new file mode 100644 index 0000000000..87b13d991e --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/margin.less.test.ts.snap @@ -0,0 +1,924 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: margin > should output all atomic margin classes 1`] = ` +".m-auto { + margin: auto !important; +} + +.m0 { + margin: var(--su0) !important; +} + +.m1 { + margin: var(--su1) !important; +} + +.m2 { + margin: var(--su2) !important; +} + +.m4 { + margin: var(--su4) !important; +} + +.m6 { + margin: var(--su6) !important; +} + +.m8 { + margin: var(--su8) !important; +} + +.m12 { + margin: var(--su12) !important; +} + +.m16 { + margin: var(--su16) !important; +} + +.m24 { + margin: var(--su24) !important; +} + +.m32 { + margin: var(--su32) !important; +} + +.m48 { + margin: var(--su48) !important; +} + +.m64 { + margin: var(--su64) !important; +} + +.m96 { + margin: var(--su96) !important; +} + +.m128 { + margin: var(--su128) !important; +} + +.mn1 { + margin: var(--sun1) !important; +} + +.mn2 { + margin: var(--sun2) !important; +} + +.mn4 { + margin: var(--sun4) !important; +} + +.mn6 { + margin: var(--sun6) !important; +} + +.mn8 { + margin: var(--sun8) !important; +} + +.mn12 { + margin: var(--sun12) !important; +} + +.mn16 { + margin: var(--sun16) !important; +} + +.mn24 { + margin: var(--sun24) !important; +} + +.mn32 { + margin: var(--sun32) !important; +} + +.mn48 { + margin: var(--sun48) !important; +} + +.mn64 { + margin: var(--sun64) !important; +} + +.mn96 { + margin: var(--sun96) !important; +} + +.mn128 { + margin: var(--sun128) !important; +} + +.m50 { + margin: 50% !important; +} + +.m100 { + margin: 100% !important; +} + +.mn50 { + margin: -50% !important; +} + +.mn100 { + margin: -100% !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mt0 { + margin-top: var(--su0) !important; +} + +.mt1 { + margin-top: var(--su1) !important; +} + +.mt2 { + margin-top: var(--su2) !important; +} + +.mt4 { + margin-top: var(--su4) !important; +} + +.mt6 { + margin-top: var(--su6) !important; +} + +.mt8 { + margin-top: var(--su8) !important; +} + +.mt12 { + margin-top: var(--su12) !important; +} + +.mt16 { + margin-top: var(--su16) !important; +} + +.mt24 { + margin-top: var(--su24) !important; +} + +.mt32 { + margin-top: var(--su32) !important; +} + +.mt48 { + margin-top: var(--su48) !important; +} + +.mt64 { + margin-top: var(--su64) !important; +} + +.mt96 { + margin-top: var(--su96) !important; +} + +.mt128 { + margin-top: var(--su128) !important; +} + +.mtn1 { + margin-top: var(--sun1) !important; +} + +.mtn2 { + margin-top: var(--sun2) !important; +} + +.mtn4 { + margin-top: var(--sun4) !important; +} + +.mtn6 { + margin-top: var(--sun6) !important; +} + +.mtn8 { + margin-top: var(--sun8) !important; +} + +.mtn12 { + margin-top: var(--sun12) !important; +} + +.mtn16 { + margin-top: var(--sun16) !important; +} + +.mtn24 { + margin-top: var(--sun24) !important; +} + +.mtn32 { + margin-top: var(--sun32) !important; +} + +.mtn48 { + margin-top: var(--sun48) !important; +} + +.mtn64 { + margin-top: var(--sun64) !important; +} + +.mtn96 { + margin-top: var(--sun96) !important; +} + +.mtn128 { + margin-top: var(--sun128) !important; +} + +.mt50 { + margin-top: 50% !important; +} + +.mt100 { + margin-top: 100% !important; +} + +.mtn50 { + margin-top: -50% !important; +} + +.mtn100 { + margin-top: -100% !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mr0 { + margin-right: var(--su0) !important; +} + +.mr1 { + margin-right: var(--su1) !important; +} + +.mr2 { + margin-right: var(--su2) !important; +} + +.mr4 { + margin-right: var(--su4) !important; +} + +.mr6 { + margin-right: var(--su6) !important; +} + +.mr8 { + margin-right: var(--su8) !important; +} + +.mr12 { + margin-right: var(--su12) !important; +} + +.mr16 { + margin-right: var(--su16) !important; +} + +.mr24 { + margin-right: var(--su24) !important; +} + +.mr32 { + margin-right: var(--su32) !important; +} + +.mr48 { + margin-right: var(--su48) !important; +} + +.mr64 { + margin-right: var(--su64) !important; +} + +.mr96 { + margin-right: var(--su96) !important; +} + +.mr128 { + margin-right: var(--su128) !important; +} + +.mrn1 { + margin-right: var(--sun1) !important; +} + +.mrn2 { + margin-right: var(--sun2) !important; +} + +.mrn4 { + margin-right: var(--sun4) !important; +} + +.mrn6 { + margin-right: var(--sun6) !important; +} + +.mrn8 { + margin-right: var(--sun8) !important; +} + +.mrn12 { + margin-right: var(--sun12) !important; +} + +.mrn16 { + margin-right: var(--sun16) !important; +} + +.mrn24 { + margin-right: var(--sun24) !important; +} + +.mrn32 { + margin-right: var(--sun32) !important; +} + +.mrn48 { + margin-right: var(--sun48) !important; +} + +.mrn64 { + margin-right: var(--sun64) !important; +} + +.mrn96 { + margin-right: var(--sun96) !important; +} + +.mrn128 { + margin-right: var(--sun128) !important; +} + +.mr50 { + margin-right: 50% !important; +} + +.mr100 { + margin-right: 100% !important; +} + +.mrn50 { + margin-right: -50% !important; +} + +.mrn100 { + margin-right: -100% !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.mb0 { + margin-bottom: var(--su0) !important; +} + +.mb1 { + margin-bottom: var(--su1) !important; +} + +.mb2 { + margin-bottom: var(--su2) !important; +} + +.mb4 { + margin-bottom: var(--su4) !important; +} + +.mb6 { + margin-bottom: var(--su6) !important; +} + +.mb8 { + margin-bottom: var(--su8) !important; +} + +.mb12 { + margin-bottom: var(--su12) !important; +} + +.mb16 { + margin-bottom: var(--su16) !important; +} + +.mb24 { + margin-bottom: var(--su24) !important; +} + +.mb32 { + margin-bottom: var(--su32) !important; +} + +.mb48 { + margin-bottom: var(--su48) !important; +} + +.mb64 { + margin-bottom: var(--su64) !important; +} + +.mb96 { + margin-bottom: var(--su96) !important; +} + +.mb128 { + margin-bottom: var(--su128) !important; +} + +.mbn1 { + margin-bottom: var(--sun1) !important; +} + +.mbn2 { + margin-bottom: var(--sun2) !important; +} + +.mbn4 { + margin-bottom: var(--sun4) !important; +} + +.mbn6 { + margin-bottom: var(--sun6) !important; +} + +.mbn8 { + margin-bottom: var(--sun8) !important; +} + +.mbn12 { + margin-bottom: var(--sun12) !important; +} + +.mbn16 { + margin-bottom: var(--sun16) !important; +} + +.mbn24 { + margin-bottom: var(--sun24) !important; +} + +.mbn32 { + margin-bottom: var(--sun32) !important; +} + +.mbn48 { + margin-bottom: var(--sun48) !important; +} + +.mbn64 { + margin-bottom: var(--sun64) !important; +} + +.mbn96 { + margin-bottom: var(--sun96) !important; +} + +.mbn128 { + margin-bottom: var(--sun128) !important; +} + +.mb50 { + margin-bottom: 50% !important; +} + +.mb100 { + margin-bottom: 100% !important; +} + +.mbn50 { + margin-bottom: -50% !important; +} + +.mbn100 { + margin-bottom: -100% !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.ml0 { + margin-left: var(--su0) !important; +} + +.ml1 { + margin-left: var(--su1) !important; +} + +.ml2 { + margin-left: var(--su2) !important; +} + +.ml4 { + margin-left: var(--su4) !important; +} + +.ml6 { + margin-left: var(--su6) !important; +} + +.ml8 { + margin-left: var(--su8) !important; +} + +.ml12 { + margin-left: var(--su12) !important; +} + +.ml16 { + margin-left: var(--su16) !important; +} + +.ml24 { + margin-left: var(--su24) !important; +} + +.ml32 { + margin-left: var(--su32) !important; +} + +.ml48 { + margin-left: var(--su48) !important; +} + +.ml64 { + margin-left: var(--su64) !important; +} + +.ml96 { + margin-left: var(--su96) !important; +} + +.ml128 { + margin-left: var(--su128) !important; +} + +.mln1 { + margin-left: var(--sun1) !important; +} + +.mln2 { + margin-left: var(--sun2) !important; +} + +.mln4 { + margin-left: var(--sun4) !important; +} + +.mln6 { + margin-left: var(--sun6) !important; +} + +.mln8 { + margin-left: var(--sun8) !important; +} + +.mln12 { + margin-left: var(--sun12) !important; +} + +.mln16 { + margin-left: var(--sun16) !important; +} + +.mln24 { + margin-left: var(--sun24) !important; +} + +.mln32 { + margin-left: var(--sun32) !important; +} + +.mln48 { + margin-left: var(--sun48) !important; +} + +.mln64 { + margin-left: var(--sun64) !important; +} + +.mln96 { + margin-left: var(--sun96) !important; +} + +.mln128 { + margin-left: var(--sun128) !important; +} + +.ml50 { + margin-left: 50% !important; +} + +.ml100 { + margin-left: 100% !important; +} + +.mln50 { + margin-left: -50% !important; +} + +.mln100 { + margin-left: -100% !important; +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.mx0 { + margin-left: var(--su0) !important; + margin-right: var(--su0) !important; +} + +.mx1 { + margin-left: var(--su1) !important; + margin-right: var(--su1) !important; +} + +.mx2 { + margin-left: var(--su2) !important; + margin-right: var(--su2) !important; +} + +.mx4 { + margin-left: var(--su4) !important; + margin-right: var(--su4) !important; +} + +.mx6 { + margin-left: var(--su6) !important; + margin-right: var(--su6) !important; +} + +.mx8 { + margin-left: var(--su8) !important; + margin-right: var(--su8) !important; +} + +.mx12 { + margin-left: var(--su12) !important; + margin-right: var(--su12) !important; +} + +.mx16 { + margin-left: var(--su16) !important; + margin-right: var(--su16) !important; +} + +.mx24 { + margin-left: var(--su24) !important; + margin-right: var(--su24) !important; +} + +.mx32 { + margin-left: var(--su32) !important; + margin-right: var(--su32) !important; +} + +.mx48 { + margin-left: var(--su48) !important; + margin-right: var(--su48) !important; +} + +.mx64 { + margin-left: var(--su64) !important; + margin-right: var(--su64) !important; +} + +.mx96 { + margin-left: var(--su96) !important; + margin-right: var(--su96) !important; +} + +.mx128 { + margin-left: var(--su128) !important; + margin-right: var(--su128) !important; +} + +.mxn1 { + margin-left: var(--sun1) !important; + margin-right: var(--sun1) !important; +} + +.mxn2 { + margin-left: var(--sun2) !important; + margin-right: var(--sun2) !important; +} + +.mxn4 { + margin-left: var(--sun4) !important; + margin-right: var(--sun4) !important; +} + +.mxn6 { + margin-left: var(--sun6) !important; + margin-right: var(--sun6) !important; +} + +.mxn8 { + margin-left: var(--sun8) !important; + margin-right: var(--sun8) !important; +} + +.mxn12 { + margin-left: var(--sun12) !important; + margin-right: var(--sun12) !important; +} + +.mxn16 { + margin-left: var(--sun16) !important; + margin-right: var(--sun16) !important; +} + +.mxn24 { + margin-left: var(--sun24) !important; + margin-right: var(--sun24) !important; +} + +.mxn32 { + margin-left: var(--sun32) !important; + margin-right: var(--sun32) !important; +} + +.mxn48 { + margin-left: var(--sun48) !important; + margin-right: var(--sun48) !important; +} + +.mxn64 { + margin-left: var(--sun64) !important; + margin-right: var(--sun64) !important; +} + +.mxn96 { + margin-left: var(--sun96) !important; + margin-right: var(--sun96) !important; +} + +.mxn128 { + margin-left: var(--sun128) !important; + margin-right: var(--sun128) !important; +} + +.my0 { + margin-top: var(--su0) !important; + margin-bottom: var(--su0) !important; +} + +.my1 { + margin-top: var(--su1) !important; + margin-bottom: var(--su1) !important; +} + +.my2 { + margin-top: var(--su2) !important; + margin-bottom: var(--su2) !important; +} + +.my4 { + margin-top: var(--su4) !important; + margin-bottom: var(--su4) !important; +} + +.my6 { + margin-top: var(--su6) !important; + margin-bottom: var(--su6) !important; +} + +.my8 { + margin-top: var(--su8) !important; + margin-bottom: var(--su8) !important; +} + +.my12 { + margin-top: var(--su12) !important; + margin-bottom: var(--su12) !important; +} + +.my16 { + margin-top: var(--su16) !important; + margin-bottom: var(--su16) !important; +} + +.my24 { + margin-top: var(--su24) !important; + margin-bottom: var(--su24) !important; +} + +.my32 { + margin-top: var(--su32) !important; + margin-bottom: var(--su32) !important; +} + +.my48 { + margin-top: var(--su48) !important; + margin-bottom: var(--su48) !important; +} + +.my64 { + margin-top: var(--su64) !important; + margin-bottom: var(--su64) !important; +} + +.my96 { + margin-top: var(--su96) !important; + margin-bottom: var(--su96) !important; +} + +.my128 { + margin-top: var(--su128) !important; + margin-bottom: var(--su128) !important; +} + +.myn1 { + margin-top: var(--sun1) !important; + margin-bottom: var(--sun1) !important; +} + +.myn2 { + margin-top: var(--sun2) !important; + margin-bottom: var(--sun2) !important; +} + +.myn4 { + margin-top: var(--sun4) !important; + margin-bottom: var(--sun4) !important; +} + +.myn6 { + margin-top: var(--sun6) !important; + margin-bottom: var(--sun6) !important; +} + +.myn8 { + margin-top: var(--sun8) !important; + margin-bottom: var(--sun8) !important; +} + +.myn12 { + margin-top: var(--sun12) !important; + margin-bottom: var(--sun12) !important; +} + +.myn16 { + margin-top: var(--sun16) !important; + margin-bottom: var(--sun16) !important; +} + +.myn24 { + margin-top: var(--sun24) !important; + margin-bottom: var(--sun24) !important; +} + +.myn32 { + margin-top: var(--sun32) !important; + margin-bottom: var(--sun32) !important; +} + +.myn48 { + margin-top: var(--sun48) !important; + margin-bottom: var(--sun48) !important; +} + +.myn64 { + margin-top: var(--sun64) !important; + margin-bottom: var(--sun64) !important; +} + +.myn96 { + margin-top: var(--sun96) !important; + margin-bottom: var(--sun96) !important; +} + +.myn128 { + margin-top: var(--sun128) !important; + margin-bottom: var(--sun128) !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap deleted file mode 100644 index 22e0fac2f5..0000000000 --- a/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap +++ /dev/null @@ -1,839 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`atomic: misc > should output all atomic css classes 1`] = ` -".d-block { - display: block !important; -} - -.d-flex { - display: flex !important; -} - -.d-inline-flex { - display: inline-flex !important; -} - -.d-grid { - display: grid !important; -} - -.d-inline-grid { - display: inline-grid !important; -} - -.d-inline { - display: inline !important; -} - -.d-inline-block { - display: inline-block !important; -} - -.d-table { - display: table !important; -} - -.d-table-cell { - display: table-cell !important; -} - -.d-none { - display: none !important; -} - -.d-unset { - display: unset !important; -} - -.bg-bottom { - background-position: bottom !important; -} - -.bg-center { - background-position: center !important; -} - -.bg-left { - background-position: left !important; -} - -.bg-left-bottom { - background-position: left bottom !important; -} - -.bg-left-top { - background-position: left top !important; -} - -.bg-right { - background-position: right !important; -} - -.bg-right-bottom { - background-position: right bottom !important; -} - -.bg-right-top { - background-position: right top !important; -} - -.bg-top { - background-position: top !important; -} - -.bg-repeat { - background-repeat: repeat !important; -} - -.bg-no-repeat { - background-repeat: no-repeat !important; -} - -.bg-repeat-x { - background-repeat: repeat-x !important; -} - -.bg-repeat-y { - background-repeat: repeat-y !important; -} - -.bg-auto { - background-size: auto !important; -} - -.bg-cover { - background-size: cover !important; -} - -.bg-contain { - background-size: contain !important; -} - -.bg-fixed { - background-attachment: fixed !important; -} - -.bg-local { - background-attachment: local !important; -} - -.bg-scroll { - background-attachment: scroll !important; -} - -.bg-image-none { - background-image: none !important; -} - -.bg-loading { - animation: loadingBgAnimation 1.5s ease-out infinite; - animation-delay: 1ms; -} - -@keyframes loadingBgAnimation { - 0% { - background-color: var(--black-150); - opacity: 1; - } - - 50% { - background-color: var(--black-100); - opacity: 0.7; - } - - 100% { - background-color: var(--black-150); - opacity: 1; - } -} - -.bg-confetti-animated { - background-repeat: repeat-x; - background-position: top -10px center; - background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A"); -} - -@media (prefers-reduced-motion) { - .bg-confetti-animated { - background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); - } -} - -.bg-confetti-static { - background-repeat: repeat-x; - background-position: top -10px center; - background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); -} - -.focus, -.f\\:focus:focus, -.f\\:focus:focus-within { - box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme); - outline: var(--su2) solid transparent !important; -} - -.focus-inset, -.f\\:focus-inset:focus, -.f\\:focus-inset:focus-within { - box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral); - outline: var(--su2) solid transparent !important; -} - -.focus-bordered, -.f\\:focus-bordered:focus, -.f\\:focus-bordered:focus-within { - border-color: var(--focus-neutral) !important; - box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); - outline: var(--su2) solid transparent !important; -} - -.focus-inset-bordered, -.f\\:focus-inset-bordered:focus, -.f\\:focus-inset-bordered:focus-within { - border-color: var(--focus-theme) !important; - box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral); - outline: var(--su2) solid transparent !important; -} - -.of-contain { - object-fit: contain !important; -} - -.of-cover { - object-fit: cover !important; -} - -.of-fill { - object-fit: fill !important; -} - -.of-none { - object-fit: none !important; -} - -.of-scale-down { - object-fit: scale-down !important; -} - -.op-center { - object-position: center !important; -} - -.c-auto { - cursor: auto !important; -} - -.c-default { - cursor: default !important; -} - -.c-pointer { - cursor: pointer !important; -} - -.c-text { - cursor: text !important; -} - -.c-wait { - cursor: wait !important; -} - -.c-move { - cursor: move !important; -} - -.c-not-allowed { - cursor: not-allowed !important; -} - -.c-help { - cursor: help !important; -} - -.pe-auto { - pointer-events: auto !important; -} - -.pe-none { - pointer-events: none !important; -} - -.us-auto { - -webkit-user-select: auto !important; - -moz-user-select: auto !important; - -ms-user-select: auto !important; - user-select: auto !important; -} - -.us-none { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; -} - -.v-visible { - visibility: visible !important; -} - -.v-hidden { - visibility: hidden !important; -} - -.v-visible-sr { - border: 0; - /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ - clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); - clip-path: inset(50%); - height: var(--su1); - margin: var(--sun1); - overflow: hidden; - padding: 0; - position: absolute; - width: var(--su1); - overflow-wrap: normal; -} - -.float-left { - float: left !important; -} - -.float-right { - float: right !important; -} - -.float-none { - float: none !important; -} - -.clearfix:before, -.clearfix:after { - content: ""; - display: table; -} - -.clearfix:after { - clear: both; -} - -.clear-left { - clear: left !important; -} - -.clear-right { - clear: right !important; -} - -.clear-both { - clear: both !important; -} - -.clear-none { - clear: none !important; -} - -.box-content { - box-sizing: content-box !important; -} - -.box-border { - box-sizing: border-box !important; -} - -.box-unset { - box-sizing: unset !important; -} - -.va-baseline { - vertical-align: baseline !important; -} - -.va-bottom { - vertical-align: bottom !important; -} - -.va-middle { - vertical-align: middle !important; -} - -.va-sub { - vertical-align: sub !important; -} - -.va-super { - vertical-align: super !important; -} - -.va-text-bottom { - vertical-align: text-bottom !important; -} - -.va-text-top { - vertical-align: text-top !important; -} - -.va-top { - vertical-align: top !important; -} - -.va-unset { - vertical-align: unset !important; -} - -.ps-absolute { - position: absolute !important; -} - -.ps-fixed { - position: fixed !important; -} - -.ps-relative { - position: relative !important; -} - -.ps-static { - position: static !important; -} - -.ps-sticky { - position: sticky !important; -} - -.ps-unset { - position: unset !important; -} - -.overflow-auto { - overflow: auto !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-auto::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-auto::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-x-auto { - overflow-x: auto !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-x-auto::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-x-auto::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-y-auto { - overflow-y: auto !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-y-auto::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-auto::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-auto::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-y-auto::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-hidden { - overflow: hidden !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-hidden::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-hidden::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-x-hidden { - overflow-x: hidden !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-x-hidden::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-x-hidden::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-y-hidden { - overflow-y: hidden !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-y-hidden::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-hidden::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-hidden::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-y-hidden::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-scroll { - overflow: scroll !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-scroll::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-scroll::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-x-scroll { - overflow-x: scroll !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-x-scroll::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-x-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-x-scroll::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-y-scroll { - overflow-y: scroll !important; - scrollbar-color: var(--scrollbar) transparent; -} - -.overflow-y-scroll::-webkit-scrollbar { - width: calc(var(--su12) - var(--su2)); - height: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-scroll::-webkit-scrollbar-track { - border-radius: calc(var(--su12) - var(--su2)); - background-color: transparent; -} - -.overflow-y-scroll::-webkit-scrollbar-thumb { - border-radius: calc(var(--su12) - var(--su2)); - background-color: var(--scrollbar); -} - -.overflow-y-scroll::-webkit-scrollbar-corner { - background-color: transparent; - border-color: transparent; -} - -.overflow-visible { - overflow: visible !important; -} - -.o0 { - opacity: 0 !important; -} - -.h\\:o0:hover { - opacity: 0 !important; -} - -.o5 { - opacity: 0.05 !important; -} - -.h\\:o5:hover { - opacity: 0.05 !important; -} - -.o10 { - opacity: 0.1 !important; -} - -.o20 { - opacity: 0.2 !important; -} - -.o30 { - opacity: 0.3 !important; -} - -.o40 { - opacity: 0.4 !important; -} - -.o50 { - opacity: 0.5 !important; -} - -.h\\:o50:hover { - opacity: 0.5 !important; -} - -.o60 { - opacity: 0.6 !important; -} - -.o70 { - opacity: 0.7 !important; -} - -.o80 { - opacity: 0.8 !important; -} - -.h\\:o80:hover { - opacity: 0.8 !important; -} - -.o90 { - opacity: 0.9 !important; -} - -.o100 { - opacity: 1 !important; -} - -.h\\:o100:hover { - opacity: 1 !important; -} - -.f\\:o100:focus, -.f\\:o100:focus-within { - opacity: 1 !important; -} - -.z-hide { - z-index: var(--zi-hide) !important; -} - -.z-base { - z-index: var(--zi-base) !important; -} - -.z-active { - z-index: var(--zi-active) !important; -} - -.z-selected { - z-index: var(--zi-selected) !important; -} - -.z-dropdown { - z-index: var(--zi-dropdown) !important; -} - -.z-popover { - z-index: var(--zi-popovers) !important; -} - -.z-tooltip { - z-index: var(--zi-tooltips) !important; -} - -.z-banner { - z-index: var(--zi-banners) !important; -} - -.z-nav { - z-index: var(--zi-navigation) !important; -} - -.z-nav-fixed { - z-index: var(--zi-navigation-fixed) !important; -} - -.z-modal { - z-index: var(--zi-modals) !important; -} - -.z-modal-bg { - z-index: var(--zi-modals-background) !important; -} - -.outline-none { - outline: 0 !important; -} - -.outline-ring { - border-color: var(--focus-neutral) !important; - box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); - outline: var(--su2) solid transparent !important; -} - -.f\\:outline-ring:focus, -.f\\:outline-ring:focus-within { - border-color: var(--focus-neutral) !important; - box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); - outline: var(--su2) solid transparent !important; -} - -.fill-current { - fill: currentColor !important; -} - -.stroke-current { - stroke: currentColor !important; -} - -.t { - transition-duration: var(--transition-time); - transition-property: all; - transition-timing-function: var(--te-ease-in); - transition-delay: 0s; -} - -.t-slow { - transition-duration: 0.25s !important; -} - -.t-fast { - transition-duration: 0.05s !important; -} - -.t-unset { - transition-property: none !important; -} - -.t-bg { - transition-property: background-color !important; -} - -.t-opacity { - transition-property: opacity !important; -} - -.t-shadow { - transition-property: box-shadow !important; -} - -.t-delay { - transition-delay: 0.25s !important; -} - -.t-delay-unset { - transition-delay: 0s !important; -} - -.tl-fixed { - table-layout: fixed !important; -} - -.tl-auto { - table-layout: auto !important; -} -" -`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/object-fit.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/object-fit.less.test.ts.snap new file mode 100644 index 0000000000..2239a11d1a --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/object-fit.less.test.ts.snap @@ -0,0 +1,28 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: object-fit > should output all atomic object-fit classes 1`] = ` +".of-contain { + object-fit: contain !important; +} + +.of-cover { + object-fit: cover !important; +} + +.of-fill { + object-fit: fill !important; +} + +.of-none { + object-fit: none !important; +} + +.of-scale-down { + object-fit: scale-down !important; +} + +.op-center { + object-position: center !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/opacity.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/opacity.less.test.ts.snap new file mode 100644 index 0000000000..b52f8c6608 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/opacity.less.test.ts.snap @@ -0,0 +1,59 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: opacity > should output all atomic opacity classes 1`] = ` +".o0, +.h\\:o0:hover { + opacity: 0 !important; +} + +.o5, +.h\\:o5:hover { + opacity: 0.05 !important; +} + +.o10 { + opacity: 0.1 !important; +} + +.o20 { + opacity: 0.2 !important; +} + +.o30 { + opacity: 0.3 !important; +} + +.o40 { + opacity: 0.4 !important; +} + +.o50, +.h\\:o50:hover { + opacity: 0.5 !important; +} + +.o60 { + opacity: 0.6 !important; +} + +.o70 { + opacity: 0.7 !important; +} + +.o80, +.h\\:o80:hover { + opacity: 0.8 !important; +} + +.o90 { + opacity: 0.9 !important; +} + +.o100, +.h\\:o100:hover, +.f\\:o100:focus, +.f\\:o100:focus-within { + opacity: 1 !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/outline.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/outline.less.test.ts.snap new file mode 100644 index 0000000000..939fd323b0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/outline.less.test.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: outline > should output all atomic outline classes 1`] = ` +".outline-none { + outline: 0 !important; +} + +.outline-ring { + border-color: var(--focus-neutral) !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; +} + +.f\\:outline-ring:focus, +.f\\:outline-ring:focus-within { + border-color: var(--focus-neutral) !important; + box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme); + outline: var(--su2) solid transparent !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/overflow.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/overflow.less.test.ts.snap new file mode 100644 index 0000000000..ce53e957d1 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/overflow.less.test.ts.snap @@ -0,0 +1,242 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: overflow > should output all atomic overflow classes 1`] = ` +".overflow-auto { + overflow: auto !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-auto::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-auto::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-auto::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-auto::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-hidden { + overflow: hidden !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-hidden::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-hidden::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-hidden::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-hidden::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-scroll { + overflow: scroll !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-scroll::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-scroll::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-scroll::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-scroll::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-visible { + overflow: visible !important; +} + +.overflow-x-auto { + overflow-x: auto !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-x-auto::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-auto::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-auto::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-x-auto::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-x-hidden { + overflow-x: hidden !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-x-hidden::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-hidden::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-hidden::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-x-hidden::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-x-scroll { + overflow-x: scroll !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-x-scroll::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-scroll::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-x-scroll::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-x-scroll::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-y-auto { + overflow-y: auto !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-y-auto::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-auto::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-auto::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-y-auto::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-y-hidden { + overflow-y: hidden !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-y-hidden::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-hidden::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-hidden::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-y-hidden::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} + +.overflow-y-scroll { + overflow-y: scroll !important; + scrollbar-color: var(--scrollbar) transparent; +} + +.overflow-y-scroll::-webkit-scrollbar { + width: calc(var(--su12) - var(--su2)); + height: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-scroll::-webkit-scrollbar-track { + border-radius: calc(var(--su12) - var(--su2)); + background-color: transparent; +} + +.overflow-y-scroll::-webkit-scrollbar-thumb { + border-radius: calc(var(--su12) - var(--su2)); + background-color: var(--scrollbar); +} + +.overflow-y-scroll::-webkit-scrollbar-corner { + background-color: transparent; + border-color: transparent; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/padding.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/padding.less.test.ts.snap new file mode 100644 index 0000000000..9ddf35c9ee --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/padding.less.test.ts.snap @@ -0,0 +1,424 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: padding > should output all atomic padding classes 1`] = ` +".p0 { + padding: var(--su0) !important; +} + +.p1 { + padding: var(--su1) !important; +} + +.p2 { + padding: var(--su2) !important; +} + +.p4 { + padding: var(--su4) !important; +} + +.p6 { + padding: var(--su6) !important; +} + +.p8 { + padding: var(--su8) !important; +} + +.p12 { + padding: var(--su12) !important; +} + +.p16 { + padding: var(--su16) !important; +} + +.p24 { + padding: var(--su24) !important; +} + +.p32 { + padding: var(--su32) !important; +} + +.p48 { + padding: var(--su48) !important; +} + +.p64 { + padding: var(--su64) !important; +} + +.p96 { + padding: var(--su96) !important; +} + +.p128 { + padding: var(--su128) !important; +} + +.pt0 { + padding-top: var(--su0) !important; +} + +.pt1 { + padding-top: var(--su1) !important; +} + +.pt2 { + padding-top: var(--su2) !important; +} + +.pt4 { + padding-top: var(--su4) !important; +} + +.pt6 { + padding-top: var(--su6) !important; +} + +.pt8 { + padding-top: var(--su8) !important; +} + +.pt12 { + padding-top: var(--su12) !important; +} + +.pt16 { + padding-top: var(--su16) !important; +} + +.pt24 { + padding-top: var(--su24) !important; +} + +.pt32 { + padding-top: var(--su32) !important; +} + +.pt48 { + padding-top: var(--su48) !important; +} + +.pt64 { + padding-top: var(--su64) !important; +} + +.pt96 { + padding-top: var(--su96) !important; +} + +.pt128 { + padding-top: var(--su128) !important; +} + +.pr0 { + padding-right: var(--su0) !important; +} + +.pr1 { + padding-right: var(--su1) !important; +} + +.pr2 { + padding-right: var(--su2) !important; +} + +.pr4 { + padding-right: var(--su4) !important; +} + +.pr6 { + padding-right: var(--su6) !important; +} + +.pr8 { + padding-right: var(--su8) !important; +} + +.pr12 { + padding-right: var(--su12) !important; +} + +.pr16 { + padding-right: var(--su16) !important; +} + +.pr24 { + padding-right: var(--su24) !important; +} + +.pr32 { + padding-right: var(--su32) !important; +} + +.pr48 { + padding-right: var(--su48) !important; +} + +.pr64 { + padding-right: var(--su64) !important; +} + +.pr96 { + padding-right: var(--su96) !important; +} + +.pr128 { + padding-right: var(--su128) !important; +} + +.pb0 { + padding-bottom: var(--su0) !important; +} + +.pb1 { + padding-bottom: var(--su1) !important; +} + +.pb2 { + padding-bottom: var(--su2) !important; +} + +.pb4 { + padding-bottom: var(--su4) !important; +} + +.pb6 { + padding-bottom: var(--su6) !important; +} + +.pb8 { + padding-bottom: var(--su8) !important; +} + +.pb12 { + padding-bottom: var(--su12) !important; +} + +.pb16 { + padding-bottom: var(--su16) !important; +} + +.pb24 { + padding-bottom: var(--su24) !important; +} + +.pb32 { + padding-bottom: var(--su32) !important; +} + +.pb48 { + padding-bottom: var(--su48) !important; +} + +.pb64 { + padding-bottom: var(--su64) !important; +} + +.pb96 { + padding-bottom: var(--su96) !important; +} + +.pb128 { + padding-bottom: var(--su128) !important; +} + +.pl0 { + padding-left: var(--su0) !important; +} + +.pl1 { + padding-left: var(--su1) !important; +} + +.pl2 { + padding-left: var(--su2) !important; +} + +.pl4 { + padding-left: var(--su4) !important; +} + +.pl6 { + padding-left: var(--su6) !important; +} + +.pl8 { + padding-left: var(--su8) !important; +} + +.pl12 { + padding-left: var(--su12) !important; +} + +.pl16 { + padding-left: var(--su16) !important; +} + +.pl24 { + padding-left: var(--su24) !important; +} + +.pl32 { + padding-left: var(--su32) !important; +} + +.pl48 { + padding-left: var(--su48) !important; +} + +.pl64 { + padding-left: var(--su64) !important; +} + +.pl96 { + padding-left: var(--su96) !important; +} + +.pl128 { + padding-left: var(--su128) !important; +} + +.px0 { + padding-left: var(--su0) !important; + padding-right: var(--su0) !important; +} + +.px1 { + padding-left: var(--su1) !important; + padding-right: var(--su1) !important; +} + +.px2 { + padding-left: var(--su2) !important; + padding-right: var(--su2) !important; +} + +.px4 { + padding-left: var(--su4) !important; + padding-right: var(--su4) !important; +} + +.px6 { + padding-left: var(--su6) !important; + padding-right: var(--su6) !important; +} + +.px8 { + padding-left: var(--su8) !important; + padding-right: var(--su8) !important; +} + +.px12 { + padding-left: var(--su12) !important; + padding-right: var(--su12) !important; +} + +.px16 { + padding-left: var(--su16) !important; + padding-right: var(--su16) !important; +} + +.px24 { + padding-left: var(--su24) !important; + padding-right: var(--su24) !important; +} + +.px32 { + padding-left: var(--su32) !important; + padding-right: var(--su32) !important; +} + +.px48 { + padding-left: var(--su48) !important; + padding-right: var(--su48) !important; +} + +.px64 { + padding-left: var(--su64) !important; + padding-right: var(--su64) !important; +} + +.px96 { + padding-left: var(--su96) !important; + padding-right: var(--su96) !important; +} + +.px128 { + padding-left: var(--su128) !important; + padding-right: var(--su128) !important; +} + +.py0 { + padding-top: var(--su0) !important; + padding-bottom: var(--su0) !important; +} + +.py1 { + padding-top: var(--su1) !important; + padding-bottom: var(--su1) !important; +} + +.py2 { + padding-top: var(--su2) !important; + padding-bottom: var(--su2) !important; +} + +.py4 { + padding-top: var(--su4) !important; + padding-bottom: var(--su4) !important; +} + +.py6 { + padding-top: var(--su6) !important; + padding-bottom: var(--su6) !important; +} + +.py8 { + padding-top: var(--su8) !important; + padding-bottom: var(--su8) !important; +} + +.py12 { + padding-top: var(--su12) !important; + padding-bottom: var(--su12) !important; +} + +.py16 { + padding-top: var(--su16) !important; + padding-bottom: var(--su16) !important; +} + +.py24 { + padding-top: var(--su24) !important; + padding-bottom: var(--su24) !important; +} + +.py32 { + padding-top: var(--su32) !important; + padding-bottom: var(--su32) !important; +} + +.py48 { + padding-top: var(--su48) !important; + padding-bottom: var(--su48) !important; +} + +.py64 { + padding-top: var(--su64) !important; + padding-bottom: var(--su64) !important; +} + +.py96 { + padding-top: var(--su96) !important; + padding-bottom: var(--su96) !important; +} + +.py128 { + padding-top: var(--su128) !important; + padding-bottom: var(--su128) !important; +} +" +`; 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 145c43c58f..9c79e876b5 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,7 +1,31 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`atomic: positioning > should output all atomic positioning classes 1`] = ` -".i0 { +".ps-absolute { + position: absolute !important; +} + +.ps-fixed { + position: fixed !important; +} + +.ps-relative { + position: relative !important; +} + +.ps-static { + position: static !important; +} + +.ps-sticky { + position: sticky !important; +} + +.ps-unset { + position: unset !important; +} + +.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 c489da47e6..bbf487168f 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 spacing classes 1`] = ` +exports[`atomic: spacing > should output all atomic spacing classes 1`] = ` ".m-auto { margin: auto !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/transitions.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/transitions.less.test.ts.snap new file mode 100644 index 0000000000..6f4570d89a --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/transitions.less.test.ts.snap @@ -0,0 +1,43 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: transitions > should output all atomic transitions classes 1`] = ` +".t { + transition-duration: var(--transition-time); + transition-property: all; + transition-timing-function: var(--te-ease-in); + transition-delay: 0s; +} + +.t-slow { + transition-duration: 0.25s !important; +} + +.t-fast { + transition-duration: 0.05s !important; +} + +.t-unset { + transition-property: none !important; +} + +.t-bg { + transition-property: background-color !important; +} + +.t-opacity { + transition-property: opacity !important; +} + +.t-shadow { + transition-property: box-shadow !important; +} + +.t-delay { + transition-delay: 0.25s !important; +} + +.t-delay-unset { + transition-delay: 0s !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/truncation.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/truncation.less.test.ts.snap new file mode 100644 index 0000000000..2849b9ea97 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/truncation.less.test.ts.snap @@ -0,0 +1,65 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: truncation > should output all atomic truncation classes 1`] = ` +".truncate { + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis !important; + white-space: nowrap; +} + +.v-truncate1 { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.v-truncate2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.v-truncate3 { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.v-truncate4 { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.v-truncate5 { + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.v-truncate-fade { + overflow: hidden; + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); + max-height: calc(var(--lh-md) * 12em); +} + +.v-truncate-fade.v-truncate-fade__sm { + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); + max-height: calc(var(--lh-md) * 6em); +} + +.v-truncate-fade.v-truncate-fade__lg { + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); + max-height: calc(var(--lh-md) * 24em); +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/typography.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/typography.less.test.ts.snap new file mode 100644 index 0000000000..1190d9ce75 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/typography.less.test.ts.snap @@ -0,0 +1,333 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: typography > should output all atomic typography classes 1`] = ` +"h1, +h2, +h3, +h4, +h5, +h6, +p { + margin-top: 0; +} + +.fs-display4 { + font-size: var(--fs-display4) !important; + line-height: 1.18; +} + +.fs-display3 { + font-size: var(--fs-display3) !important; + line-height: 1.2; +} + +.fs-display2 { + font-size: var(--fs-display2) !important; + line-height: 1.28; +} + +.fs-display1 { + font-size: var(--fs-display1) !important; + line-height: 1.34; +} + +.fs-headline2 { + font-size: var(--fs-headline2) !important; + line-height: 1.4; +} + +.fs-headline1 { + font-size: var(--fs-headline1) !important; + line-height: 1.4; +} + +.fs-title { + font-size: var(--fs-title) !important; + line-height: 1.4; +} + +.fs-subheading { + font-size: var(--fs-subheading) !important; + line-height: 1.4; +} + +.fs-body3 { + font-size: var(--fs-body3) !important; + line-height: 1.4; +} + +.fs-body2 { + font-size: var(--fs-body2) !important; + line-height: 1.4; +} + +.fs-body1 { + font-size: var(--fs-body1) !important; + line-height: 1.4; +} + +.fs-caption { + font-size: var(--fs-caption) !important; + line-height: 1.4; +} + +.fs-fine { + font-size: var(--fs-fine) !important; + line-height: 1.36; +} + +@media (max-width: 48.75rem) { + html .fs-display4 { + font-size: calc(var(--fs-display4) * 0.43) !important; + } + + html .fs-display3 { + font-size: calc(var(--fs-display3) * 0.5139) !important; + } + + html .fs-display2 { + font-size: calc(var(--fs-display2) * 0.5862) !important; + } + + html .fs-display1 { + font-size: calc(var(--fs-display1) * 0.6304) !important; + } + + html .fs-headline2 { + font-size: calc(var(--fs-headline2) * 0.7224) !important; + } + + html .fs-headline1 { + font-size: calc(var(--fs-headline1) * 0.8215) !important; + } + + html .fs-title { + font-size: calc(var(--fs-title) * 0.9094) !important; + } + + html .fs-subheading { + font-size: calc(var(--fs-subheading) * 0.8998) !important; + } + + html .fs-body3 { + font-size: calc(var(--fs-body3) * 0.8888) !important; + } + + html .fs-body2 { + font-size: calc(var(--fs-body2) * 0.9374) !important; + } +} + +.lh-xs { + line-height: var(--lh-xs) !important; +} + +.lh-sm { + line-height: var(--lh-sm) !important; +} + +.lh-md { + line-height: var(--lh-md) !important; +} + +.lh-lg { + line-height: var(--lh-lg) !important; +} + +.lh-xl { + line-height: var(--lh-xl) !important; +} + +.lh-xxl { + line-height: var(--lh-xxl) !important; +} + +.lh-unset { + line-height: initial !important; +} + +.ff-sans { + font-family: var(--ff-sans) !important; +} + +.ff-serif { + font-family: var(--ff-serif) !important; +} + +.ff-mono { + font-family: var(--ff-mono) !important; +} + +.ff-inherit { + font-family: inherit !important; +} + +.fw-normal { + font-weight: 400 !important; +} + +.fw-medium { + font-weight: 500 !important; +} + +.fw-bold { + font-weight: 600 !important; +} + +.fs-normal { + font-style: normal !important; +} + +.fs-italic { + font-style: italic !important; +} + +.fs-unset { + font-style: unset !important; +} + +.ta-left { + text-align: left !important; +} + +.ta-center { + text-align: center !important; +} + +.ta-right { + text-align: right !important; +} + +.ta-justify { + text-align: justify !important; +} + +.ta-unset { + text-align: unset !important; +} + +.td-none { + text-decoration: none !important; +} + +.td-underline { + text-decoration: underline !important; +} + +.tt-capitalize { + text-transform: capitalize !important; +} + +.tt-lowercase { + text-transform: lowercase !important; +} + +.tt-uppercase { + text-transform: uppercase !important; +} + +.tt-none { + text-transform: none !important; +} + +.tt-unset { + text-transform: unset !important; +} + +.ws-normal { + white-space: normal !important; +} + +.ws-nowrap { + white-space: nowrap !important; +} + +.ws-pre { + white-space: pre !important; +} + +.ws-pre-wrap { + white-space: pre-wrap !important; +} + +.ws-pre-line { + white-space: pre-line !important; +} + +.ws-unset { + white-space: unset !important; +} + +.wb-normal { + word-break: normal !important; +} + +.wb-break-all { + word-break: break-all !important; +} + +.wb-keep-all { + word-break: keep-all !important; +} + +.wb-inherit { + word-break: inherit !important; +} + +.wb-initial { + word-break: initial !important; +} + +.wb-unset { + word-break: unset !important; +} + +.ow-normal { + overflow-wrap: normal !important; +} + +.ow-anywhere { + overflow-wrap: anywhere !important; +} + +.ow-break-word { + overflow-wrap: break-word !important; +} + +.ow-inherit { + overflow-wrap: inherit !important; +} + +.ow-initial { + overflow-wrap: initial !important; +} + +.ow-unset { + overflow-wrap: unset !important; +} + +.hyphens-none { + hyphens: none !important; +} + +.hyphens-auto { + -ms-hyphens: auto !important; + -webkit-hyphens: auto !important; + hyphens: auto !important; +} + +.hyphens-unset { + hyphens: unset !important; +} + +.break-word { + /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ + word-break: break-word !important; + overflow-wrap: break-word !important; + -webkit-hyphens: auto !important; + -moz-hyphens: auto !important; + -ms-hyphens: auto !important; + hyphens: auto !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/vertical-alignment.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/vertical-alignment.less.test.ts.snap new file mode 100644 index 0000000000..c011fe7e73 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/vertical-alignment.less.test.ts.snap @@ -0,0 +1,40 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: vertical-alignment > should output all atomic vertical-alignment classes 1`] = ` +".va-baseline { + vertical-align: baseline !important; +} + +.va-bottom { + vertical-align: bottom !important; +} + +.va-middle { + vertical-align: middle !important; +} + +.va-sub { + vertical-align: sub !important; +} + +.va-super { + vertical-align: super !important; +} + +.va-text-bottom { + vertical-align: text-bottom !important; +} + +.va-text-top { + vertical-align: text-top !important; +} + +.va-top { + vertical-align: top !important; +} + +.va-unset { + vertical-align: unset !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/visibility.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/visibility.less.test.ts.snap new file mode 100644 index 0000000000..94b6e10970 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/visibility.less.test.ts.snap @@ -0,0 +1,26 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: visibility > should output all atomic visibility classes 1`] = ` +".v-visible { + visibility: visible !important; +} + +.v-hidden { + visibility: hidden !important; +} + +.v-visible-sr { + border: 0; + /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ + clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); + clip-path: inset(50%); + height: var(--su1); + margin: var(--sun1); + overflow: hidden; + padding: 0; + position: absolute; + width: var(--su1); + overflow-wrap: normal; +} +" +`; 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 6b5582d3c3..563d526b2e 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 classes 1`] = ` +exports[`atomic: width > should output all atomic width classes 1`] = ` ".w0 { width: var(--su0) !important; } diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/z-index.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/z-index.less.test.ts.snap new file mode 100644 index 0000000000..b0b7fd9d26 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/__snapshots__/z-index.less.test.ts.snap @@ -0,0 +1,52 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`atomic: z-index > should output all atomic z-index classes 1`] = ` +".z-hide { + z-index: var(--zi-hide) !important; +} + +.z-base { + z-index: var(--zi-base) !important; +} + +.z-active { + z-index: var(--zi-active) !important; +} + +.z-selected { + z-index: var(--zi-selected) !important; +} + +.z-dropdown { + z-index: var(--zi-dropdown) !important; +} + +.z-popover { + z-index: var(--zi-popovers) !important; +} + +.z-tooltip { + z-index: var(--zi-tooltips) !important; +} + +.z-banner { + z-index: var(--zi-banners) !important; +} + +.z-nav { + z-index: var(--zi-navigation) !important; +} + +.z-nav-fixed { + z-index: var(--zi-navigation-fixed) !important; +} + +.z-modal { + z-index: var(--zi-modals) !important; +} + +.z-modal-bg { + z-index: var(--zi-modals-background) !important; +} +" +`; diff --git a/packages/stacks-classic/lib/atomic/backgrounds.less b/packages/stacks-classic/lib/atomic/backgrounds.less new file mode 100644 index 0000000000..6f0ae0c395 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/backgrounds.less @@ -0,0 +1,67 @@ +// BACKGROUND POSITION +.bg-bottom { background-position: bottom !important; } +.bg-center { background-position: center !important; } +.bg-left { background-position: left !important; } +.bg-left-bottom { background-position: left bottom !important; } +.bg-left-top { background-position: left top !important; } +.bg-right { background-position: right !important; } +.bg-right-bottom { background-position: right bottom !important; } +.bg-right-top { background-position: right top !important; } +.bg-top { background-position: top !important; } + +// BACKGROUND REPEAT +.bg-repeat { background-repeat: repeat !important; } +.bg-no-repeat { background-repeat: no-repeat !important; } +.bg-repeat-x { background-repeat: repeat-x !important; } +.bg-repeat-y { background-repeat: repeat-y !important; } + +// BACKGROUND SIZE +.bg-auto { background-size: auto !important; } +.bg-cover { background-size: cover !important; } +.bg-contain { background-size: contain !important; } + +// BACKGROUND ATTACHMENT +.bg-fixed { background-attachment: fixed !important; } +.bg-local { background-attachment: local !important; } +.bg-scroll { background-attachment: scroll !important; } + +// BACKGROUND IMAGE +.bg-image-none { background-image: none !important; } + +// BACKGROUND LOADING +.bg-loading { + animation: loadingBgAnimation 1.5s ease-out infinite; + animation-delay: 1ms; +} + +@keyframes loadingBgAnimation { + 0% { + background-color: var(--black-150); + opacity: 1; + } + 50% { + background-color: var(--black-100); + opacity: 0.7; + } + 100% { + background-color: var(--black-150); + opacity: 1; + } +} + +// BACKGROUND CONFETTI +.bg-confetti-animated { + background-repeat: repeat-x; + background-position: top -10px center; + background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A"); + + @media (prefers-reduced-motion) { + background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); + } +} + +.bg-confetti-static { + background-repeat: repeat-x; + background-position: top -10px center; + background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); +} diff --git a/packages/stacks-classic/lib/atomic/backgrounds.less.test.ts b/packages/stacks-classic/lib/atomic/backgrounds.less.test.ts new file mode 100644 index 0000000000..89dbb0cb58 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/backgrounds.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: backgrounds", () => { + it("should output all atomic backgrounds classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/backgrounds.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/border-radius.less b/packages/stacks-classic/lib/atomic/border-radius.less new file mode 100644 index 0000000000..71fc679950 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/border-radius.less @@ -0,0 +1,38 @@ +@import (reference) "../base/internal.less"; + +#stacks-internals #responsify('.bar0', { border-radius: 0 !important; }); +.bar-md { border-radius: var(--br-md) !important; } +.bar-circle { border-radius: var(--br-circle) !important; } +.bar-pill { border-radius: var(--br-pill) !important; } + +// Top Left +.btlr0 { border-top-left-radius: 0 !important; } +.btlr-md { border-top-left-radius: var(--br-md) !important; } + +// Top Right +.btrr0 { border-top-right-radius: 0 !important; } +.btrr-md { border-top-right-radius: var(--br-md) !important; } + +// Bottom Left +.bblr0 { border-bottom-left-radius: 0 !important; } +.bblr-md { border-bottom-left-radius: var(--br-md) !important; } + +// Bottom Right +.bbrr0 { border-bottom-right-radius: 0 !important; } +.bbrr-md { border-bottom-right-radius: var(--br-md) !important; } + +// Top left and right +.btr0 { .btlr0; .btrr0; } +.btr-md { .btlr-md; .btrr-md; } + +// Top and bottom right +.brr0 { .btrr0; .bbrr0; } +.brr-md { .btrr-md; .bbrr-md; } + +// Bottom left and right +.bbr0 { .bblr0; .bbrr0; } +.bbr-md { .bblr-md; .bbrr-md; } + +// Top and bottom left +.blr0 { .btlr0; .bblr0; } +.blr-md { .btlr-md; .bblr-md; } diff --git a/packages/stacks-classic/lib/atomic/border-radius.less.test.ts b/packages/stacks-classic/lib/atomic/border-radius.less.test.ts new file mode 100644 index 0000000000..3c7f449bc4 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/border-radius.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: border-radius", () => { + it("should output all atomic border-radius classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/border-radius.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/border.less b/packages/stacks-classic/lib/atomic/borders.less similarity index 54% rename from packages/stacks-classic/lib/atomic/border.less rename to packages/stacks-classic/lib/atomic/borders.less index b2411f3a70..2bb944ad87 100644 --- a/packages/stacks-classic/lib/atomic/border.less +++ b/packages/stacks-classic/lib/atomic/borders.less @@ -1,3 +1,6 @@ +@import (reference) "../base/internal.less"; + +// BORDER #stacks-internals #responsify('.ba', { .bas-solid; .baw1; }); #stacks-internals #responsify('.bt', { .bts-solid; .btw1; }); #stacks-internals #responsify('.br', { .brs-solid; .brw1; }); @@ -6,116 +9,65 @@ .bx { .bls-solid; .brs-solid; .bxw1; } .by { .bts-solid; .bbs-solid; .byw1; } -// ============================================================================ -// $ WIDTH -// ---------------------------------------------------------------------------- -// $$ All Sides +// BORDER WIDTH #stacks-internals #responsify('.baw0', { border-width: 0 !important; }); .baw1 { border-width: var(--su1) !important; } .baw2 { border-width: var(--su2) !important; } .baw3 { border-width: var(--su4) !important; } -// $$ Top Border +// Top border width #stacks-internals #responsify('.btw0', { border-top-width: 0 !important; }); .btw1 { border-top-width: var(--su1) !important; } .btw2 { border-top-width: var(--su2) !important; } .btw3 { border-top-width: var(--su4) !important; } -// $$ Right Border +// Right border width #stacks-internals #responsify('.brw0', { border-right-width: 0 !important; }); .brw1 { border-right-width: var(--su1) !important; } .brw2 { border-right-width: var(--su2) !important; } .brw3 { border-right-width: var(--su4) !important; } -// $$ Bottom Border +// Bottom border width #stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; }); .bbw1 { border-bottom-width: var(--su1) !important; } .bbw2 { border-bottom-width: var(--su2) !important; } .bbw3 { border-bottom-width: var(--su4) !important; } -// $$ Left Border +// Left border width #stacks-internals #responsify('.blw0', { border-left-width: 0 !important; }); .blw0 { border-left-width: 0 !important; } .blw1 { border-left-width: var(--su1) !important; } .blw2 { border-left-width: var(--su2) !important; } .blw3 { border-left-width: var(--su4) !important; } -// $$ Y-Axis Border +// Top and bottom border width .byw0 { .btw0; .bbw0; } .byw1 { .btw1; .bbw1; } .byw2 { .btw2; .bbw2; } .byw3 { .btw3; .bbw3; } -// $$ X-Axis Border +// Left and right border width .bxw0 { .brw0; .blw0; } .bxw1 { .brw1; .blw1; } .bxw2 { .brw2; .blw2; } .bxw3 { .brw3; .blw3; } - -// ============================================================================ -// $ STYLE -// ============================================================================ -// $$ All sides +// BORDER STYLE .bas-solid { border-style: solid !important; } .bas-dashed { border-style: dashed !important; } -// $$ Top Border +// Top border style .bts-solid { border-top-style: solid !important; } .bts-dashed { border-top-style: dashed !important; } -// $$ Right Border +// Right border style .brs-solid { border-right-style: solid !important; } .brs-dashed { border-right-style: dashed !important; } -// $$ Bottom Border +// Bottom border style .bbs-solid { border-bottom-style: solid !important; } .bbs-dashed { border-bottom-style: dashed !important; } -// $$ Left Border +// Left border style .bls-solid { border-left-style: solid !important; } .bls-dashed { border-left-style: dashed !important; } - - -// ============================================================================ -// $ BORDER RADIUS -// ---------------------------------------------------------------------------- -// $$ All Sides -.bar-md { border-radius: var(--br-md) !important; } -.bar-circle { border-radius: var(--br-circle) !important; } -.bar-pill { border-radius: var(--br-pill) !important; } - -// $$ Top Left Corner -.btlr0 { border-top-left-radius: 0 !important; } -.btlr-md { border-top-left-radius: var(--br-md) !important; } - -// $$ Top Right Corner -.btrr0 { border-top-right-radius: 0 !important; } -.btrr-md { border-top-right-radius: var(--br-md) !important; } - -// $$ Bottom Left Corner -.bblr0 { border-bottom-left-radius: 0 !important; } -.bblr-md { border-bottom-left-radius: var(--br-md) !important; } - -// $$ Bottom Right Corner -.bbrr0 { border-bottom-right-radius: 0 !important; } -.bbrr-md { border-bottom-right-radius: var(--br-md) !important; } - -// $$ Top Corners -.btr0 { .btlr0; .btrr0; } -.btr-md { .btlr-md; .btrr-md; } - -// $$ Right Corners -.brr0 { .btrr0; .bbrr0; } -.brr-md { .btrr-md; .bbrr-md; } - -// $$ Bottom Corners -.bbr0 { .bblr0; .bbrr0; } -.bbr-md { .bblr-md; .bbrr-md; } - -// $$ Left Corners -.blr0 { .btlr0; .bblr0; } -.blr-md { .btlr-md; .bblr-md; } - -// $$ All Sides -#stacks-internals #responsify('.bar0', { border-radius: 0 !important; }); diff --git a/packages/stacks-classic/lib/atomic/borders.less.test.ts b/packages/stacks-classic/lib/atomic/borders.less.test.ts new file mode 100644 index 0000000000..8ed3a77610 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/borders.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: borders", () => { + it("should output all atomic borders classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/borders.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts b/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts index 18cdd87906..4a990d318c 100644 --- a/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts +++ b/packages/stacks-classic/lib/atomic/box-shadow.less.test.ts @@ -1,8 +1,8 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; -describe("atomic: misc", () => { - it("should output all atomic css classes", async () => { +describe("atomic: box-shadow", () => { + it("should output all atomic box-shadow classes", async () => { const css = await renderLess(` @import "./lib/atomic/box-shadow.less"; `); diff --git a/packages/stacks-classic/lib/atomic/box-sizing.less b/packages/stacks-classic/lib/atomic/box-sizing.less new file mode 100644 index 0000000000..d9db31b1df --- /dev/null +++ b/packages/stacks-classic/lib/atomic/box-sizing.less @@ -0,0 +1,3 @@ +.box-content { box-sizing: content-box !important; } +.box-border { box-sizing: border-box !important; } +.box-unset { box-sizing: unset !important; } diff --git a/packages/stacks-classic/lib/atomic/box-sizing.less.test.ts b/packages/stacks-classic/lib/atomic/box-sizing.less.test.ts new file mode 100644 index 0000000000..dfc3788565 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/box-sizing.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: box-sizing", () => { + it("should output all atomic box-sizing classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/box-sizing.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/color.less.test.ts b/packages/stacks-classic/lib/atomic/color.less.test.ts index 21b63c0839..9d80abcb24 100644 --- a/packages/stacks-classic/lib/atomic/color.less.test.ts +++ b/packages/stacks-classic/lib/atomic/color.less.test.ts @@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; describe("atomic: color", () => { - it("should output v2 atomic css classes for colors", async () => { + it("should output all atomic color classes and custom properties", async () => { const css = await renderLess(` @import "./lib/atomic/color.less"; `); diff --git a/packages/stacks-classic/lib/atomic/current-color.less b/packages/stacks-classic/lib/atomic/current-color.less new file mode 100644 index 0000000000..2995197c4f --- /dev/null +++ b/packages/stacks-classic/lib/atomic/current-color.less @@ -0,0 +1,2 @@ +.fill-current { fill: currentColor !important; } +.stroke-current { stroke: currentColor !important; } diff --git a/packages/stacks-classic/lib/atomic/current-color.less.test.ts b/packages/stacks-classic/lib/atomic/current-color.less.test.ts new file mode 100644 index 0000000000..13bf45d92f --- /dev/null +++ b/packages/stacks-classic/lib/atomic/current-color.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: current-color", () => { + it("should output all atomic current-color classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/current-color.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/cursors.less b/packages/stacks-classic/lib/atomic/cursors.less new file mode 100644 index 0000000000..add2fd44d9 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/cursors.less @@ -0,0 +1,8 @@ +.c-auto { cursor: auto !important; } +.c-default { cursor: default !important; } +.c-pointer { cursor: pointer !important; } +.c-text { cursor: text !important; } +.c-wait { cursor: wait !important; } +.c-move { cursor: move !important; } +.c-not-allowed { cursor: not-allowed !important; } +.c-help { cursor: help !important; } diff --git a/packages/stacks-classic/lib/atomic/cursors.less.test.ts b/packages/stacks-classic/lib/atomic/cursors.less.test.ts new file mode 100644 index 0000000000..98ce4760b3 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/cursors.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: cursors", () => { + it("should output all atomic cursors classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/cursors.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/display.less b/packages/stacks-classic/lib/atomic/display.less new file mode 100644 index 0000000000..0f9a6ad01f --- /dev/null +++ b/packages/stacks-classic/lib/atomic/display.less @@ -0,0 +1,15 @@ +@import (reference) "../exports/constants-helpers.less"; +@import (reference) "../base/configuration-static.less"; +@import (reference) "../base/internal.less"; + +#stacks-internals #responsify('.d-block', { display: block !important; }); +#stacks-internals #responsify('.d-flex', { display: flex !important; }); +#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; }); +#stacks-internals #responsify('.d-grid', { display: grid !important; }); +#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; }); +#stacks-internals #responsify('.d-inline', { display: inline !important; }); +#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; }); +.d-table { display: table !important; } +.d-table-cell { display: table-cell !important; } +#stacks-internals #responsify('.d-none', { display: none !important; }); +.d-unset { display: unset !important; } diff --git a/packages/stacks-classic/lib/atomic/display.less.test.ts b/packages/stacks-classic/lib/atomic/display.less.test.ts new file mode 100644 index 0000000000..ee8e5e6224 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/display.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: display", () => { + it("should output all atomic display classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/display.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/flex.less.test.ts b/packages/stacks-classic/lib/atomic/flex.less.test.ts index aaae343158..651f28dbd4 100644 --- a/packages/stacks-classic/lib/atomic/flex.less.test.ts +++ b/packages/stacks-classic/lib/atomic/flex.less.test.ts @@ -2,7 +2,7 @@ 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 () => { + it("should output all atomic flex classes", async () => { const css = await renderLess(` @import "./lib/atomic/flex.less"; `); diff --git a/packages/stacks-classic/lib/atomic/floats.less b/packages/stacks-classic/lib/atomic/floats.less new file mode 100644 index 0000000000..b4399b06b0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/floats.less @@ -0,0 +1,20 @@ +// FLOAT +.float-left { float: left !important; } +.float-right { float: right !important; } +.float-none { float: none !important; } + +// CLEARFIX +.clearfix { + &:before, + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } +} +.clear-left { clear: left !important; } +.clear-right { clear: right !important; } +.clear-both { clear: both !important; } +.clear-none { clear: none !important; } diff --git a/packages/stacks-classic/lib/atomic/floats.less.test.ts b/packages/stacks-classic/lib/atomic/floats.less.test.ts new file mode 100644 index 0000000000..4b934c7486 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/floats.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: floats", () => { + it("should output all atomic floats classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/floats.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/gap.less b/packages/stacks-classic/lib/atomic/gap.less index 16bf600968..1f45f77510 100644 --- a/packages/stacks-classic/lib/atomic/gap.less +++ b/packages/stacks-classic/lib/atomic/gap.less @@ -1,3 +1,5 @@ +@import (reference) "../base/internal.less"; + #stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; }); #stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); }); #stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); }); diff --git a/packages/stacks-classic/lib/atomic/misc.less.test.ts b/packages/stacks-classic/lib/atomic/gap.less.test.ts similarity index 59% rename from packages/stacks-classic/lib/atomic/misc.less.test.ts rename to packages/stacks-classic/lib/atomic/gap.less.test.ts index 9d4308366c..1c892068c5 100644 --- a/packages/stacks-classic/lib/atomic/misc.less.test.ts +++ b/packages/stacks-classic/lib/atomic/gap.less.test.ts @@ -1,10 +1,10 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; -describe("atomic: misc", () => { - it("should output all atomic css classes", async () => { +describe("atomic: gap", () => { + it("should output all atomic gap classes", async () => { const css = await renderLess(` - @import "./lib/atomic/misc.less"; + @import "./lib/atomic/gap.less"; `); expect(css).toMatchSnapshot(); diff --git a/packages/stacks-classic/lib/atomic/grid.less b/packages/stacks-classic/lib/atomic/grid.less index 095248b756..1826dbf05e 100644 --- a/packages/stacks-classic/lib/atomic/grid.less +++ b/packages/stacks-classic/lib/atomic/grid.less @@ -1,3 +1,5 @@ +@import (reference) "../base/internal.less"; + // ============================================================================ // $ GRID FLOW // ---------------------------------------------------------------------------- diff --git a/packages/stacks-classic/lib/atomic/spacing.less.test.ts b/packages/stacks-classic/lib/atomic/grid.less.test.ts similarity index 58% rename from packages/stacks-classic/lib/atomic/spacing.less.test.ts rename to packages/stacks-classic/lib/atomic/grid.less.test.ts index ae588ac9e6..8851e146fb 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less.test.ts +++ b/packages/stacks-classic/lib/atomic/grid.less.test.ts @@ -1,10 +1,10 @@ import { describe, it, expect } from "vitest"; import { renderLess } from "../test/less-test-utils"; -describe("atomic: spacing", () => { - it("should output all spacing classes", async () => { +describe("atomic: grid", () => { + it("should output all atomic grid classes", async () => { const css = await renderLess(` - @import "./lib/atomic/spacing.less"; + @import "./lib/atomic/grid.less"; `); expect(css).toMatchSnapshot(); diff --git a/packages/stacks-classic/lib/atomic/height.less.test.ts b/packages/stacks-classic/lib/atomic/height.less.test.ts index 1bf4843de9..60da15c4b4 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 classes", async () => { + it("should output all height atomic classes", async () => { const css = await renderLess(` @import "./lib/atomic/height.less"; `); diff --git a/packages/stacks-classic/lib/atomic/interactivity.less b/packages/stacks-classic/lib/atomic/interactivity.less new file mode 100644 index 0000000000..7107b130e4 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/interactivity.less @@ -0,0 +1,45 @@ +@import (reference) "../exports/mixins.less"; + +// FOCUS +.focus, +.f\:focus:focus, +.f\:focus:focus-within { + .focus-styles(); +} + +.focus-inset, +.f\:focus-inset:focus, +.f\:focus-inset:focus-within { + .focus-styles(true); +} + +.focus-bordered, +.f\:focus-bordered:focus, +.f\:focus-bordered:focus-within { + .focus-styles(false, true); +} + +.focus-inset-bordered, +.f\:focus-inset-bordered:focus, +.f\:focus-inset-bordered:focus-within { + .focus-styles(true, true); +} + +// POINTER EVENTS +.pe-auto { pointer-events: auto !important; } +.pe-none { pointer-events: none !important; } + +// USER SELECT +.us-auto { + -webkit-user-select: auto !important; + -moz-user-select: auto !important; + -ms-user-select: auto !important; + user-select: auto !important; +} + +.us-none { + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; +} \ No newline at end of file diff --git a/packages/stacks-classic/lib/atomic/interactivity.less.test.ts b/packages/stacks-classic/lib/atomic/interactivity.less.test.ts new file mode 100644 index 0000000000..5649b455bf --- /dev/null +++ b/packages/stacks-classic/lib/atomic/interactivity.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: interactivity", () => { + it("should output all atomic interactivity classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/interactivity.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/lists.less b/packages/stacks-classic/lib/atomic/lists.less new file mode 100644 index 0000000000..0e87cb1ec4 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/lists.less @@ -0,0 +1,29 @@ +ul, +ol { + padding: 0; + margin-left: 2.8em; + + ul, + ol { + margin-bottom: 0; + } +} + +ul { list-style-type: disc; } +ol { list-style-type: decimal; } + +.list-reset { + list-style: none; + margin: 0; + padding: 0; +} + +// List Style Types +.list-ls-none { list-style: none !important; } +.list-ls-disc { list-style-type: disc !important; } +.list-ls-decimal { list-style-type: decimal !important; } +.list-ls-unset { list-style-type: unset !important; } + +// List Position +.list-inside { list-style-position: inside !important; } +.list-outside { list-style-position: outside !important; } diff --git a/packages/stacks-classic/lib/atomic/lists.less.test.ts b/packages/stacks-classic/lib/atomic/lists.less.test.ts new file mode 100644 index 0000000000..f08985da09 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/lists.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: lists", () => { + it("should output all atomic lists classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/lists.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/spacing.less b/packages/stacks-classic/lib/atomic/margin.less similarity index 83% rename from packages/stacks-classic/lib/atomic/spacing.less rename to packages/stacks-classic/lib/atomic/margin.less index 27b6ba5a7a..ea700b5d6d 100644 --- a/packages/stacks-classic/lib/atomic/spacing.less +++ b/packages/stacks-classic/lib/atomic/margin.less @@ -5,7 +5,6 @@ @px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128; @percent-values: 50 100; -// MARGIN .m-auto { margin: auto !important; } .generate-sizing('.m', margin, @px-values, 'px', true); .generate-sizing('.mn', margin, @px-values-negative, 'px', true, true); @@ -47,12 +46,3 @@ .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', true); -.generate-sizing('.pt', padding-top, @px-values, 'px', true); -.generate-sizing('.pr', padding-right, @px-values, 'px', true); -.generate-sizing('.pb', padding-bottom, @px-values, 'px', true); -.generate-sizing('.pl', padding-left, @px-values, 'px', true); -.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true); -.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true); diff --git a/packages/stacks-classic/lib/atomic/margin.less.test.ts b/packages/stacks-classic/lib/atomic/margin.less.test.ts new file mode 100644 index 0000000000..d9b0c53f75 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/margin.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: margin", () => { + it("should output all atomic margin classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/margin.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/misc.less b/packages/stacks-classic/lib/atomic/misc.less deleted file mode 100644 index ad2f599702..0000000000 --- a/packages/stacks-classic/lib/atomic/misc.less +++ /dev/null @@ -1,360 +0,0 @@ -@import (reference) "../base/internal.less"; -@import (reference) "../exports/color-mixins.less"; -@import (reference) "../exports/constants-helpers.less"; -@import (reference) "../exports/mixins.less"; - -// -// STACK OVERFLOW -// UTILITIES -// -// 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/ -// -// ============================================================================ -// $ DISPLAY -// ---------------------------------------------------------------------------- - -#stacks-internals #responsify('.d-block', { display: block !important; }); -#stacks-internals #responsify('.d-flex', { display: flex !important; }); -#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; }); -#stacks-internals #responsify('.d-grid', { display: grid !important; }); -#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; }); -#stacks-internals #responsify('.d-inline', { display: inline !important; }); -#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; }); -.d-table { display: table !important; } -.d-table-cell { display: table-cell !important; } -#stacks-internals #responsify('.d-none', { display: none !important; }); -.d-unset { display: unset !important; } - -// ============================================================================ -// $ BACKGROUND-POSITIONS -// ---------------------------------------------------------------------------- -.bg-bottom { background-position: bottom !important; } -.bg-center { background-position: center !important; } -.bg-left { background-position: left !important; } -.bg-left-bottom { background-position: left bottom !important; } -.bg-left-top { background-position: left top !important; } -.bg-right { background-position: right !important; } -.bg-right-bottom { background-position: right bottom !important; } -.bg-right-top { background-position: right top !important; } -.bg-top { background-position: top !important; } - -// ============================================================================ -// $ BACKGROUND-REPEATS -// ---------------------------------------------------------------------------- -.bg-repeat { background-repeat: repeat !important; } -.bg-no-repeat { background-repeat: no-repeat !important; } -.bg-repeat-x { background-repeat: repeat-x !important; } -.bg-repeat-y { background-repeat: repeat-y !important; } - -// ============================================================================ -// $ BACKGROUND-SIZE -// ---------------------------------------------------------------------------- -.bg-auto { background-size: auto !important; } -.bg-cover { background-size: cover !important; } -.bg-contain { background-size: contain !important; } - -// ============================================================================ -// $ BACKGROUND-ATTACHMENT -// ---------------------------------------------------------------------------- -.bg-fixed { background-attachment: fixed !important; } -.bg-local { background-attachment: local !important; } -.bg-scroll { background-attachment: scroll !important; } - -// ============================================================================ -// $ BACKGROUND-IMAGE -// ---------------------------------------------------------------------------- -.bg-image-none { background-image: none !important; } - -.bg-loading { - animation: loadingBgAnimation 1.5s ease-out infinite; - animation-delay: 1ms; -} - -@keyframes loadingBgAnimation { - 0% { - background-color: var(--black-150); - opacity: 1; - } - 50% { - background-color: var(--black-100); - opacity: 0.7; - } - 100% { - background-color: var(--black-150); - opacity: 1; - } -} - -.bg-confetti-animated { - background-repeat: repeat-x; - background-position: top -10px center; - background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A"); - - @media (prefers-reduced-motion) { - background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); - } -} - -.bg-confetti-static { - background-repeat: repeat-x; - background-position: top -10px center; - background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E"); -} - -// Focus styles -.focus, -.f\:focus:focus, -.f\:focus:focus-within { - .focus-styles(); -} - -.focus-inset, -.f\:focus-inset:focus, -.f\:focus-inset:focus-within { - .focus-styles(true); -} - -.focus-bordered, -.f\:focus-bordered:focus, -.f\:focus-bordered:focus-within { - .focus-styles(false, true); -} - -.focus-inset-bordered, -.f\:focus-inset-bordered:focus, -.f\:focus-inset-bordered:focus-within { - .focus-styles(true, true); -} - -// ============================================================================ -// $ OBJECT-FIT / OBJECT-POSITION -// ---------------------------------------------------------------------------- - -.of-contain { object-fit: contain !important; } -.of-cover { object-fit: cover !important; } -.of-fill { object-fit: fill !important; } -.of-none { object-fit: none !important; } -.of-scale-down { object-fit: scale-down !important; } - -.op-center { object-position: center !important; } - -// ============================================================================ -// $ CURSORS -// ---------------------------------------------------------------------------- -.c-auto { cursor: auto !important; } -.c-default { cursor: default !important; } -.c-pointer { cursor: pointer !important; } -.c-text { cursor: text !important; } -.c-wait { cursor: wait !important; } -.c-move { cursor: move !important; } -.c-not-allowed { cursor: not-allowed !important; } -.c-help { cursor: help !important; } - -// ============================================================================ -// $ POINTER EVENTS -// ---------------------------------------------------------------------------- -.pe-auto { pointer-events: auto !important; } -.pe-none { pointer-events: none !important; } - -// ============================================================================ -// $ USER SELECT -// ---------------------------------------------------------------------------- -.us-auto { - -webkit-user-select: auto !important; - -moz-user-select: auto !important; - -ms-user-select: auto !important; - user-select: auto !important; -} - -.us-none { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; -} - -// ============================================================================ -// $ VISIBILITY -// ---------------------------------------------------------------------------- -.v-visible { visibility: visible !important; } -.v-hidden { visibility: hidden !important; } -.v-visible-sr { - // Borrowed from Wordpress - // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ - border: 0; - /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ - clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); - clip-path: inset(50%); - height: var(--su1); - margin: var(--sun1); - overflow: hidden; - padding: 0; - position: absolute; - width: var(--su1); - overflow-wrap: normal; -} - -// ============================================================================ -// $ FLOATS -// ---------------------------------------------------------------------------- -.float-left { float: left !important; } -.float-right { float: right !important; } -.float-none { float: none !important; } -.clearfix { - &:before, - &:after { - content: ""; - display: table; - } - &:after { - clear: both; - } -} -.clear-left { clear: left !important; } -.clear-right { clear: right !important; } -.clear-both { clear: both !important; } -.clear-none { clear: none !important; } - -// ============================================================================ -// $ BOX SIZING -// ---------------------------------------------------------------------------- -.box-content { box-sizing: content-box !important; } -.box-border { box-sizing: border-box !important; } -.box-unset { box-sizing: unset !important; } - -// ============================================================================ -// $ VERTICAL ALIGNMENT -// ---------------------------------------------------------------------------- -.va-baseline { vertical-align: baseline !important; } -.va-bottom { vertical-align: bottom !important; } -.va-middle { vertical-align: middle !important; } -.va-sub { vertical-align: sub !important; } -.va-super { vertical-align: super !important; } -.va-text-bottom { vertical-align: text-bottom !important; } -.va-text-top { vertical-align: text-top !important; } -.va-top { vertical-align: top !important; } -.va-unset { vertical-align: unset !important; } - -// ============================================================================ -// $ POSITION -// ---------------------------------------------------------------------------- -#stacks-internals #responsify('.ps-absolute', { position: absolute !important; }); -#stacks-internals #responsify('.ps-fixed', { position: fixed !important; }); -#stacks-internals #responsify('.ps-relative', { position: relative !important; }); -#stacks-internals #responsify('.ps-static', { position: static !important; }); -#stacks-internals #responsify('.ps-sticky', { position: sticky !important; }); -.ps-unset { position: unset !important; } - -// ============================================================================ -// $ OVERFLOW -// ---------------------------------------------------------------------------- -.overflow-auto { overflow: auto !important; @scrollbar-styles(); } -.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); } -.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); } - -.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); } -.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); } -.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); } - -.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); } -.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); } -.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); } - -.overflow-visible { overflow: visible !important; } - -// ============================================================================ -// $ OPACITY -// ---------------------------------------------------------------------------- -.o0 { opacity: 0 !important; } -.h\:o0:hover { .o0; } -.o5 { opacity: 0.05 !important; } -.h\:o5:hover { .o5; } -.o10 { opacity: 0.1 !important; } -.o20 { opacity: 0.2 !important; } -.o30 { opacity: 0.3 !important; } -.o40 { opacity: 0.4 !important; } -.o50 { opacity: 0.5 !important; } -.h\:o50:hover { .o50; } -.o60 { opacity: 0.6 !important; } -.o70 { opacity: 0.7 !important; } -.o80 { opacity: 0.8 !important; } -.h\:o80:hover { .o80; } -.o90 { opacity: 0.9 !important; } -.o100 { opacity: 1 !important; } -.h\:o100:hover { .o100; } - -.f\:o100 { - &:focus, - &:focus-within { - .o100; - } -} - -// ============================================================================ -// $ Z-INDEX -// ---------------------------------------------------------------------------- -.z-hide { z-index: var(--zi-hide) !important; } -.z-base { z-index: var(--zi-base) !important; } -.z-active { z-index: var(--zi-active) !important; } -.z-selected { z-index: var(--zi-selected) !important; } -.z-dropdown { z-index: var(--zi-dropdown) !important; } -.z-popover { z-index: var(--zi-popovers) !important; } -.z-tooltip { z-index: var(--zi-tooltips) !important; } -.z-banner { z-index: var(--zi-banners) !important; } -.z-nav { z-index: var(--zi-navigation) !important; } -.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; } -.z-modal { z-index: var(--zi-modals) !important; } -.z-modal-bg { z-index: var(--zi-modals-background) !important; } - -// ============================================================================ -// $ OUTLINE -// ---------------------------------------------------------------------------- -.outline-none { outline: 0 !important; } -.outline-ring { .focus-styles(false, true); } - -.f\:outline-ring { - &:focus, - &:focus-within { - .outline-ring; - } -} - -// ============================================================================ -// $ CURRENT COLOR -// ---------------------------------------------------------------------------- -.fill-current { fill: currentColor !important; } -.stroke-current { stroke: currentColor !important; } - -// ============================================================================ -// $ TRANSITIONS -// ---------------------------------------------------------------------------- - -// -- Provide a sensible default -.t { - transition-duration: var(--transition-time); - transition-property: all; - transition-timing-function: var(--te-ease-in); - transition-delay: 0s; -} - -// -- Durations -.t-slow { transition-duration: 0.25s !important; } -.t-fast { transition-duration: 0.05s !important; } - -// -- Properties -.t-unset { transition-property: none !important; } -.t-bg { transition-property: background-color !important; } -.t-opacity { transition-property: opacity !important; } -.t-shadow { transition-property: box-shadow !important; } - -// -- Delays -.t-delay { transition-delay: 0.25s !important; } -.t-delay-unset { transition-delay: 0s !important; } - -// ============================================================================ -// $ TABLE LAYOUT -// ---------------------------------------------------------------------------- -.tl-fixed { table-layout: fixed !important; } -.tl-auto { table-layout: auto !important; } diff --git a/packages/stacks-classic/lib/atomic/object-fit.less b/packages/stacks-classic/lib/atomic/object-fit.less new file mode 100644 index 0000000000..fdd29edbbe --- /dev/null +++ b/packages/stacks-classic/lib/atomic/object-fit.less @@ -0,0 +1,9 @@ +// OBJECT FIT +.of-contain { object-fit: contain !important; } +.of-cover { object-fit: cover !important; } +.of-fill { object-fit: fill !important; } +.of-none { object-fit: none !important; } +.of-scale-down { object-fit: scale-down !important; } + +// OBJECT POSITION +.op-center { object-position: center !important; } diff --git a/packages/stacks-classic/lib/atomic/object-fit.less.test.ts b/packages/stacks-classic/lib/atomic/object-fit.less.test.ts new file mode 100644 index 0000000000..a6725980b2 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/object-fit.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: object-fit", () => { + it("should output all atomic object-fit classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/object-fit.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/opacity.less b/packages/stacks-classic/lib/atomic/opacity.less new file mode 100644 index 0000000000..1d63a370ff --- /dev/null +++ b/packages/stacks-classic/lib/atomic/opacity.less @@ -0,0 +1,54 @@ +.o0, +.h\:o0:hover { + opacity: 0 !important; +} + +.o5, +.h\:o5:hover { + opacity: 0.05 !important; +} + +.o10 { + opacity: 0.1 !important; +} + +.o20 { + opacity: 0.2 !important; +} + +.o30 { + opacity: 0.3 !important; +} + +.o40 { + opacity: 0.4 !important; +} + +.o50, +.h\:o50:hover { + opacity: 0.5 !important; +} + +.o60 { + opacity: 0.6 !important; +} + +.o70 { + opacity: 0.7 !important; +} + +.o80, +.h\:o80:hover { + opacity: 0.8 !important; +} + +.o90 { + opacity: 0.9 !important; +} + +.o100, +.h\:o100:hover, +.f\:o100:focus, +.f\:o100:focus-within { + opacity: 1 !important; +} diff --git a/packages/stacks-classic/lib/atomic/opacity.less.test.ts b/packages/stacks-classic/lib/atomic/opacity.less.test.ts new file mode 100644 index 0000000000..9212e91432 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/opacity.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: opacity", () => { + it("should output all atomic opacity classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/opacity.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/outline.less b/packages/stacks-classic/lib/atomic/outline.less new file mode 100644 index 0000000000..79ea066fe9 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/outline.less @@ -0,0 +1,11 @@ +@import (reference) "../exports/mixins.less"; + +.outline-none { outline: 0 !important; } +.outline-ring { .focus-styles(false, true); } + +.f\:outline-ring { + &:focus, + &:focus-within { + .outline-ring; + } +} diff --git a/packages/stacks-classic/lib/atomic/outline.less.test.ts b/packages/stacks-classic/lib/atomic/outline.less.test.ts new file mode 100644 index 0000000000..a5d09d2121 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/outline.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: outline", () => { + it("should output all atomic outline classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/outline.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/overflow.less b/packages/stacks-classic/lib/atomic/overflow.less new file mode 100644 index 0000000000..1c8ec9e329 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/overflow.less @@ -0,0 +1,17 @@ +@import (reference) "../exports/constants-helpers.less"; + +// OVERFLOW +.overflow-auto { overflow: auto !important; @scrollbar-styles(); } +.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); } +.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); } +.overflow-visible { overflow: visible !important; } + +// OVERFLOW X +.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); } +.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); } +.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); } + +// OVERFLOW Y +.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); } +.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); } +.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); } diff --git a/packages/stacks-classic/lib/atomic/overflow.less.test.ts b/packages/stacks-classic/lib/atomic/overflow.less.test.ts new file mode 100644 index 0000000000..7d99775355 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/overflow.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: overflow", () => { + it("should output all atomic overflow classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/overflow.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/padding.less b/packages/stacks-classic/lib/atomic/padding.less new file mode 100644 index 0000000000..171896756d --- /dev/null +++ b/packages/stacks-classic/lib/atomic/padding.less @@ -0,0 +1,12 @@ +@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; + +.generate-sizing('.p', padding, @px-values, 'px', true); +.generate-sizing('.pt', padding-top, @px-values, 'px', true); +.generate-sizing('.pr', padding-right, @px-values, 'px', true); +.generate-sizing('.pb', padding-bottom, @px-values, 'px', true); +.generate-sizing('.pl', padding-left, @px-values, 'px', true); +.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true); +.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true); diff --git a/packages/stacks-classic/lib/atomic/padding.less.test.ts b/packages/stacks-classic/lib/atomic/padding.less.test.ts new file mode 100644 index 0000000000..c04ff397e2 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/padding.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: padding", () => { + it("should output all atomic padding classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/padding.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/positioning.less b/packages/stacks-classic/lib/atomic/positioning.less index 6f1858072c..2aa4c5f6d1 100644 --- a/packages/stacks-classic/lib/atomic/positioning.less +++ b/packages/stacks-classic/lib/atomic/positioning.less @@ -6,6 +6,13 @@ @percent-values: 50 100; // POSITIONING +#stacks-internals #responsify('.ps-absolute', { position: absolute !important; }); +#stacks-internals #responsify('.ps-fixed', { position: fixed !important; }); +#stacks-internals #responsify('.ps-relative', { position: relative !important; }); +#stacks-internals #responsify('.ps-static', { position: static !important; }); +#stacks-internals #responsify('.ps-sticky', { position: sticky !important; }); +.ps-unset { position: unset !important; } + // Inset .generate-sizing('.i', inset, @px-values, 'px'); diff --git a/packages/stacks-classic/lib/atomic/transitions.less b/packages/stacks-classic/lib/atomic/transitions.less new file mode 100644 index 0000000000..d036bf7914 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/transitions.less @@ -0,0 +1,20 @@ +.t { + transition-duration: var(--transition-time); + transition-property: all; + transition-timing-function: var(--te-ease-in); + transition-delay: 0s; +} + +// -- Durations +.t-slow { transition-duration: 0.25s !important; } +.t-fast { transition-duration: 0.05s !important; } + +// -- Properties +.t-unset { transition-property: none !important; } +.t-bg { transition-property: background-color !important; } +.t-opacity { transition-property: opacity !important; } +.t-shadow { transition-property: box-shadow !important; } + +// -- Delays +.t-delay { transition-delay: 0.25s !important; } +.t-delay-unset { transition-delay: 0s !important; } diff --git a/packages/stacks-classic/lib/atomic/transitions.less.test.ts b/packages/stacks-classic/lib/atomic/transitions.less.test.ts new file mode 100644 index 0000000000..9a2debedce --- /dev/null +++ b/packages/stacks-classic/lib/atomic/transitions.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: transitions", () => { + it("should output all atomic transitions classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/transitions.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/truncation.less b/packages/stacks-classic/lib/atomic/truncation.less new file mode 100644 index 0000000000..5dc6cbced8 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/truncation.less @@ -0,0 +1,58 @@ +@import (reference) "../exports/constants-helpers.less"; +@import (reference) "../base/configuration-static.less"; +@import (reference) "../base/internal.less"; + +.truncation(@count) { + // Despite these all being webkit-specific properties, this works across + // Safari, Chrome, Edge, and Firefox. + display: -webkit-box; + -webkit-line-clamp: @count; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.truncate { + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis !important; + white-space: nowrap; +} + +.v-truncate1 { + .truncation(1); +} + +.v-truncate2 { + .truncation(2); +} + +.v-truncate3 { + .truncation(3); +} + +.v-truncate4 { + .truncation(4); +} + +.v-truncate5 { + .truncation(5); +} + +.v-truncate-fade { + overflow: hidden; + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); + max-height: calc(var(--lh-md) * 12em); + + &.v-truncate-fade__sm { + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); + max-height: calc(var(--lh-md) * 6em); + } + + &.v-truncate-fade__lg { + -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); + mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); + max-height: calc(var(--lh-md) * 24em); + } +} diff --git a/packages/stacks-classic/lib/atomic/truncation.less.test.ts b/packages/stacks-classic/lib/atomic/truncation.less.test.ts new file mode 100644 index 0000000000..aba0eef59c --- /dev/null +++ b/packages/stacks-classic/lib/atomic/truncation.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: truncation", () => { + it("should output all atomic truncation classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/truncation.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/typography.less b/packages/stacks-classic/lib/atomic/typography.less index 5dd8a2d91b..6ec7231501 100644 --- a/packages/stacks-classic/lib/atomic/typography.less +++ b/packages/stacks-classic/lib/atomic/typography.less @@ -1,17 +1,8 @@ -// -// STACK OVERFLOW -// TYPOGRAPHY -// -// 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 -// • ATOMIC CLASSES -// -// ============================================================================ -// $ TYPE RESETS -// ---------------------------------------------------------------------------- +@import (reference) "../exports/constants-helpers.less"; +@import (reference) "../base/configuration-static.less"; +@import (reference) "../base/internal.less"; + +// TYPE RESETS h1, h2, h3, @@ -22,10 +13,7 @@ p { margin-top: 0; } -// ============================================================================ -// $ TEXT SIZES -// ---------------------------------------------------------------------------- -// Declare font sizes +// TEXT SIZES .fs-display4 { font-size: var(--fs-display4) !important; line-height: 1.18; @@ -92,9 +80,7 @@ p { .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px }, @force-selector: true); -// ============================================================================ -// $ LINE HEIGHTS -// ---------------------------------------------------------------------------- +// LINE HEIGHTS .lh-xs { line-height: var(--lh-xs) !important; } .lh-sm { line-height: var(--lh-sm) !important; } .lh-md { line-height: var(--lh-md) !important; } @@ -103,100 +89,42 @@ p { .lh-xxl { line-height: var(--lh-xxl) !important; } .lh-unset { line-height: initial !important; } -// ============================================================================ -// $$ TEXT STYLES & UTILITIES -// ---------------------------------------------------------------------------- -// -- Font Family +// TEXT STYLES & UTILITIES +// Font Family .ff-sans { font-family: var(--ff-sans) !important; } .ff-serif { font-family: var(--ff-serif) !important; } .ff-mono { font-family: var(--ff-mono) !important; } .ff-inherit { font-family: inherit !important; } -// -- Font Weight +// Font Weight .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-bold { font-weight: 600 !important; } -// -- Font Styles +// Font Styles .fs-normal { font-style: normal !important; } .fs-italic { font-style: italic !important; } .fs-unset { font-style: unset !important; } -// -- Text Align +// Text Align #stacks-internals #responsify('.ta-left', { text-align: left !important; }); #stacks-internals #responsify('.ta-center', { text-align: center !important; }); #stacks-internals #responsify('.ta-right', { text-align: right !important; }); .ta-justify { text-align: justify !important; } .ta-unset { text-align: unset !important; } -// -- Text Decoration +// Text Decoration .td-none { text-decoration: none !important; } .td-underline { text-decoration: underline !important; } -// -- Text Transform +// Text Transform .tt-capitalize { text-transform: capitalize !important; } .tt-lowercase { text-transform: lowercase !important; } .tt-uppercase { text-transform: uppercase !important; } .tt-none { text-transform: none !important; } .tt-unset { text-transform: unset !important; } -// -- Text Truncate -.truncate { - overflow: hidden; - max-width: 100%; - text-overflow: ellipsis !important; - white-space: nowrap; -} - -.v-truncate1 { - .truncation(1); -} - -.v-truncate2 { - .truncation(2); -} - -.v-truncate3 { - .truncation(3); -} - -.v-truncate4 { - .truncation(4); -} - -.v-truncate5 { - .truncation(5); -} - -.truncation(@count) { - // Despite these all being webkit-specific properties, this works across - // Safari, Chrome, Edge, and Firefox. - display: -webkit-box; - -webkit-line-clamp: @count; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.v-truncate-fade { - overflow: hidden; - -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); - mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent); - max-height: calc(var(--lh-md) * 12em); - - &.v-truncate-fade__sm { - -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); - mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent); - max-height: calc(var(--lh-md) * 6em); - } - - &.v-truncate-fade__lg { - -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); - mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent); - max-height: calc(var(--lh-md) * 24em); - } -} - -// -- Whitespace +// Whitespace .ws-normal { white-space: normal !important; } .ws-nowrap { white-space: nowrap !important; } .ws-pre { white-space: pre !important; } @@ -204,7 +132,7 @@ p { .ws-pre-line { white-space: pre-line !important; } .ws-unset { white-space: unset !important; } -// -- Word Break +// Word Break .wb-normal { word-break: normal !important; } .wb-break-all { word-break: break-all !important; } .wb-keep-all { word-break: keep-all !important; } @@ -212,7 +140,7 @@ p { .wb-initial { word-break: initial !important; } .wb-unset { word-break: unset !important; } -// -- Overflow Wrap +// Overflow Wrap .ow-normal { overflow-wrap: normal !important; } @@ -237,7 +165,7 @@ p { overflow-wrap: unset !important; } -// -- Hyphenation +// Hyphenation .hyphens-none { hyphens: none !important; } .hyphens-auto { -ms-hyphens: auto !important; @@ -246,7 +174,7 @@ p { } .hyphens-unset { hyphens: unset !important; } -// -- Break word +// Break word .break-word { // DEPRECATED: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ @@ -257,36 +185,3 @@ p { -ms-hyphens: auto !important; hyphens: auto !important; } - -// ============================================================================ -// $ LISTS -// ---------------------------------------------------------------------------- -ul, -ol { - padding: 0; - margin-left: 2.8em; - - ul, - ol { - margin-bottom: 0; - } -} - -ul { list-style-type: disc; } -ol { list-style-type: decimal; } - -.list-reset { - list-style: none; - margin: 0; - padding: 0; -} - -// -- List Style Types -.list-ls-none { list-style: none !important; } -.list-ls-disc { list-style-type: disc !important; } -.list-ls-decimal { list-style-type: decimal !important; } -.list-ls-unset { list-style-type: unset !important; } - -// -- List Position -.list-inside { list-style-position: inside !important; } -.list-outside { list-style-position: outside !important; } diff --git a/packages/stacks-classic/lib/atomic/typography.less.test.ts b/packages/stacks-classic/lib/atomic/typography.less.test.ts new file mode 100644 index 0000000000..3781f2780d --- /dev/null +++ b/packages/stacks-classic/lib/atomic/typography.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: typography", () => { + it("should output all atomic typography classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/typography.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/vertical-alignment.less b/packages/stacks-classic/lib/atomic/vertical-alignment.less new file mode 100644 index 0000000000..07dae99a53 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/vertical-alignment.less @@ -0,0 +1,9 @@ +.va-baseline { vertical-align: baseline !important; } +.va-bottom { vertical-align: bottom !important; } +.va-middle { vertical-align: middle !important; } +.va-sub { vertical-align: sub !important; } +.va-super { vertical-align: super !important; } +.va-text-bottom { vertical-align: text-bottom !important; } +.va-text-top { vertical-align: text-top !important; } +.va-top { vertical-align: top !important; } +.va-unset { vertical-align: unset !important; } diff --git a/packages/stacks-classic/lib/atomic/vertical-alignment.less.test.ts b/packages/stacks-classic/lib/atomic/vertical-alignment.less.test.ts new file mode 100644 index 0000000000..b87b68c2f0 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/vertical-alignment.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: vertical-alignment", () => { + it("should output all atomic vertical-alignment classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/vertical-alignment.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/visibility.less b/packages/stacks-classic/lib/atomic/visibility.less new file mode 100644 index 0000000000..9a7b9fce9b --- /dev/null +++ b/packages/stacks-classic/lib/atomic/visibility.less @@ -0,0 +1,18 @@ + +.v-visible { visibility: visible !important; } +.v-hidden { visibility: hidden !important; } +.v-visible-sr { + // Borrowed from Wordpress + // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ + border: 0; + /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */ + clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); + clip-path: inset(50%); + height: var(--su1); + margin: var(--sun1); + overflow: hidden; + padding: 0; + position: absolute; + width: var(--su1); + overflow-wrap: normal; +} diff --git a/packages/stacks-classic/lib/atomic/visibility.less.test.ts b/packages/stacks-classic/lib/atomic/visibility.less.test.ts new file mode 100644 index 0000000000..cb48dd582b --- /dev/null +++ b/packages/stacks-classic/lib/atomic/visibility.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: visibility", () => { + it("should output all atomic visibility classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/visibility.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/atomic/width.less.test.ts b/packages/stacks-classic/lib/atomic/width.less.test.ts index 2e8ebb0309..539a75f40c 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 classes", async () => { + it("should output all atomic width classes", async () => { const css = await renderLess(` @import "./lib/atomic/width.less"; `); diff --git a/packages/stacks-classic/lib/atomic/z-index.less b/packages/stacks-classic/lib/atomic/z-index.less new file mode 100644 index 0000000000..65a71d27cb --- /dev/null +++ b/packages/stacks-classic/lib/atomic/z-index.less @@ -0,0 +1,12 @@ +.z-hide { z-index: var(--zi-hide) !important; } +.z-base { z-index: var(--zi-base) !important; } +.z-active { z-index: var(--zi-active) !important; } +.z-selected { z-index: var(--zi-selected) !important; } +.z-dropdown { z-index: var(--zi-dropdown) !important; } +.z-popover { z-index: var(--zi-popovers) !important; } +.z-tooltip { z-index: var(--zi-tooltips) !important; } +.z-banner { z-index: var(--zi-banners) !important; } +.z-nav { z-index: var(--zi-navigation) !important; } +.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; } +.z-modal { z-index: var(--zi-modals) !important; } +.z-modal-bg { z-index: var(--zi-modals-background) !important; } diff --git a/packages/stacks-classic/lib/atomic/z-index.less.test.ts b/packages/stacks-classic/lib/atomic/z-index.less.test.ts new file mode 100644 index 0000000000..ae2b025751 --- /dev/null +++ b/packages/stacks-classic/lib/atomic/z-index.less.test.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from "vitest"; +import { renderLess } from "../test/less-test-utils"; + +describe("atomic: z-index", () => { + it("should output all atomic z-index classes", async () => { + const css = await renderLess(` + @import "./lib/atomic/z-index.less"; + `); + + expect(css).toMatchSnapshot(); + }); +}); diff --git a/packages/stacks-classic/lib/components/table/table.less b/packages/stacks-classic/lib/components/table/table.less index 53e4899380..5f84cb1e7b 100644 --- a/packages/stacks-classic/lib/components/table/table.less +++ b/packages/stacks-classic/lib/components/table/table.less @@ -297,5 +297,9 @@ width: 100%; } +// TABLE LAYOUT ATOMIC CLASSES +.tl-fixed { table-layout: fixed !important; } +.tl-auto { table-layout: auto !important; } + // [1] This makes the border transparent, so we need to use whitespace // to achieve the same effect a 2px gray border achieves. diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index 88eba81937..c951828d39 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -5,7 +5,46 @@ @import "base/icon.less"; @import "input-utils.less"; -// -- COMPONENTS +// LESS CONSTANTS AND MIXINS +@import "exports/exports.less"; + +// CUSTOM PROPERTIES +@import "atomic/sizing.less"; + +// FOUNDATIONAL CLASSES +@import "atomic/color.less"; +@import "atomic/typography.less"; + +// ATOMIC CLASSES +@import "atomic/backgrounds.less"; +@import "atomic/borders.less"; +@import "atomic/border-radius.less"; +@import "atomic/box-shadow.less"; +@import "atomic/box-sizing.less"; +@import "atomic/current-color.less"; +@import "atomic/cursors.less"; +@import "atomic/display.less"; +@import "atomic/flex.less"; +@import "atomic/floats.less"; +@import "atomic/gap.less"; +@import "atomic/grid.less"; +@import "atomic/height.less"; +@import "atomic/interactivity.less"; +@import "atomic/lists.less"; +@import "atomic/margin.less"; +@import "atomic/object-fit.less"; +@import "atomic/opacity.less"; +@import "atomic/outline.less"; +@import "atomic/overflow.less"; +@import "atomic/padding.less"; +@import "atomic/positioning.less"; +@import "atomic/truncation.less"; +@import "atomic/vertical-alignment.less"; +@import "atomic/visibility.less"; +@import "atomic/width.less"; +@import "atomic/z-index.less"; + +// COMPONENTS @import "components/activity-indicator/activity-indicator.less"; @import "components/anchor/anchor.less"; @import "components/avatar/avatar.less"; @@ -53,24 +92,6 @@ @import "components/user-card/user-card.less"; @import "components/vote/vote.less"; -// LESS CONSTANTS AND MIXINS -@import "exports/exports.less"; - -// -- ATOMIC CLASSES -@import "atomic/border.less"; -@import "atomic/box-shadow.less"; -@import "atomic/color.less"; -@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.less"; - /* stylelint-disable */ #stacks-internals #screen-lg({ #stacks-internals-collect-large(); diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 5ea4eb6214..cf68e0d837 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -148,14 +148,14 @@ "title": "Overflow", "url": "/product/base/overflow/" }, - { - "title": "Positioning", - "url": "/product/base/position/" - }, { "title": "Padding", "url": "/product/base/padding/" }, + { + "title": "Positioning", + "url": "/product/base/position/" + }, { "title": "Transitions", "url": "/product/base/transitions/" diff --git a/packages/stacks-docs/product/base/display.html b/packages/stacks-docs/product/base/display.html index b2e8ffc2e5..05d34863c0 100644 --- a/packages/stacks-docs/product/base/display.html +++ b/packages/stacks-docs/product/base/display.html @@ -53,7 +53,7 @@ {% endhighlight %}
-
.d-block
+
.d-block
.d-inline
diff --git a/packages/stacks-docs/product/base/margin.html b/packages/stacks-docs/product/base/margin.html index 69a734f43d..cf90855745 100644 --- a/packages/stacks-docs/product/base/margin.html +++ b/packages/stacks-docs/product/base/margin.html @@ -42,8 +42,10 @@
{% endhighlight %}
-
- Example div with different margins applied +
+
+ Example div with different margins applied +
@@ -104,13 +106,15 @@ {% header "h3", "Negative examples" %}
{% highlight html %} -
+
…
{% endhighlight %}
-
- Example div with different margins applied +
+
+ Example div with different margins applied +
From 0037300718f8ffce66d392d198508ac3ccb15055 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 3 Feb 2026 12:39:38 -0500 Subject: [PATCH 09/15] Get rid of .docs-code class --- .../__snapshots__/spacing.less.test.ts.snap | 1344 ----------------- .../stacks-docs/_data/atomic/box-sizing.json | 2 +- .../stacks-docs/_data/atomic/display.json | 6 +- packages/stacks-docs/_data/atomic/flex.json | 2 +- packages/stacks-docs/_data/atomic/float.json | 2 +- .../_data/atomic/interactivity.json | 2 +- .../stacks-docs/_data/atomic/position.json | 10 +- .../_data/components/button-groups.json | 6 +- .../stacks-docs/_data/components/inputs.json | 26 +- .../_data/components/link-previews.json | 2 +- .../stacks-docs/_data/components/modals.json | 16 +- .../_data/components/navigation.json | 20 +- .../stacks-docs/_data/components/notices.json | 10 +- .../_data/components/popovers.json | 8 +- .../_data/components/tags-component.json | 4 +- .../_data/components/uploader-component.json | 24 +- .../_data/components/user-card.json | 2 +- .../assets/less/stacks-documentation.less | 206 +-- packages/stacks-docs/brand/colors.html | 102 +- .../stacks-docs/brand/copywriting/naming.html | 6 +- packages/stacks-docs/brand/logo.html | 2 +- .../content/examples/alt-text.html | 4 +- .../guidelines/grammar-and-mechanics.html | 2 +- packages/stacks-docs/email/base/mso.html | 48 +- .../email/base/responsiveness.html | 2 +- .../stacks-docs/email/base/typography.html | 10 +- .../stacks-docs/email/components/footers.html | 2 +- .../stacks-docs/email/components/images.html | 58 +- .../stacks-docs/email/components/spacers.html | 18 +- .../stacks-docs/email/components/tags.html | 4 +- .../email/components/team-identification.html | 2 +- .../guidelines/design-best-practices.html | 22 +- .../stacks-docs/email/guidelines/faq.html | 22 +- .../stacks-docs/email/patterns/columns.html | 2 +- packages/stacks-docs/plugins/markdown.js | 9 - .../stacks-docs/product/base/backgrounds.html | 22 +- .../product/base/border-radius.html | 4 +- .../stacks-docs/product/base/borders.html | 12 +- .../stacks-docs/product/base/box-shadow.html | 4 +- .../stacks-docs/product/base/box-sizing.html | 4 +- .../product/base/current-color.html | 8 +- .../stacks-docs/product/base/cursors.html | 6 +- .../stacks-docs/product/base/display.html | 4 +- packages/stacks-docs/product/base/flex.html | 76 +- packages/stacks-docs/product/base/floats.html | 6 +- packages/stacks-docs/product/base/gap.html | 20 +- packages/stacks-docs/product/base/grid.html | 50 +- packages/stacks-docs/product/base/height.html | 38 +- .../product/base/interactivity.html | 20 +- packages/stacks-docs/product/base/lists.html | 8 +- packages/stacks-docs/product/base/margin.html | 6 +- .../stacks-docs/product/base/object-fit.html | 8 +- .../stacks-docs/product/base/opacity.html | 6 +- .../stacks-docs/product/base/outline.html | 6 +- .../stacks-docs/product/base/overflow.html | 6 +- .../stacks-docs/product/base/padding.html | 2 +- .../stacks-docs/product/base/position.html | 12 +- .../stacks-docs/product/base/transitions.html | 8 +- .../stacks-docs/product/base/truncation.html | 16 +- .../product/base/vertical-alignment.html | 6 +- .../stacks-docs/product/base/visibility.html | 4 +- packages/stacks-docs/product/base/width.html | 38 +- .../stacks-docs/product/base/z-index.html | 6 +- .../components/activity-indicator.html | 8 +- .../product/components/avatars.html | 74 +- .../product/components/badges.html | 30 +- .../product/components/banners.html | 52 +- .../stacks-docs/product/components/bling.html | 16 +- .../product/components/breadcrumbs.html | 8 +- .../product/components/button-groups.html | 18 +- .../product/components/buttons.html | 98 +- .../stacks-docs/product/components/cards.html | 8 +- .../product/components/checkbox.html | 16 +- .../product/components/code-blocks.html | 22 +- .../product/components/editor.html | 2 +- .../product/components/expandable.html | 24 +- .../product/components/inputs.html | 28 +- .../product/components/labels.html | 4 +- .../product/components/link-previews.html | 20 +- .../stacks-docs/product/components/links.html | 34 +- .../product/components/loader.html | 39 +- .../stacks-docs/product/components/menus.html | 12 +- .../product/components/modals.html | 98 +- .../product/components/navigation.html | 80 +- .../product/components/notices.html | 74 +- .../product/components/page-titles.html | 2 +- .../product/components/pagination.html | 6 +- .../product/components/popovers.html | 130 +- .../product/components/post-summary.html | 6 +- .../product/components/progress-bars.html | 92 +- .../stacks-docs/product/components/prose.html | 10 +- .../stacks-docs/product/components/radio.html | 16 +- .../product/components/select.html | 8 +- .../product/components/sidebar-widgets.html | 4 +- .../product/components/tables.html | 30 +- .../stacks-docs/product/components/tags.html | 12 +- .../product/components/textarea.html | 6 +- .../product/components/toggle-switch.html | 10 +- .../product/components/topbar.html | 4 +- .../product/components/uploader.html | 40 +- .../product/components/user-cards.html | 18 +- .../stacks-docs/product/components/vote.html | 12 +- .../stacks-docs/product/develop/building.html | 8 +- .../product/develop/conditional-classes.html | 24 +- .../product/develop/javascript.html | 12 +- .../product/develop/using-stacks.html | 8 +- .../product/foundation/accessibility.html | 12 +- .../foundation/color-fundamentals.html | 6 +- .../stacks-docs/product/foundation/icons.html | 8 +- .../product/foundation/theming.html | 30 +- .../product/foundation/typography.html | 40 +- 111 files changed, 1195 insertions(+), 2537 deletions(-) delete mode 100644 packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap 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 deleted file mode 100644 index bbf487168f..0000000000 --- a/packages/stacks-classic/lib/atomic/__snapshots__/spacing.less.test.ts.snap +++ /dev/null @@ -1,1344 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`atomic: spacing > should output all atomic spacing classes 1`] = ` -".m-auto { - margin: auto !important; -} - -.m0 { - margin: var(--su0) !important; -} - -.m1 { - margin: var(--su1) !important; -} - -.m2 { - margin: var(--su2) !important; -} - -.m4 { - margin: var(--su4) !important; -} - -.m6 { - margin: var(--su6) !important; -} - -.m8 { - margin: var(--su8) !important; -} - -.m12 { - margin: var(--su12) !important; -} - -.m16 { - margin: var(--su16) !important; -} - -.m24 { - margin: var(--su24) !important; -} - -.m32 { - margin: var(--su32) !important; -} - -.m48 { - margin: var(--su48) !important; -} - -.m64 { - margin: var(--su64) !important; -} - -.m96 { - margin: var(--su96) !important; -} - -.m128 { - margin: var(--su128) !important; -} - -.mn1 { - margin: var(--sun1) !important; -} - -.mn2 { - margin: var(--sun2) !important; -} - -.mn4 { - margin: var(--sun4) !important; -} - -.mn6 { - margin: var(--sun6) !important; -} - -.mn8 { - margin: var(--sun8) !important; -} - -.mn12 { - margin: var(--sun12) !important; -} - -.mn16 { - margin: var(--sun16) !important; -} - -.mn24 { - margin: var(--sun24) !important; -} - -.mn32 { - margin: var(--sun32) !important; -} - -.mn48 { - margin: var(--sun48) !important; -} - -.mn64 { - margin: var(--sun64) !important; -} - -.mn96 { - margin: var(--sun96) !important; -} - -.mn128 { - margin: var(--sun128) !important; -} - -.m50 { - margin: 50% !important; -} - -.m100 { - margin: 100% !important; -} - -.mn50 { - margin: -50% !important; -} - -.mn100 { - margin: -100% !important; -} - -.mt-auto { - margin-top: auto !important; -} - -.mt0 { - margin-top: var(--su0) !important; -} - -.mt1 { - margin-top: var(--su1) !important; -} - -.mt2 { - margin-top: var(--su2) !important; -} - -.mt4 { - margin-top: var(--su4) !important; -} - -.mt6 { - margin-top: var(--su6) !important; -} - -.mt8 { - margin-top: var(--su8) !important; -} - -.mt12 { - margin-top: var(--su12) !important; -} - -.mt16 { - margin-top: var(--su16) !important; -} - -.mt24 { - margin-top: var(--su24) !important; -} - -.mt32 { - margin-top: var(--su32) !important; -} - -.mt48 { - margin-top: var(--su48) !important; -} - -.mt64 { - margin-top: var(--su64) !important; -} - -.mt96 { - margin-top: var(--su96) !important; -} - -.mt128 { - margin-top: var(--su128) !important; -} - -.mtn1 { - margin-top: var(--sun1) !important; -} - -.mtn2 { - margin-top: var(--sun2) !important; -} - -.mtn4 { - margin-top: var(--sun4) !important; -} - -.mtn6 { - margin-top: var(--sun6) !important; -} - -.mtn8 { - margin-top: var(--sun8) !important; -} - -.mtn12 { - margin-top: var(--sun12) !important; -} - -.mtn16 { - margin-top: var(--sun16) !important; -} - -.mtn24 { - margin-top: var(--sun24) !important; -} - -.mtn32 { - margin-top: var(--sun32) !important; -} - -.mtn48 { - margin-top: var(--sun48) !important; -} - -.mtn64 { - margin-top: var(--sun64) !important; -} - -.mtn96 { - margin-top: var(--sun96) !important; -} - -.mtn128 { - margin-top: var(--sun128) !important; -} - -.mt50 { - margin-top: 50% !important; -} - -.mt100 { - margin-top: 100% !important; -} - -.mtn50 { - margin-top: -50% !important; -} - -.mtn100 { - margin-top: -100% !important; -} - -.mr-auto { - margin-right: auto !important; -} - -.mr0 { - margin-right: var(--su0) !important; -} - -.mr1 { - margin-right: var(--su1) !important; -} - -.mr2 { - margin-right: var(--su2) !important; -} - -.mr4 { - margin-right: var(--su4) !important; -} - -.mr6 { - margin-right: var(--su6) !important; -} - -.mr8 { - margin-right: var(--su8) !important; -} - -.mr12 { - margin-right: var(--su12) !important; -} - -.mr16 { - margin-right: var(--su16) !important; -} - -.mr24 { - margin-right: var(--su24) !important; -} - -.mr32 { - margin-right: var(--su32) !important; -} - -.mr48 { - margin-right: var(--su48) !important; -} - -.mr64 { - margin-right: var(--su64) !important; -} - -.mr96 { - margin-right: var(--su96) !important; -} - -.mr128 { - margin-right: var(--su128) !important; -} - -.mrn1 { - margin-right: var(--sun1) !important; -} - -.mrn2 { - margin-right: var(--sun2) !important; -} - -.mrn4 { - margin-right: var(--sun4) !important; -} - -.mrn6 { - margin-right: var(--sun6) !important; -} - -.mrn8 { - margin-right: var(--sun8) !important; -} - -.mrn12 { - margin-right: var(--sun12) !important; -} - -.mrn16 { - margin-right: var(--sun16) !important; -} - -.mrn24 { - margin-right: var(--sun24) !important; -} - -.mrn32 { - margin-right: var(--sun32) !important; -} - -.mrn48 { - margin-right: var(--sun48) !important; -} - -.mrn64 { - margin-right: var(--sun64) !important; -} - -.mrn96 { - margin-right: var(--sun96) !important; -} - -.mrn128 { - margin-right: var(--sun128) !important; -} - -.mr50 { - margin-right: 50% !important; -} - -.mr100 { - margin-right: 100% !important; -} - -.mrn50 { - margin-right: -50% !important; -} - -.mrn100 { - margin-right: -100% !important; -} - -.mb-auto { - margin-bottom: auto !important; -} - -.mb0 { - margin-bottom: var(--su0) !important; -} - -.mb1 { - margin-bottom: var(--su1) !important; -} - -.mb2 { - margin-bottom: var(--su2) !important; -} - -.mb4 { - margin-bottom: var(--su4) !important; -} - -.mb6 { - margin-bottom: var(--su6) !important; -} - -.mb8 { - margin-bottom: var(--su8) !important; -} - -.mb12 { - margin-bottom: var(--su12) !important; -} - -.mb16 { - margin-bottom: var(--su16) !important; -} - -.mb24 { - margin-bottom: var(--su24) !important; -} - -.mb32 { - margin-bottom: var(--su32) !important; -} - -.mb48 { - margin-bottom: var(--su48) !important; -} - -.mb64 { - margin-bottom: var(--su64) !important; -} - -.mb96 { - margin-bottom: var(--su96) !important; -} - -.mb128 { - margin-bottom: var(--su128) !important; -} - -.mbn1 { - margin-bottom: var(--sun1) !important; -} - -.mbn2 { - margin-bottom: var(--sun2) !important; -} - -.mbn4 { - margin-bottom: var(--sun4) !important; -} - -.mbn6 { - margin-bottom: var(--sun6) !important; -} - -.mbn8 { - margin-bottom: var(--sun8) !important; -} - -.mbn12 { - margin-bottom: var(--sun12) !important; -} - -.mbn16 { - margin-bottom: var(--sun16) !important; -} - -.mbn24 { - margin-bottom: var(--sun24) !important; -} - -.mbn32 { - margin-bottom: var(--sun32) !important; -} - -.mbn48 { - margin-bottom: var(--sun48) !important; -} - -.mbn64 { - margin-bottom: var(--sun64) !important; -} - -.mbn96 { - margin-bottom: var(--sun96) !important; -} - -.mbn128 { - margin-bottom: var(--sun128) !important; -} - -.mb50 { - margin-bottom: 50% !important; -} - -.mb100 { - margin-bottom: 100% !important; -} - -.mbn50 { - margin-bottom: -50% !important; -} - -.mbn100 { - margin-bottom: -100% !important; -} - -.ml-auto { - margin-left: auto !important; -} - -.ml0 { - margin-left: var(--su0) !important; -} - -.ml1 { - margin-left: var(--su1) !important; -} - -.ml2 { - margin-left: var(--su2) !important; -} - -.ml4 { - margin-left: var(--su4) !important; -} - -.ml6 { - margin-left: var(--su6) !important; -} - -.ml8 { - margin-left: var(--su8) !important; -} - -.ml12 { - margin-left: var(--su12) !important; -} - -.ml16 { - margin-left: var(--su16) !important; -} - -.ml24 { - margin-left: var(--su24) !important; -} - -.ml32 { - margin-left: var(--su32) !important; -} - -.ml48 { - margin-left: var(--su48) !important; -} - -.ml64 { - margin-left: var(--su64) !important; -} - -.ml96 { - margin-left: var(--su96) !important; -} - -.ml128 { - margin-left: var(--su128) !important; -} - -.mln1 { - margin-left: var(--sun1) !important; -} - -.mln2 { - margin-left: var(--sun2) !important; -} - -.mln4 { - margin-left: var(--sun4) !important; -} - -.mln6 { - margin-left: var(--sun6) !important; -} - -.mln8 { - margin-left: var(--sun8) !important; -} - -.mln12 { - margin-left: var(--sun12) !important; -} - -.mln16 { - margin-left: var(--sun16) !important; -} - -.mln24 { - margin-left: var(--sun24) !important; -} - -.mln32 { - margin-left: var(--sun32) !important; -} - -.mln48 { - margin-left: var(--sun48) !important; -} - -.mln64 { - margin-left: var(--sun64) !important; -} - -.mln96 { - margin-left: var(--sun96) !important; -} - -.mln128 { - margin-left: var(--sun128) !important; -} - -.ml50 { - margin-left: 50% !important; -} - -.ml100 { - margin-left: 100% !important; -} - -.mln50 { - margin-left: -50% !important; -} - -.mln100 { - margin-left: -100% !important; -} - -.mx-auto { - margin-left: auto !important; - margin-right: auto !important; -} - -.my-auto { - margin-top: auto !important; - margin-bottom: auto !important; -} - -.mx0 { - margin-left: var(--su0) !important; - margin-right: var(--su0) !important; -} - -.mx1 { - margin-left: var(--su1) !important; - margin-right: var(--su1) !important; -} - -.mx2 { - margin-left: var(--su2) !important; - margin-right: var(--su2) !important; -} - -.mx4 { - margin-left: var(--su4) !important; - margin-right: var(--su4) !important; -} - -.mx6 { - margin-left: var(--su6) !important; - margin-right: var(--su6) !important; -} - -.mx8 { - margin-left: var(--su8) !important; - margin-right: var(--su8) !important; -} - -.mx12 { - margin-left: var(--su12) !important; - margin-right: var(--su12) !important; -} - -.mx16 { - margin-left: var(--su16) !important; - margin-right: var(--su16) !important; -} - -.mx24 { - margin-left: var(--su24) !important; - margin-right: var(--su24) !important; -} - -.mx32 { - margin-left: var(--su32) !important; - margin-right: var(--su32) !important; -} - -.mx48 { - margin-left: var(--su48) !important; - margin-right: var(--su48) !important; -} - -.mx64 { - margin-left: var(--su64) !important; - margin-right: var(--su64) !important; -} - -.mx96 { - margin-left: var(--su96) !important; - margin-right: var(--su96) !important; -} - -.mx128 { - margin-left: var(--su128) !important; - margin-right: var(--su128) !important; -} - -.mxn1 { - margin-left: var(--sun1) !important; - margin-right: var(--sun1) !important; -} - -.mxn2 { - margin-left: var(--sun2) !important; - margin-right: var(--sun2) !important; -} - -.mxn4 { - margin-left: var(--sun4) !important; - margin-right: var(--sun4) !important; -} - -.mxn6 { - margin-left: var(--sun6) !important; - margin-right: var(--sun6) !important; -} - -.mxn8 { - margin-left: var(--sun8) !important; - margin-right: var(--sun8) !important; -} - -.mxn12 { - margin-left: var(--sun12) !important; - margin-right: var(--sun12) !important; -} - -.mxn16 { - margin-left: var(--sun16) !important; - margin-right: var(--sun16) !important; -} - -.mxn24 { - margin-left: var(--sun24) !important; - margin-right: var(--sun24) !important; -} - -.mxn32 { - margin-left: var(--sun32) !important; - margin-right: var(--sun32) !important; -} - -.mxn48 { - margin-left: var(--sun48) !important; - margin-right: var(--sun48) !important; -} - -.mxn64 { - margin-left: var(--sun64) !important; - margin-right: var(--sun64) !important; -} - -.mxn96 { - margin-left: var(--sun96) !important; - margin-right: var(--sun96) !important; -} - -.mxn128 { - margin-left: var(--sun128) !important; - margin-right: var(--sun128) !important; -} - -.my0 { - margin-top: var(--su0) !important; - margin-bottom: var(--su0) !important; -} - -.my1 { - margin-top: var(--su1) !important; - margin-bottom: var(--su1) !important; -} - -.my2 { - margin-top: var(--su2) !important; - margin-bottom: var(--su2) !important; -} - -.my4 { - margin-top: var(--su4) !important; - margin-bottom: var(--su4) !important; -} - -.my6 { - margin-top: var(--su6) !important; - margin-bottom: var(--su6) !important; -} - -.my8 { - margin-top: var(--su8) !important; - margin-bottom: var(--su8) !important; -} - -.my12 { - margin-top: var(--su12) !important; - margin-bottom: var(--su12) !important; -} - -.my16 { - margin-top: var(--su16) !important; - margin-bottom: var(--su16) !important; -} - -.my24 { - margin-top: var(--su24) !important; - margin-bottom: var(--su24) !important; -} - -.my32 { - margin-top: var(--su32) !important; - margin-bottom: var(--su32) !important; -} - -.my48 { - margin-top: var(--su48) !important; - margin-bottom: var(--su48) !important; -} - -.my64 { - margin-top: var(--su64) !important; - margin-bottom: var(--su64) !important; -} - -.my96 { - margin-top: var(--su96) !important; - margin-bottom: var(--su96) !important; -} - -.my128 { - margin-top: var(--su128) !important; - margin-bottom: var(--su128) !important; -} - -.myn1 { - margin-top: var(--sun1) !important; - margin-bottom: var(--sun1) !important; -} - -.myn2 { - margin-top: var(--sun2) !important; - margin-bottom: var(--sun2) !important; -} - -.myn4 { - margin-top: var(--sun4) !important; - margin-bottom: var(--sun4) !important; -} - -.myn6 { - margin-top: var(--sun6) !important; - margin-bottom: var(--sun6) !important; -} - -.myn8 { - margin-top: var(--sun8) !important; - margin-bottom: var(--sun8) !important; -} - -.myn12 { - margin-top: var(--sun12) !important; - margin-bottom: var(--sun12) !important; -} - -.myn16 { - margin-top: var(--sun16) !important; - margin-bottom: var(--sun16) !important; -} - -.myn24 { - margin-top: var(--sun24) !important; - margin-bottom: var(--sun24) !important; -} - -.myn32 { - margin-top: var(--sun32) !important; - margin-bottom: var(--sun32) !important; -} - -.myn48 { - margin-top: var(--sun48) !important; - margin-bottom: var(--sun48) !important; -} - -.myn64 { - margin-top: var(--sun64) !important; - margin-bottom: var(--sun64) !important; -} - -.myn96 { - margin-top: var(--sun96) !important; - margin-bottom: var(--sun96) !important; -} - -.myn128 { - margin-top: var(--sun128) !important; - margin-bottom: var(--sun128) !important; -} - -.p0 { - padding: var(--su0) !important; -} - -.p1 { - padding: var(--su1) !important; -} - -.p2 { - padding: var(--su2) !important; -} - -.p4 { - padding: var(--su4) !important; -} - -.p6 { - padding: var(--su6) !important; -} - -.p8 { - padding: var(--su8) !important; -} - -.p12 { - padding: var(--su12) !important; -} - -.p16 { - padding: var(--su16) !important; -} - -.p24 { - padding: var(--su24) !important; -} - -.p32 { - padding: var(--su32) !important; -} - -.p48 { - padding: var(--su48) !important; -} - -.p64 { - padding: var(--su64) !important; -} - -.p96 { - padding: var(--su96) !important; -} - -.p128 { - padding: var(--su128) !important; -} - -.pt0 { - padding-top: var(--su0) !important; -} - -.pt1 { - padding-top: var(--su1) !important; -} - -.pt2 { - padding-top: var(--su2) !important; -} - -.pt4 { - padding-top: var(--su4) !important; -} - -.pt6 { - padding-top: var(--su6) !important; -} - -.pt8 { - padding-top: var(--su8) !important; -} - -.pt12 { - padding-top: var(--su12) !important; -} - -.pt16 { - padding-top: var(--su16) !important; -} - -.pt24 { - padding-top: var(--su24) !important; -} - -.pt32 { - padding-top: var(--su32) !important; -} - -.pt48 { - padding-top: var(--su48) !important; -} - -.pt64 { - padding-top: var(--su64) !important; -} - -.pt96 { - padding-top: var(--su96) !important; -} - -.pt128 { - padding-top: var(--su128) !important; -} - -.pr0 { - padding-right: var(--su0) !important; -} - -.pr1 { - padding-right: var(--su1) !important; -} - -.pr2 { - padding-right: var(--su2) !important; -} - -.pr4 { - padding-right: var(--su4) !important; -} - -.pr6 { - padding-right: var(--su6) !important; -} - -.pr8 { - padding-right: var(--su8) !important; -} - -.pr12 { - padding-right: var(--su12) !important; -} - -.pr16 { - padding-right: var(--su16) !important; -} - -.pr24 { - padding-right: var(--su24) !important; -} - -.pr32 { - padding-right: var(--su32) !important; -} - -.pr48 { - padding-right: var(--su48) !important; -} - -.pr64 { - padding-right: var(--su64) !important; -} - -.pr96 { - padding-right: var(--su96) !important; -} - -.pr128 { - padding-right: var(--su128) !important; -} - -.pb0 { - padding-bottom: var(--su0) !important; -} - -.pb1 { - padding-bottom: var(--su1) !important; -} - -.pb2 { - padding-bottom: var(--su2) !important; -} - -.pb4 { - padding-bottom: var(--su4) !important; -} - -.pb6 { - padding-bottom: var(--su6) !important; -} - -.pb8 { - padding-bottom: var(--su8) !important; -} - -.pb12 { - padding-bottom: var(--su12) !important; -} - -.pb16 { - padding-bottom: var(--su16) !important; -} - -.pb24 { - padding-bottom: var(--su24) !important; -} - -.pb32 { - padding-bottom: var(--su32) !important; -} - -.pb48 { - padding-bottom: var(--su48) !important; -} - -.pb64 { - padding-bottom: var(--su64) !important; -} - -.pb96 { - padding-bottom: var(--su96) !important; -} - -.pb128 { - padding-bottom: var(--su128) !important; -} - -.pl0 { - padding-left: var(--su0) !important; -} - -.pl1 { - padding-left: var(--su1) !important; -} - -.pl2 { - padding-left: var(--su2) !important; -} - -.pl4 { - padding-left: var(--su4) !important; -} - -.pl6 { - padding-left: var(--su6) !important; -} - -.pl8 { - padding-left: var(--su8) !important; -} - -.pl12 { - padding-left: var(--su12) !important; -} - -.pl16 { - padding-left: var(--su16) !important; -} - -.pl24 { - padding-left: var(--su24) !important; -} - -.pl32 { - padding-left: var(--su32) !important; -} - -.pl48 { - padding-left: var(--su48) !important; -} - -.pl64 { - padding-left: var(--su64) !important; -} - -.pl96 { - padding-left: var(--su96) !important; -} - -.pl128 { - padding-left: var(--su128) !important; -} - -.px0 { - padding-left: var(--su0) !important; - padding-right: var(--su0) !important; -} - -.px1 { - padding-left: var(--su1) !important; - padding-right: var(--su1) !important; -} - -.px2 { - padding-left: var(--su2) !important; - padding-right: var(--su2) !important; -} - -.px4 { - padding-left: var(--su4) !important; - padding-right: var(--su4) !important; -} - -.px6 { - padding-left: var(--su6) !important; - padding-right: var(--su6) !important; -} - -.px8 { - padding-left: var(--su8) !important; - padding-right: var(--su8) !important; -} - -.px12 { - padding-left: var(--su12) !important; - padding-right: var(--su12) !important; -} - -.px16 { - padding-left: var(--su16) !important; - padding-right: var(--su16) !important; -} - -.px24 { - padding-left: var(--su24) !important; - padding-right: var(--su24) !important; -} - -.px32 { - padding-left: var(--su32) !important; - padding-right: var(--su32) !important; -} - -.px48 { - padding-left: var(--su48) !important; - padding-right: var(--su48) !important; -} - -.px64 { - padding-left: var(--su64) !important; - padding-right: var(--su64) !important; -} - -.px96 { - padding-left: var(--su96) !important; - padding-right: var(--su96) !important; -} - -.px128 { - padding-left: var(--su128) !important; - padding-right: var(--su128) !important; -} - -.py0 { - padding-top: var(--su0) !important; - padding-bottom: var(--su0) !important; -} - -.py1 { - padding-top: var(--su1) !important; - padding-bottom: var(--su1) !important; -} - -.py2 { - padding-top: var(--su2) !important; - padding-bottom: var(--su2) !important; -} - -.py4 { - padding-top: var(--su4) !important; - padding-bottom: var(--su4) !important; -} - -.py6 { - padding-top: var(--su6) !important; - padding-bottom: var(--su6) !important; -} - -.py8 { - padding-top: var(--su8) !important; - padding-bottom: var(--su8) !important; -} - -.py12 { - padding-top: var(--su12) !important; - padding-bottom: var(--su12) !important; -} - -.py16 { - padding-top: var(--su16) !important; - padding-bottom: var(--su16) !important; -} - -.py24 { - padding-top: var(--su24) !important; - padding-bottom: var(--su24) !important; -} - -.py32 { - padding-top: var(--su32) !important; - padding-bottom: var(--su32) !important; -} - -.py48 { - padding-top: var(--su48) !important; - padding-bottom: var(--su48) !important; -} - -.py64 { - padding-top: var(--su64) !important; - padding-bottom: var(--su64) !important; -} - -.py96 { - padding-top: var(--su96) !important; - padding-bottom: var(--su96) !important; -} - -.py128 { - padding-top: var(--su128) !important; - padding-bottom: var(--su128) !important; -} -" -`; diff --git a/packages/stacks-docs/_data/atomic/box-sizing.json b/packages/stacks-docs/_data/atomic/box-sizing.json index 7c20aeb1f7..fa305b1cf1 100644 --- a/packages/stacks-docs/_data/atomic/box-sizing.json +++ b/packages/stacks-docs/_data/atomic/box-sizing.json @@ -15,7 +15,7 @@ { "class": "box-unset", "output": "box-sizing: unset;", - "define": "

Removes the previously set box-sizing value, reverting it back to the initial browser value.

", + "define": "

Removes the previously set box-sizing value, reverting it back to the initial browser value.

", "responsive": false } ] diff --git a/packages/stacks-docs/_data/atomic/display.json b/packages/stacks-docs/_data/atomic/display.json index 0b8bb7856c..a33d8e7117 100644 --- a/packages/stacks-docs/_data/atomic/display.json +++ b/packages/stacks-docs/_data/atomic/display.json @@ -46,19 +46,19 @@ { "class": "d-table", "output": "display: table;", - "define": "

This makes your element behave like table HTML elements. It defines a block-level box.

", + "define": "

This makes your element behave like table HTML elements. It defines a block-level box.

", "responsive": false }, { "class": "d-table-cell", "output": "display: table-cell;", - "define": "

These elements behave like td HTML elements.

", + "define": "

These elements behave like td HTML elements.

", "responsive": false }, { "class": "d-none", "output": "display: none;", - "define": "

Effectively removes the element from the DOM. Useful for showing / hiding elements.

To hide things when the page is printed, apply .print:d-none

", + "define": "

Effectively removes the element from the DOM. Useful for showing / hiding elements.

To hide things when the page is printed, apply .print:d-none

", "responsive": true, "print": true }, diff --git a/packages/stacks-docs/_data/atomic/flex.json b/packages/stacks-docs/_data/atomic/flex.json index ecf45be56a..c72c6fe4df 100644 --- a/packages/stacks-docs/_data/atomic/flex.json +++ b/packages/stacks-docs/_data/atomic/flex.json @@ -323,7 +323,7 @@ }, { "class": ".fl-equal", - "define": "Allow a flex item to grow and shrink as needed, ignoring its initial size. If all children within a flex layout have ..fl-equal enabled, they’ll be the same size. See also .flex__fl-equal", + "define": "Allow a flex item to grow and shrink as needed, ignoring its initial size. If all children within a flex layout have ..fl-equal enabled, they’ll be the same size. See also .flex__fl-equal", "responsive": true } ], diff --git a/packages/stacks-docs/_data/atomic/float.json b/packages/stacks-docs/_data/atomic/float.json index c1b80d3881..16346fd04d 100644 --- a/packages/stacks-docs/_data/atomic/float.json +++ b/packages/stacks-docs/_data/atomic/float.json @@ -21,7 +21,7 @@ { "class": "clearfix", "output": ".clearfix();", - "define": "

This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.

", + "define": "

This class calls the .clearfix(); mixin, which fixes a layout bug. Floating an object takes it out of the DOM order. When all child itmes within a parent container contain a float property then, the parent container will collapse. The .clearfix class forces the parent container to not collapse.

", "responsive": false }, { diff --git a/packages/stacks-docs/_data/atomic/interactivity.json b/packages/stacks-docs/_data/atomic/interactivity.json index 0b3d2d7317..cb30049bb3 100644 --- a/packages/stacks-docs/_data/atomic/interactivity.json +++ b/packages/stacks-docs/_data/atomic/interactivity.json @@ -49,7 +49,7 @@ { "class": "us-none", "output": "user-select: none;", - "define": "

The text of the element and its sub-elements is not selectable. It may be appropriate to combine with .c-default

", + "define": "

The text of the element and its sub-elements is not selectable. It may be appropriate to combine with .c-default

", "responsive": false } ] diff --git a/packages/stacks-docs/_data/atomic/position.json b/packages/stacks-docs/_data/atomic/position.json index 7c89ca8b11..f22c8589d5 100644 --- a/packages/stacks-docs/_data/atomic/position.json +++ b/packages/stacks-docs/_data/atomic/position.json @@ -3,31 +3,31 @@ { "class": "ps-absolute", "output": "position: absolute;", - "define": "

Absolutely positions an element. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don’t have a z-index assigned.

", + "define": "

Absolutely positions an element. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Absolutely positioning an element takes it out of the DOM flow and puts it automatically above all relatively positioned items which don’t have a z-index assigned.

", "responsive": true }, { "class": "ps-fixed", "output": "position: fixed;", - "define": "

Fixes an element within the viewport. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Fixing an element’s position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.

", + "define": "

Fixes an element within the viewport. Typically is used in conjunction with top, right, bottom, and left properties.

Note: Fixing an element’s position, like absolute positioning, takes it out of the DOM flow and puts it automatically above all relatively positioned items.

", "responsive": true }, { "class": "ps-relative", "output": "position: relative;", - "define": "

Relatively positions an element in relation to elements around it. The top and bottom properties specify the vertical offset from its normal position. In the same way the left and right properties specify the horizontal offset.

", + "define": "

Relatively positions an element in relation to elements around it. The top and bottom properties specify the vertical offset from its normal position. In the same way the left and right properties specify the horizontal offset.

", "responsive": true }, { "class": "ps-static", "output": "position: static;", - "define": "

An element is positioned according to the document’s flow. The top, right, bottom, left, and z-index properties have no effect.

This is the default value.

", + "define": "

An element is positioned according to the document’s flow. The top, right, bottom, left, and z-index properties have no effect.

This is the default value.

", "responsive": true }, { "class": "ps-sticky", "output": "position: sticky;", - "define": "

An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.

Notes:
Sticky elements, by design, will not work inside an element with overflow:hidden; or overflow:auto; values.

", + "define": "

An element is positioned according to the document's flow, and then offset relative to its flow root and containing block. This creates a new stacking context.

Notes:
Sticky elements, by design, will not work inside an element with overflow:hidden; or overflow:auto; values.

", "responsive": true } ], diff --git a/packages/stacks-docs/_data/components/button-groups.json b/packages/stacks-docs/_data/components/button-groups.json index be92e1a1e7..11ee7a5c00 100644 --- a/packages/stacks-docs/_data/components/button-groups.json +++ b/packages/stacks-docs/_data/components/button-groups.json @@ -9,18 +9,18 @@ "button-attributes": [ { "title": "Accessibility", - "description": "When used as navigation or a filter, button groups should include the aria-current attribute with the appropriate value.", + "description": "When used as navigation or a filter, button groups should include the aria-current attribute with the appropriate value.", "attributes": [ { "attribute": "aria-current=\"[value]\"", "applies": ".s-btn.is-selected", - "description": "When using a button group for navigation or filtering, include the aria-current attribute with the appropriate value to the selected button. Most commonly used values are page, step, and true." + "description": "When using a button group for navigation or filtering, include the aria-current attribute with the appropriate value to the selected button. Most commonly used values are page, step, and true." } ] }, { "title": "Preventing layout shift", - "description": "Horizontal layout shift may occur when changing which button is selected within a button group. We recommend including the data-text attribute on each button text element with the value duplicating the text of the button to prevent the layout shift. See below for examples.", + "description": "Horizontal layout shift may occur when changing which button is selected within a button group. We recommend including the data-text attribute on each button text element with the value duplicating the text of the button to prevent the layout shift. See below for examples.", "attributes": [ { "attribute": "data-text=\"[value]\"", diff --git a/packages/stacks-docs/_data/components/inputs.json b/packages/stacks-docs/_data/components/inputs.json index 30ad56f726..73bda46c93 100644 --- a/packages/stacks-docs/_data/components/inputs.json +++ b/packages/stacks-docs/_data/components/inputs.json @@ -58,7 +58,7 @@ { "name": "file", "html5": false, - "description": "Allows user to select a file. To define the type of files that can be selected, use the accept=\"\" attribute." + "description": "Allows user to select a file. To define the type of files that can be selected, use the accept=\"\" attribute." }, { "name": "month", @@ -73,7 +73,7 @@ { "name": "password", "html5": false, - "description": "Single-line text input whose value is obsecured. Use the minlength and maxlength attributes to specify the value length." + "description": "Single-line text input whose value is obsecured. Use the minlength and maxlength attributes to specify the value length." }, { "name": "range", @@ -117,7 +117,7 @@ { "name": "accept", "html5": false, - "description": "If the type is file, then this attribute will indicate the file types that will be accepted. The value must be a comma-separated list." + "description": "If the type is file, then this attribute will indicate the file types that will be accepted. The value must be a comma-separated list." }, { "name": "autocomplete", @@ -127,12 +127,12 @@ { "name": "autofocus", "html5": true, - "description": "Lets you specify which form control should have input focus on page load. Only one element can have this attribute and it cannot be set on hidden elements." + "description": "Lets you specify which form control should have input focus on page load. Only one element can have this attribute and it cannot be set on hidden elements." }, { "name": "capture", "html5": false, - "description": "If the type is file, then this Boolean attribute will indicate that the capture of media directly from the device's environment using a media capture mechanicism is preferred (e.g. taking a photo using a camera)." + "description": "If the type is file, then this Boolean attribute will indicate that the capture of media directly from the device's environment using a media capture mechanicism is preferred (e.g. taking a photo using a camera)." }, { "name": "disabled", @@ -142,7 +142,7 @@ { "name": "form", "html5": true, - "description": "This attribute associates the form element with the input element. The input value must be the form's id value within the same document. If this isn't specified, the input will use the closest ancestor form element. This attribute allows you to place inputs anywhere on the page, not just as a descendant within a form element. An input can only be associated with one form." + "description": "This attribute associates the form element with the input element. The input value must be the form's id value within the same document. If this isn't specified, the input will use the closest ancestor form element. This attribute allows you to place inputs anywhere on the page, not just as a descendant within a form element. An input can only be associated with one form." }, { "name": "max", @@ -152,7 +152,7 @@ { "name": "maxlength", "html5": true, - "description": "If type is text, email, search, password, tel, or url; this attribute sets the maximum number of characters that can be entered." + "description": "If type is text, email, search, password, tel, or url; this attribute sets the maximum number of characters that can be entered." }, { "name": "min", @@ -162,12 +162,12 @@ { "name": "minlength", "html5": true, - "description": "If type is text, email, search, password, tel, or url; this attribute sets the minimum number of characters that must be entered." + "description": "If type is text, email, search, password, tel, or url; this attribute sets the minimum number of characters that must be entered." }, { "name": "multiple", "html5": true, - "description": "If type is email or file, this attribute allows for more than one value." + "description": "If type is email or file, this attribute allows for more than one value." }, { "name": "name", @@ -182,12 +182,12 @@ { "name": "readonly", "html5": true, - "description": "Indicates that the control cannot be modified by the user. This is ignored if the type attribute is hidden, range, color, checkbox, radio, or a button type." + "description": "Indicates that the control cannot be modified by the user. This is ignored if the type attribute is hidden, range, color, checkbox, radio, or a button type." }, { "name": "required", "html5": true, - "description": "Specifies that the user must provide a value for this control before submitting the form. This is ignored if the type attribute is hidden, image, or a button type." + "description": "Specifies that the user must provide a value for this control before submitting the form. This is ignored if the type attribute is hidden, image, or a button type." }, { "name": "selectionDirection", @@ -212,12 +212,12 @@ { "name": "spellcheck", "html5": true, - "description": "Setting the value to true indicates that the element needs to have its spelling and grammar checked." + "description": "Setting the value to true indicates that the element needs to have its spelling and grammar checked." }, { "name": "step", "html5": true, - "description": "Works with min and max attributes to limit the increments at which a numeric or date-time value can be set." + "description": "Works with min and max attributes to limit the increments at which a numeric or date-time value can be set." }, { "name": "tabindex", diff --git a/packages/stacks-docs/_data/components/link-previews.json b/packages/stacks-docs/_data/components/link-previews.json index 29eea71f9c..510b985493 100644 --- a/packages/stacks-docs/_data/components/link-previews.json +++ b/packages/stacks-docs/_data/components/link-previews.json @@ -53,7 +53,7 @@ { "class": ".linenums", "parent": ".s-link-preview--code", - "description": "Added to the pre of the preview block to properly display line numbers" + "description": "Added to the pre of the preview block to properly display line numbers" } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/modals.json b/packages/stacks-docs/_data/components/modals.json index ae2d069691..83e461d876 100644 --- a/packages/stacks-docs/_data/components/modals.json +++ b/packages/stacks-docs/_data/components/modals.json @@ -7,38 +7,38 @@ }, { "class": ".s-modal__danger", - "applies": ".s-modal", + "applies": ".s-modal", "description": "Adds styling for potentially dangerous actions" }, { "class": ".s-modal--dialog", - "applies": "Child of .s-modal", + "applies": "Child of .s-modal", "description": "Creates a container that holds the modal dialog with proper padding and shadows" }, { "class": ".s-modal--header", - "applies": "Child of .s-modal--dialog", + "applies": "Child of .s-modal--dialog", "description": "Adds proper styling to the modal dialog’s header" }, { "class": ".s-modal--body", - "applies": "Child of .s-modal--dialog", + "applies": "Child of .s-modal--dialog", "description": "Adds proper styling to the modal dialog’s body text" }, { "class": ".s-modal--footer", - "applies": "Child of .s-modal--dialog", + "applies": "Child of .s-modal--dialog", "description": "Adds the desired spacing to the row of button actions." }, { "class": ".s-modal--close", - "applies": "Child of .s-modal--dialog", + "applies": "Child of .s-modal--dialog", "description": "Used to dismiss a modal" }, { "class": ".s-modal__full", - "applies": ".s-modal--dialog", - "description": "Makes the .s-modal--dialog container take up as much of the screen as possible." + "applies": ".s-modal--dialog", + "description": "Makes the .s-modal--dialog container take up as much of the screen as possible." } ] } diff --git a/packages/stacks-docs/_data/components/navigation.json b/packages/stacks-docs/_data/components/navigation.json index c48fae9548..e60d4e5e79 100644 --- a/packages/stacks-docs/_data/components/navigation.json +++ b/packages/stacks-docs/_data/components/navigation.json @@ -7,54 +7,54 @@ }, { "class": ".s-navigation__vertical", - "applies": ".s-navigation", + "applies": ".s-navigation", "description": "Renders the navigation vertically" }, { "class": ".s-navigation__scroll", - "applies": ".s-navigation", + "applies": ".s-navigation", "description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations." }, { "class": ".s-navigation__sm", - "applies": ".s-navigation", + "applies": ".s-navigation", "description": "Tightens up the overall spacing and reduces the text size" }, { "class": ".s-navigation--item", - "applies": "Child of .s-navigation", + "applies": "Child of .s-navigation", "description": "The individual item in a navigation" }, { "class": ".s-navigation--item-text", - "applies": "Child of .s-navigation--item", + "applies": "Child of .s-navigation--item", "description": "The element meant to contain the text of the navigation item" }, { "class": ".s-navigation--icon", - "applies": "Child of .s-navigation--item", + "applies": "Child of .s-navigation--item", "description": "Applies styling to the icon of the navigation item" }, { "class": ".s-navigation--avatar", - "applies": "Child of .s-navigation--item", + "applies": "Child of .s-navigation--item", "description": "Applies styling to the avatar of the navigation item" }, { "class": ".is-selected", - "applies": ".s-navigation--item", + "applies": ".s-navigation--item", "description": "Applies to a navigation item that’s currently selected / active" }, { "class": ".s-navigation--item__dropdown", - "applies": ".s-navigation--item", + "applies": ".s-navigation--item", "description": "Adds a small caret that indicates a dropdown" } ], "navigation-attributes": [ { "title": "Preventing layout shift", - "description": "Horizontal layout shift may occur when changing which item is selected within the navigation component. We recommend including the data-text attribute on the child navigation item text element with the value duplicating the text of the item to prevent the layout shift. See below for examples.", + "description": "Horizontal layout shift may occur when changing which item is selected within the navigation component. We recommend including the data-text attribute on the child navigation item text element with the value duplicating the text of the item to prevent the layout shift. See below for examples.", "attributes": [ { "attribute": "data-text=\"[value]\"", diff --git a/packages/stacks-docs/_data/components/notices.json b/packages/stacks-docs/_data/components/notices.json index a50c1f8aa3..59a24206d8 100644 --- a/packages/stacks-docs/_data/components/notices.json +++ b/packages/stacks-docs/_data/components/notices.json @@ -99,13 +99,13 @@ { "item": "aria-labelledby=\"[id]\"", "applies": ".s-toast", - "description": "Used to reference the alert message within the dialog. If you are using .s-toast, this must be applied.", + "description": "Used to reference the alert message within the dialog. If you are using .s-toast, this must be applied.", "url": "https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby" }, { "item": "aria-hidden=\"[state]\"", "applies": ".s-toast", - "description": "Informs assistive technologies (such as screen readers) if they should ignore the element. When applied to .s-toast, Stacks will use this attribute to show or hide the toast.", + "description": "Informs assistive technologies (such as screen readers) if they should ignore the element. When applied to .s-toast, Stacks will use this attribute to show or hide the toast.", "url": "https://www.w3.org/TR/wai-aria-1.1/#aria-hidden" }, { @@ -117,19 +117,19 @@ { "item": "role=\"alert\"", "applies": ".s-notice", - "description": "A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit aria-live value of assertive and implicit aria-atomic value of true.", + "description": "A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit aria-live value of assertive and implicit aria-atomic value of true.", "url": "https://www.w3.org/TR/wai-aria-1.1/#alert" }, { "item": "role=\"alertdialog\"", "applies": ".s-toast", - "description": "The wrapping content area of an alert. Elements with the alertdialog role must use the aria-describedby attribute to reference the alert message within the dialog.", + "description": "The wrapping content area of an alert. Elements with the alertdialog role must use the aria-describedby attribute to reference the alert message within the dialog.", "url": "https://www.w3.org/TR/wai-aria-1.1/#alertdialog" }, { "item": "role=\"status\"", "applies": ".s-notice", - "description": "A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute.", + "description": "A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute.", "url": "https://www.w3.org/TR/wai-aria-1.1/#status" } ] diff --git a/packages/stacks-docs/_data/components/popovers.json b/packages/stacks-docs/_data/components/popovers.json index 982cb0b968..b14c792a3a 100644 --- a/packages/stacks-docs/_data/components/popovers.json +++ b/packages/stacks-docs/_data/components/popovers.json @@ -7,22 +7,22 @@ }, { "class": ".s-popover__tooltip", - "applies": ".s-popover", + "applies": ".s-popover", "description": "Removes minimum size constraints to support shorter tooltip text" }, { "class": ".is-visible", - "applies": ".s-popover", + "applies": ".s-popover", "description": "This class toggles the popover visibility" }, { "class": ".s-popover--close", - "applies": "Child of .s-popover", + "applies": "Child of .s-popover", "description": "Used to dismiss a popover" }, { "class": ".s-popover--content", - "applies": "Child of .s-popover", + "applies": "Child of .s-popover", "description": "Wrapper around the popover content to apply appropriate overflow styles" } ] diff --git a/packages/stacks-docs/_data/components/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json index bb8cb191a3..edd7083660 100644 --- a/packages/stacks-docs/_data/components/tags-component.json +++ b/packages/stacks-docs/_data/components/tags-component.json @@ -28,12 +28,12 @@ { "class": ".s-tag--dismiss", "applies": "N/A", - "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." + "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." }, { "class": ".s-tag--sponsor", "applies": "N/A", - "description": "A child element within .s-tag that correctly positions a tag’s sponsor logo." + "description": "A child element within .s-tag that correctly positions a tag’s sponsor logo." } ], "sizes": [ diff --git a/packages/stacks-docs/_data/components/uploader-component.json b/packages/stacks-docs/_data/components/uploader-component.json index d5f579d7ae..59744aebc4 100644 --- a/packages/stacks-docs/_data/components/uploader-component.json +++ b/packages/stacks-docs/_data/components/uploader-component.json @@ -7,52 +7,52 @@ }, { "class": ".is-active", - "applies": ".s-uploader", - "description": "Active styling for uploader element. Added on dragenter or when input has value." + "applies": ".s-uploader", + "description": "Active styling for uploader element. Added on dragenter or when input has value." }, { "class": ".is-disabled", - "applies": ".s-uploader", - "description": "Appropriately styles the uploader when it is disabled. Don’t forget to also add the disabled attribute on the input itself." + "applies": ".s-uploader", + "description": "Appropriately styles the uploader when it is disabled. Don’t forget to also add the disabled attribute on the input itself." }, { "class": ".has-error", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds error styling to the component." }, { "class": ".has-success", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds success styling to the component." }, { "class": ".has-warning", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds warning styling to the component." }, { "class": ".s-uploader--container", - "applies": "Child of .s-uploader", + "applies": "Child of .s-uploader", "description": "Container for the visual elements of the uploader." }, { "class": ".s-uploader--input", - "applies": "Child of .s-uploader", + "applies": "Child of .s-uploader", "description": "Adds proper styling to the uploader's file input. Visually hidden." }, { "class": ".s-uploader--previews", - "applies": "Child of .s-uploader--container", + "applies": "Child of .s-uploader--container", "description": "Container for selected item(s) preview." }, { "class": ".s-uploader--preview", - "applies": "Child of .s-uploader--previews", + "applies": "Child of .s-uploader--previews", "description": "An image or string to preview a selected file." }, { "class": ".s-uploader--reset", - "applies": "Child of .s-uploader--container", + "applies": "Child of .s-uploader--container", "description": "Used to reset the uploader." } ] diff --git a/packages/stacks-docs/_data/components/user-card.json b/packages/stacks-docs/_data/components/user-card.json index 331658754a..f9480e792d 100644 --- a/packages/stacks-docs/_data/components/user-card.json +++ b/packages/stacks-docs/_data/components/user-card.json @@ -12,7 +12,7 @@ }, { "class": ".s-user-card--group__split", - "applies": "Modifier for
.s-user-card--group", + "applies": "Modifier for
.s-user-card--group", "description": "Inserts a separator between each element." }, { diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index 14127cf315..1ef03400c7 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -26,6 +26,89 @@ h2, h3 { scroll-margin-top: calc(var(--theme-topbar-height) + var(--su24)); } +// Algolia search +.algolia-autocomplete { + display: block !important; + width: 100% !important; + + [class^="ds-dataset-"] { + .algolia-docsearch-suggestion--highlight { + background: var(--theme-primary-200); + color: var(--theme-primary-600); + } + + .algolia-docsearch-suggestion--text { + .algolia-docsearch-suggestion--highlight { + box-shadow: inset 0 -2px 0 0 hsla(186, 45%, 48%, 0.8); + } + } + + max-height: var(--_tb-searchbar-popover-content-mxh); + } + + .ds-dropdown-menu { + width: 100% !important; + max-width: 100% !important; + min-width: var(--su344); + } + + .algolia-docsearch-footer { + float: none !important; + width: auto !important; + height: auto !important; + padding: 5px 8px; + font-size: var(--fs-caption) !important; + line-height: 1 !important; + color: var(--black-400) !important; + } + + .algolia-docsearch-footer--logo { + display: inline !important; + overflow: visible !important; + color: inherit !important; + text-indent: 0 !important; + background: 0 0 !important; + } + + @media (max-width: 640px) { + .algolia-docsearch-suggestion--subcategory-column { + display: none !important; + } + + .algolia-docsearch-suggestion--content { + width: 100% !important; + padding: 0 !important; + + &:before { + display: none !important; + } + } + } +} + +// Docs utility classes +.docs-copy, +.docs-table { + code { + background-color: var(--black-150); + border: var(--su1) solid var(--black-200); + border-radius: var(--su2); + color: var(--green-600); + font-family: var(--ff-mono); + overflow-wrap: break-word; + margin: var(--sun1); + padding: 0.125em 0.1875em 0.0625em; + white-space: normal; + } +} + +.docs-sidebar, +.docs-toc { + max-height: calc(100vh - var(--theme-topbar-height)); + top: var(--theme-topbar-height); +} + + .docs-bg-checkered { // Checkered background background-color: var(--white); background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23e4e6e8' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E"); @@ -53,29 +136,21 @@ h2, h3 { } } -.docs-code { // Code block style - background-color: var(--black-200); - border-radius: var(--br-md); - color: var(--black-600); - font-family: var(--ff-mono); - font-size: var(--fs-caption); - line-height: var(--lh-xs); - overflow-wrap: break-word; - padding: var(--su4); - vertical-align: middle; - white-space: normal; -} - .docs-copy { // General typography style - strong { - color: var(--black-600); - } - a:not([class]), .s-link { text-decoration: underline; } + code { + font-size: .875em; + } + + strong { + color: var(--black-600); + } + + color: var(--black-500); font-size: var(--fs-body3); line-height: var(--lh-lg); @@ -83,28 +158,6 @@ h2, h3 { margin-top: 0; } -.docs-section { // Section layout - margin-bottom: var(--su48); -} - -.docs-sidebar, -.docs-toc { - max-height: calc(100vh - var(--theme-topbar-height)); - top: var(--theme-topbar-height); -} - -#stacks-internals #screen-md({ - .docs-sidebar { - box-shadow: 3px 0 3px 0 hsla(0, 0, 0, 0.02), 7px 0 6px 0 hsla(0, 0, 0, 0.03), 13px 0 11px 0 hsla(0, 0, 0, 0.04), 22px 0 20px 0 hsla(0, 0, 0, 0.04), 42px 0 37px 0 hsla(0, 0, 0, 0.05); - } -}, @force-selector: true); - -#stacks-internals #screen-sm({ - .docs-sidebar { - box-shadow: 0 3px 3px hsla(0, 0, 0, 0.2); - } -}, @force-selector: true); - .docs-preview { // Preview container styles .highcontrast-mode({ box-shadow: none; @@ -115,19 +168,12 @@ h2, h3 { border-color: var(--black-150); }); - border-radius: var(--br-md) var(--br-md) 0 0; border: var(--su1) solid var(--black-225); max-height: var(--su344); } - &._preview-none pre.s-code-block { - .bar-md; - } - &--example { padding: var(--su16); - border-bottom-left-radius: var(--br-md); - border-bottom-right-radius: var(--br-md); border: var(--su1) solid var(--black-225); border-top-width: 0; font-size: var(--fs-body1); @@ -140,64 +186,28 @@ h2, h3 { margin-bottom: var(--su48); } -// Algolia search ------------------------------------------------------------- -.algolia-autocomplete { - display: block !important; - width: 100% !important; - - [class^="ds-dataset-"] { - .algolia-docsearch-suggestion--highlight { - background: var(--theme-primary-200); - color: var(--theme-primary-600); - } - - .algolia-docsearch-suggestion--text { - .algolia-docsearch-suggestion--highlight { - box-shadow: inset 0 -2px 0 0 hsla(186, 45%, 48%, 0.8); - } - } +.docs-section { // Section layout + margin-bottom: var(--su48); +} - max-height: var(--_tb-searchbar-popover-content-mxh); +.docs-table { + code { + font-size: 1em; } - .ds-dropdown-menu { - width: 100% !important; - max-width: 100% !important; - min-width: var(--su344); - } - - .algolia-docsearch-footer { - float: none !important; - width: auto !important; - height: auto !important; - padding: 5px 8px; - font-size: var(--fs-caption) !important; - line-height: 1 !important; - color: var(--black-400) !important; - } + min-width: var(--su344); +} - .algolia-docsearch-footer--logo { - display: inline !important; - overflow: visible !important; - color: inherit !important; - text-indent: 0 !important; - background: 0 0 !important; +#stacks-internals #screen-md({ + .docs-sidebar { + box-shadow: 3px 0 3px 0 hsla(0, 0, 0, 0.02), 7px 0 6px 0 hsla(0, 0, 0, 0.03), 13px 0 11px 0 hsla(0, 0, 0, 0.04), 22px 0 20px 0 hsla(0, 0, 0, 0.04), 42px 0 37px 0 hsla(0, 0, 0, 0.05); } +}, @force-selector: true); - @media (max-width: 640px) { - .algolia-docsearch-suggestion--subcategory-column { - display: none !important; - } - - .algolia-docsearch-suggestion--content { - width: 100% !important; - padding: 0 !important; - - &:before { - display: none !important; - } - } +#stacks-internals #screen-sm({ + .docs-sidebar { + box-shadow: 0 3px 3px hsla(0, 0, 0, 0.2); } -} +}, @force-selector: true); @import (inline) "~@stackoverflow/stacks-editor/dist/styles.css"; diff --git a/packages/stacks-docs/brand/colors.html b/packages/stacks-docs/brand/colors.html index 50219bdd7d..5f58a948cd 100644 --- a/packages/stacks-docs/brand/colors.html +++ b/packages/stacks-docs/brand/colors.html @@ -1,62 +1,64 @@ --- layout: page title: Colors -description: See the Product section for colors when building with Stacks. While there is some cross-over with the Product colors, using Stacks color classes will mean they adjust depending on context (e.g., dark mode) +description: See the Product section for colors when building with Stacks. While there is some cross-over with the Product colors, using Stacks color classes will mean they adjust depending on context (e.g., dark mode). ---
+ {% assign rowClasses = "bt bc-black-150 py8 d-flex jc-space-between" %} + {% assign btnClasses = "js-clipboard s-link ff-mono" %} {% header "h2", "Primary" %}
-

Orange

-
+

Orange

+
Hex - #F48024 +
-
+
Pantone - Orange 021 U +
-
+
Stacks - orange-400 +
-

Black

-
+

Black

+
Hex - #242729 +
-
+
Pantone - Black 6 U +
-
+
Stacks - black-600 +
-

Gray

-
+

Gray

+
Hex - #BBC0C4 +
-
+
Pantone - 442 U +
-
+
Stacks - black-300 +
@@ -69,36 +71,36 @@

Gray

-

Blue

-
+

Blue

+
Hex - #0095FF +
-
+
Pantone - 2995 U +
-
+
Stacks - blue-400 +
-

Yellow

-
+

Yellow

+
Hex - #FFB500 +
-
+
Pantone - 109 U +
-
+
Stacks - n/a +
@@ -111,36 +113,36 @@

Yellow

-

Teams Purple

-
+

Teams Purple

+
Hex - #2B2D6E +
-
+
Pantone - 2105 U +
-
+
Stacks - n/a +
-

Advertising Blue

-
+

Advertising Blue

+
Hex - #075EC3 +
-
+
Pantone - 2935 U +
-
+
Stacks - n/a +
diff --git a/packages/stacks-docs/brand/copywriting/naming.html b/packages/stacks-docs/brand/copywriting/naming.html index 19e5cdd526..18d54e69ac 100644 --- a/packages/stacks-docs/brand/copywriting/naming.html +++ b/packages/stacks-docs/brand/copywriting/naming.html @@ -106,11 +106,11 @@ - <sup>TM</sup> - ™ + <sup>TM</sup> + ™ - TM + TM diff --git a/packages/stacks-docs/brand/logo.html b/packages/stacks-docs/brand/logo.html index 5ce68713af..b4bb57c177 100644 --- a/packages/stacks-docs/brand/logo.html +++ b/packages/stacks-docs/brand/logo.html @@ -17,7 +17,7 @@ Generally logo breakdowns can get a little silly, but in practicality, our logo’s spacing is based on the following dimensions and angles.

- Our logo is broken down into two components, the glyph and its wordmark. These are often separated when displaying the full logo wouldn’t be appropriate. Examples of this include favicons, or logged-in headers. These are accessible in various pixel-locked sizes within our icons set and are available as @Svg.LogoGlyph and @Svg.LogoWordmark. + Our logo is broken down into two components, the glyph and its wordmark. These are often separated when displaying the full logo wouldn’t be appropriate. Examples of this include favicons, or logged-in headers. These are accessible in various pixel-locked sizes within our icons set and are available as @Svg.LogoGlyph and @Svg.LogoWordmark.

diff --git a/packages/stacks-docs/content/examples/alt-text.html b/packages/stacks-docs/content/examples/alt-text.html index 48323cd1f7..11e60ffc3f 100644 --- a/packages/stacks-docs/content/examples/alt-text.html +++ b/packages/stacks-docs/content/examples/alt-text.html @@ -132,7 +132,7 @@

TOP LEADERBOARD: 728X90

{% header "h2", "How to add alt-text" %} {% header "h3", "Using <img>" %}

- Inside an <img> tag, add the alt-text inside the alt attribute: + Inside an <img> tag, add the alt-text inside the alt attribute:

{% highlight html %} @@ -142,7 +142,7 @@

TOP LEADERBOARD: 728X90

{% header "h3", "Using inline SVG" %}

- Inline SVG doesn’t support the alt attribute, so instead add two wai-aria attributes: role="img" and aria-label="The alt-text.": + Inline SVG doesn’t support the alt attribute, so instead add two wai-aria attributes: role="img" and aria-label="The alt-text.":

{% highlight html %} diff --git a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html index 6f567f6075..afdd1a3e6d 100644 --- a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html +++ b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html @@ -463,7 +463,7 @@ {% header "h2", "Date and time" %}

These conventions apply to all English language sites, and do not include international Stack Overflow sites.

{% header "h3", "General" %} -

In most cases, use relative dates and times (eg. 3 minutes ago) with the exact date and time in the title attribute (eg. September 2, 2019 at 4:35 pm). When possible, use the longhand time (eg. 7 years ago). If there are space constraints, use the abbreviations below.

+

In most cases, use relative dates and times (eg. 3 minutes ago) with the exact date and time in the title attribute (eg. September 2, 2019 at 4:35 pm). When possible, use the longhand time (eg. 7 years ago). If there are space constraints, use the abbreviations below.

diff --git a/packages/stacks-docs/email/base/mso.html b/packages/stacks-docs/email/base/mso.html index ef2a078f6b..973b9125c4 100644 --- a/packages/stacks-docs/email/base/mso.html +++ b/packages/stacks-docs/email/base/mso.html @@ -23,7 +23,7 @@ Only Outlook will render this table.

- MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the <head>): + MSO tags can also be used to add styles targeting Outlook (Outlook supports CSS in the <head>):

{% highlight html %} @@ -43,7 +43,7 @@
{% header "h2", "Ghost tables" %}

- The main way we use MSO tags in our emails is to create “ghost tables” so hybrid emails don’t fall apart in Outlook. Hybrid design uses inline-block, max-width, min-width to stack table columns. Outlook doesn’t support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook. + The main way we use MSO tags in our emails is to create “ghost tables” so hybrid emails don’t fall apart in Outlook. Hybrid design uses inline-block, max-width, min-width to stack table columns. Outlook doesn’t support these CSS properties, so we use MSO tags to create “ghost tables” that apply a fixed width just for Outlook.

{% highlight html %} @@ -65,13 +65,13 @@ {% endhighlight %}

- Without the ghost table above, Outlook would display the <div> at 100% width. Learn how we use ghost tables to make our emails responsive. + Without the ghost table above, Outlook would display the <div> at 100% width. Learn how we use ghost tables to make our emails responsive.

{% header "h2", "Targeting specific Outlook versions" %}

- We usually target all versions of Outlook using <!--[if mso]>. But sometimes when testing emails in Litmus, an email looks ok in one Outlook version but is broken in another. It’s not common but it happens, and there are a few ways to target specific versions of Outlook while omitting others. + We usually target all versions of Outlook using <!--[if mso]>. But sometimes when testing emails in Litmus, an email looks ok in one Outlook version but is broken in another. It’s not common but it happens, and there are a few ways to target specific versions of Outlook while omitting others.

{% header "h3", "Outlook versions" %}

@@ -92,35 +92,35 @@ All Windows Outlook Most common -

+ - + - + - + - + - + - + - +
<!--[if mso]> your code <![endif]--><!--[if mso]> your code <![endif]-->
Outlook 2000<!--[if mso 9]> your code <![endif]--><!--[if mso 9]> your code <![endif]-->
Outlook 2002<!--[if mso 10]> your code <![endif]--><!--[if mso 10]> your code <![endif]-->
Outlook 2003<!--[if mso 11]> your code <![endif]--><!--[if mso 11]> your code <![endif]-->
Outlook 2007<!--[if mso 12]> your code <![endif]--><!--[if mso 12]> your code <![endif]-->
Outlook 2010<!--[if mso 14]> your code <![endif]--><!--[if mso 14]> your code <![endif]-->
Outlook 2013<!--[if mso 15]> your code <![endif]--><!--[if mso 15]> your code <![endif]-->
Outlook 2016<!--[if mso 16]> your code <![endif]--><!--[if mso 16]> your code <![endif]-->
@@ -145,34 +145,34 @@ - gt + gt greater than - <!--[if gt mso 14]> Everything above Outlook 2010 <![endif]--> + <!--[if gt mso 14]> Everything above Outlook 2010 <![endif]--> - lt + lt less than - <!--[if lt mso 14]> Everything below Outlook 2010 <![endif]--> + <!--[if lt mso 14]> Everything below Outlook 2010 <![endif]--> - gte + gte greater than or equal to - <!--[if gte mso 14]> Outlook 2010 and above <![endif]--> + <!--[if gte mso 14]> Outlook 2010 and above <![endif]--> - lte + lte less than or equal to - <!--[if lte mso 14]> Outlook 2010 and below <![endif]--> + <!--[if lte mso 14]> Outlook 2010 and below <![endif]--> - | + | or - <!--[if (mso 12)|(mso 16)]> Outlook 2007 / 2016 only <![endif]--> + <!--[if (mso 12)|(mso 16)]> Outlook 2007 / 2016 only <![endif]--> - ! + ! not - <!--[if !mso]><!--> All Outlooks will ignore this <!--<![endif]--> + <!--[if !mso]><!--> All Outlooks will ignore this <!--<![endif]--> diff --git a/packages/stacks-docs/email/base/responsiveness.html b/packages/stacks-docs/email/base/responsiveness.html index cdb5e8e8c2..d48974c3aa 100644 --- a/packages/stacks-docs/email/base/responsiveness.html +++ b/packages/stacks-docs/email/base/responsiveness.html @@ -11,7 +11,7 @@

{% header "h3", "Hybrid design" %}

- Hybrid design uses inline-block, max-width, min-width, and ghost tables stack columns without media queries while imposing a fixed, desktop width for Outlook. + Hybrid design uses inline-block, max-width, min-width, and ghost tables stack columns without media queries while imposing a fixed, desktop width for Outlook.

{% highlight html %} diff --git a/packages/stacks-docs/email/base/typography.html b/packages/stacks-docs/email/base/typography.html index 958400a0d5..f0e31f9172 100644 --- a/packages/stacks-docs/email/base/typography.html +++ b/packages/stacks-docs/email/base/typography.html @@ -5,7 +5,7 @@ ---

- It’s safe and accessible to use semantic HTML tags like <h>, <p>, and <ul> for text in email just as we do for the web. The main difference in email is that CSS should be written inline to specify intended styles (like the color of an anchor tag) and zero out unintended defaults (like the margin around a <p> tag). + It’s safe and accessible to use semantic HTML tags like <h>, <p>, and <ul> for text in email just as we do for the web. The main difference in email is that CSS should be written inline to specify intended styles (like the color of an anchor tag) and zero out unintended defaults (like the margin around a <p> tag).

@@ -79,7 +79,7 @@

- If email content is written in Markdown, we can’t write inline CSS into link tags. Left unstyled, links will appear like this. To style links contained in Markdown text, add a class="has-markdown" to any parent tag that might contain a Markdown link. + If email content is written in Markdown, we can’t write inline CSS into link tags. Left unstyled, links will appear like this. To style links contained in Markdown text, add a class="has-markdown" to any parent tag that might contain a Markdown link.

{% highlight html %} @@ -164,7 +164,7 @@

{% header "h2", "Preventing text wrapping" %}

- A non-breaking space (&nbsp;) can be used to prevent a group of words from breaking onto multiple lines. Useful for keeping names together and preventing typographic orphans and widows. + A non-breaking space (&nbsp;) can be used to prevent a group of words from breaking onto multiple lines. Useful for keeping names together and preventing typographic orphans and widows.
Inspect the line above to see ☝️

@@ -186,8 +186,8 @@

don’t have great support in email clients, so here’s how we ensure our web font displays in as many email clients as possible:

    -
  1. Include an external stylesheet at the top of the email’s <head> tag. Sites like Google Fonts provide this code.
    2. -
  2. Windows Outlook sometimes chokes on web font references and defaults everything to Times New Roman. To avoid this, wrap the web font reference in a <!--[if !mso]> tag (so Windows Outlook ignores it) and define a fallback font for Windows Outlook inside a <!--[if mso]> tag.
    3. +
  3. Include an external stylesheet at the top of the email’s <head> tag. Sites like Google Fonts provide this code.
    4. +
  4. Windows Outlook sometimes chokes on web font references and defaults everything to Times New Roman. To avoid this, wrap the web font reference in a <!--[if !mso]> tag (so Windows Outlook ignores it) and define a fallback font for Windows Outlook inside a <!--[if mso]> tag.
  5. Lastly, reference the web font at the beginning of the font stack, followed by a system fallback font for email clients that can’t display (and ignore) the web font.

    6. diff --git a/packages/stacks-docs/email/components/footers.html b/packages/stacks-docs/email/components/footers.html index 1d4a5731d4..90bae3cfd8 100644 --- a/packages/stacks-docs/email/components/footers.html +++ b/packages/stacks-docs/email/components/footers.html @@ -54,7 +54,7 @@ Anti-spam laws of most countries require a postal address for the sender. - <3 + <3 because we care diff --git a/packages/stacks-docs/email/components/images.html b/packages/stacks-docs/email/components/images.html index ffb0d2bbfc..687127e484 100644 --- a/packages/stacks-docs/email/components/images.html +++ b/packages/stacks-docs/email/components/images.html @@ -8,7 +8,7 @@
    {% header "h2", "Foreground images" %}

    - All email clients can display .png, .gif, and .jpg images displayed with the <img> tag. .svg images are not well supported, regardless of how they’re referenced, so avoid using these. + All email clients can display .png, .gif, and .jpg images displayed with the <img> tag. .svg images are not well supported, regardless of how they’re referenced, so avoid using these.

    Most images should be coded responsive by default, meaning they’ll scale down proportionately in small viewports. It’s safest to code all images this way, even if they don’t end up scaling in practice. However if we’re confident that an image will never scale, we can display a non-responsive image using less code. @@ -24,52 +24,52 @@ - src + src attribute - Always set and use full https:// reference. + Always set and use full https:// reference. - width + width attribute Always set to intended desktop width. - height + height attribute Optional. Use only for images that won’t scale. - border + border attribute Always set to 0 to avoid blue outlines on image links. - alt + alt attribute - Always include but can be left empty if image is ornamental (Eg. alt=""). + Always include but can be left empty if image is ornamental (Eg. alt=""). - width + width inline CSS - [Responsive] Always set to 100% for responsive images. Optional for static images. + [Responsive] Always set to 100% for responsive images. Optional for static images. - max-width + max-width inline CSS [Responsive] Always set to intended desktop width. Optional for static images. - height + height inline CSS - [Responsive] Always set to auto for responsive images. Optional for static images. + [Responsive] Always set to auto for responsive images. Optional for static images. - display + display inline CSS Generally good practice to use `display:block;` when possible since it negates a few pixels of unwanted space below images in some clients. - .g-img + .g-img class Advisable for images larger than ~300px wide. Prevents gmail from displaying an image download icon over images. @@ -115,43 +115,43 @@ - background-image + background-image inline CSS - Always set and use full https:// reference. + Always set and use full https:// reference. - background-position + background-position inline CSS Optional to set the size of the image. - background-size + background-size inline CSS Optional to set the position of the image. - background-color + background-color inline CSS Always set to make foreground HTML legible if background image doesn’t load. - width - VML in <v:rect> + width + VML in <v:rect> Always set to full container width. VML doesn’t account for padding, adjust as necessary. - height - VML in <v:rect> + height + VML in <v:rect> Always set to full container height. VML doesn’t account for padding, adjust as necessary. - src - VML in <v:fill> - Always set and use full https:// reference. + src + VML in <v:fill> + Always set and use full https:// reference. - color (background color) - VML in <v:fill> + color (background color) + VML in <v:fill> Always set to make foreground HTML legible if background image doesn’t load. diff --git a/packages/stacks-docs/email/components/spacers.html b/packages/stacks-docs/email/components/spacers.html index 836c643192..17d75fc655 100644 --- a/packages/stacks-docs/email/components/spacers.html +++ b/packages/stacks-docs/email/components/spacers.html @@ -5,8 +5,8 @@ ---

    {% header "h2", "Base" %} -

    The best way to control spacing between components in HTML email is to use padding (applied to <td>’s) and margin (applied to <h> tags, <p>’s, <ol>’s, <li>’s, etc.).

    -

    However padding and margin cannot be used reliably to space out <table>’s or <tr>’s. In these cases, it's best to use a spacer to create separation.

    +

    The best way to control spacing between components in HTML email is to use padding (applied to <td>’s) and margin (applied to <h> tags, <p>’s, <ol>’s, <li>’s, etc.).

    +

    However padding and margin cannot be used reliably to space out <table>’s or <tr>’s. In these cases, it's best to use a spacer to create separation.

    {% highlight html %} @@ -32,23 +32,23 @@ - height + height Size of the spacer. - aria-hidden="true" - Hide the &nbsp; from screen readers. + aria-hidden="true" + Hide the &nbsp; from screen readers. - &nbsp; + &nbsp; Some email clients will collapse the spacer’s height if there’s no content. - style="font-size: 0px; line-height: 0px;" - Some clients will add additional space inherited from the &nbsp;’s font-size and line-height. + style="font-size: 0px; line-height: 0px;" + Some clients will add additional space inherited from the &nbsp;’s font-size and line-height. - background-color Optional + background-color Optional Spacers are transparent by default but can be any color. diff --git a/packages/stacks-docs/email/components/tags.html b/packages/stacks-docs/email/components/tags.html index 609c6e8089..f5d12dd2c8 100644 --- a/packages/stacks-docs/email/components/tags.html +++ b/packages/stacks-docs/email/components/tags.html @@ -72,14 +72,14 @@ Themed tags use a variable theme color and CSS opacity. However not all email clients support opacity, so here’s how we work around those limitations:

    - For email clients that DON’T support opacity (mainly Windows Outlook and Yahoo), the background (both border-color and background) is defined as a solid gray color #EFF0F1. Email clients that don’t support opacity displayed themed tags with this gray background: + For email clients that DON’T support opacity (mainly Windows Outlook and Yahoo), the background (both border-color and background) is defined as a solid gray color #EFF0F1. Email clients that don’t support opacity displayed themed tags with this gray background:

    tag-name

    How themed tags appear in email clients that DON’T support opacity.

    - For email clients that DO support opacity, we define the background again by using the theme color at 15% opacity (#2b8a3e15). The border-color uses the theme color at 1% opacity (#2b8a3e01) to avoid a perceivable border caused by two overlapping color at 15% and prevent email clients from collapsing a transparent border. + For email clients that DO support opacity, we define the background again by using the theme color at 15% opacity (#2b8a3e15). The border-color uses the theme color at 1% opacity (#2b8a3e01) to avoid a perceivable border caused by two overlapping color at 15% and prevent email clients from collapsing a transparent border.

    tag-name diff --git a/packages/stacks-docs/email/components/team-identification.html b/packages/stacks-docs/email/components/team-identification.html index 744dd47593..09723a1233 100644 --- a/packages/stacks-docs/email/components/team-identification.html +++ b/packages/stacks-docs/email/components/team-identification.html @@ -4,7 +4,7 @@ description: Emails sent from a Team on Stack Overflow for Teams should be clearly labeled. ---
    -

    Team icon and name should be in a prominent, noticeable location in the email. The icon color should match the Team’s theme color as defined in their display settings (eg. https://stackoverflow.com/c/team-name/admin/settings/theme) on Stack Overflow or Stack Overflow for Enterprise.

    +

    Team icon and name should be in a prominent, noticeable location in the email. The icon color should match the Team’s theme color as defined in their display settings (eg. https://stackoverflow.com/c/team-name/admin/settings/theme) on Stack Overflow or Stack Overflow for Enterprise.

    If space is tight, an icon-only version can be used.

    {% tip %} Note: An email should only contain content from one Team. A Team’s content should never appear mixed alongside with content from another Team or public content in a single email. diff --git a/packages/stacks-docs/email/guidelines/design-best-practices.html b/packages/stacks-docs/email/guidelines/design-best-practices.html index b0c11cc3c7..f8babe9a7c 100644 --- a/packages/stacks-docs/email/guidelines/design-best-practices.html +++ b/packages/stacks-docs/email/guidelines/design-best-practices.html @@ -22,7 +22,7 @@ {% header "h3", "HTML and CSS" %}
    1. - Use <table border="0" cellpadding="0" cellspacing="0" role="presentation"> when creating new tables. + Use <table border="0" cellpadding="0" cellspacing="0" role="presentation"> when creating new tables. This negates any unwanted spacing and borders and tells screen readers to skip over the table’s tags and move straight into the content.
    2. @@ -39,15 +39,15 @@
    3. HTML Attributes - Most styling is done via CSS. But because some email clients use antiquated rendering engines, they tend to better understand attributes like align, valign, height, and width. + Most styling is done via CSS. But because some email clients use antiquated rendering engines, they tend to better understand attributes like align, valign, height, and width.
    4. - Use align for layout instead of float, d-flex, or flexbox + Use align for layout instead of float, d-flex, or flexbox Floats aren’t supported in Outlook and the others don’t have good support in general.
    5. - Define color as #ffffff instead of #fff or rgb(1,2,3). - Six-digit hex is supported in inline CSS as well as HTML attributes like bgcolor that are still supported in email. + Define color as #ffffff instead of #fff or rgb(1,2,3). + Six-digit hex is supported in inline CSS as well as HTML attributes like bgcolor that are still supported in email.
    6. Don’t forget about preview text. @@ -58,26 +58,26 @@
      1. Save images as PNG, GIF, or JPG instead of SVG. - SVG has almost no support in email, no matter how it’s referenced (inline, Base64, .svg). + SVG has almost no support in email, no matter how it’s referenced (inline, Base64, .svg).
      2. Save images as @2x and scale them down using HTML attributes. - Since SVG isn’t supported, a 20x20 raster image coded like <img src="40x40-image.png" height="20" width="20"> displays crisply on high-definition screens. + Since SVG isn’t supported, a 20x20 raster image coded like <img src="40x40-image.png" height="20" width="20"> displays crisply on high-definition screens.
      {% header "h3", "Accessibility" %}
      1. - Include role="presentation" on all tables used for layout. + Include role="presentation" on all tables used for layout. This prevents screen readers from reading aloud the structure of each table cell.
      2. Use HTML1 semantic tags whenever possible. - Tags like <p> and <h> allow screen readers to quickly jump from section to section. Tags like <strong> and <em> give text more importance. + Tags like <p> and <h> allow screen readers to quickly jump from section to section. Tags like <strong> and <em> give text more importance.
      3. - Include an alt attribute on every image. - Be descriptive and use alt to help readers “see” the email if images aren’t displayed. Use an empty alt="" for images a screen reader should skip (eg. decorative images). Screenreaders will dictate the filename of images without an alt attribute (eg. "icon dash checkmark dot png"). More on alt text. + Include an alt attribute on every image. + Be descriptive and use alt to help readers “see” the email if images aren’t displayed. Use an empty alt="" for images a screen reader should skip (eg. decorative images). Screenreaders will dictate the filename of images without an alt attribute (eg. "icon dash checkmark dot png"). More on alt text.
      4. Avoid “Click Here” or “Learn More” link copy. diff --git a/packages/stacks-docs/email/guidelines/faq.html b/packages/stacks-docs/email/guidelines/faq.html index 36e5e8353c..9e9b746e08 100644 --- a/packages/stacks-docs/email/guidelines/faq.html +++ b/packages/stacks-docs/email/guidelines/faq.html @@ -5,14 +5,14 @@
        {% header "h2", "Why do we have to write CSS inline?" %}

        - It’s still the safest way to ensure CSS styles are applied in email clients. Referencing external stylesheets isn’t well-supported in email. Embedded CSS in a <style> tag does have decent support, and there are a few holdouts like a few Gmail clients and a smattering of mostly non-US mobile clients. Given Stack Overflow’s volume and reach, we choose to support as many email clients as we can, even ones that don’t support the <style> tag. So we opt for writing CSS inline, which is supported everywhere. + It’s still the safest way to ensure CSS styles are applied in email clients. Referencing external stylesheets isn’t well-supported in email. Embedded CSS in a <style> tag does have decent support, and there are a few holdouts like a few Gmail clients and a smattering of mostly non-US mobile clients. Given Stack Overflow’s volume and reach, we choose to support as many email clients as we can, even ones that don’t support the <style> tag. So we opt for writing CSS inline, which is supported everywhere.

        {% header "h2", "If CSS is inline, why do we need a style tag?" %}

        - Inline CSS is a sure-fire way to style an email’s layout at a granular level. For the same reason it’s done on the web, adding a CSS reset to an email’s <head> helps to normalize how the code gets rendered in email clients that support the <style> tag. + Inline CSS is a sure-fire way to style an email’s layout at a granular level. For the same reason it’s done on the web, adding a CSS reset to an email’s <head> helps to normalize how the code gets rendered in email clients that support the <style> tag.

        Each template contains a breakdown, element by element, of what each reset style is actually doing. @@ -22,12 +22,12 @@

        {% header "h2", "Can we use a CSS inliner?" %}

        - CSS inliners promise to take CSS written in the <head> and automatically move CSS inline in the appropriate locations in the <body>. However we recommend against using a CSS inliners with these templates. Here’s why: + CSS inliners promise to take CSS written in the <head> and automatically move CSS inline in the appropriate locations in the <body>. However we recommend against using a CSS inliners with these templates. Here’s why:

        • These templates should not require a dependency to author CSS.
          • -
        • The placement of the templates CSS is already optimized. The CSS in the <head> is meant only for email clients that parse CSS in this location. It doesn’t need to be inlined.
          • -
        • There are some CSS selectors like :hover that throw errors in some CSS inliners.
          • +
        • The placement of the templates CSS is already optimized. The CSS in the <head> is meant only for email clients that parse CSS in this location. It doesn’t need to be inlined.
          • +
        • There are some CSS selectors like :hover that throw errors in some CSS inliners.
        • Inlining leads to code bloat. Not only does this impact download speeds, but some email clients like Gmail and iOS Outlook truncate messages after they exceed a certain file size.
        @@ -71,10 +71,10 @@
        {% header "h2", "How do margin and padding work in email?" %}

        - Use margin block-level typography tags like <h>, <p>, <ul>, and <li>... and use padding on <td>s. + Use margin block-level typography tags like <h>, <p>, <ul>, and <li>... and use padding on <td>s.

        - Outlook only honors margins on typography tags, and only honors padding on <td> tags. Its interpretation of spacing on other tags like <table>, <div>, and <img> tags is sketchy, so it’s best to avoid spacing with those. + Outlook only honors margins on typography tags, and only honors padding on <td> tags. Its interpretation of spacing on other tags like <table>, <div>, and <img> tags is sketchy, so it’s best to avoid spacing with those.

        {% icon "Checkmark", "mr4" %} Do @@ -106,7 +106,7 @@

        {% header "h2", "What is the best <doctype> for email?" %}

        - Use the HTML5 doctype <!doctype html>. It’s the shortest and easiest to remember, and it’s enough to trigger standards mode on supported clients. This article goes into more detail. There’s no need to close <img> tags with trailing / (XHTML style). + Use the HTML5 doctype <!doctype html>. It’s the shortest and easiest to remember, and it’s enough to trigger standards mode on supported clients. This article goes into more detail. There’s no need to close <img> tags with trailing / (XHTML style).

        @@ -130,7 +130,7 @@
        {% header "h2", "How wide should an email be?" %}

        - Our default email templates are 680px wide. Our hybrid math, the code that makes emails responsive without media queries, is built on that number. + Our default email templates are 680px wide. Our hybrid math, the code that makes emails responsive without media queries, is built on that number.

        This is more a guideline than a rule. If the situation calls for it, an email can have any width. Examples might be... @@ -144,10 +144,10 @@

        {% header "h2", "What is conversation threading?" %}

        - When creating emails, Gmail may attempt to highlight portions of the email body that it thinks are important parts of a previous conversation thread. It does this by applying an .im class to portions of the email, which makes text purple. + When creating emails, Gmail may attempt to highlight portions of the email body that it thinks are important parts of a previous conversation thread. It does this by applying an .im class to portions of the email, which makes text purple.

        - To defend against this unwanted styling, our templates include a CSS reset in the <head>, though this will only be applied in email clients that support CSS styles in the <head>. + To defend against this unwanted styling, our templates include a CSS reset in the <head>, though this will only be applied in email clients that support CSS styles in the <head>.

        diff --git a/packages/stacks-docs/email/patterns/columns.html b/packages/stacks-docs/email/patterns/columns.html index 23149bf0aa..ac1dd1baed 100644 --- a/packages/stacks-docs/email/patterns/columns.html +++ b/packages/stacks-docs/email/patterns/columns.html @@ -147,7 +147,7 @@
        {% header "h3", "Reverse stacking" %}

        - By default, columns are arranged based on source order on both desktop and mobile displays. (Eg. the first (left) desktop column will stack on top of the second (right) desktop column. Using the dir attribute, we can swap the order of columns on desktop without changing the source order. Useful when you want an image in the second (right) column on desktop, but on the first (top) row when stacked on mobile. + By default, columns are arranged based on source order on both desktop and mobile displays. (Eg. the first (left) desktop column will stack on top of the second (right) desktop column. Using the dir attribute, we can swap the order of columns on desktop without changing the source order. Useful when you want an image in the second (right) column on desktop, but on the first (top) row when stacked on mobile.

        {% highlight html %} diff --git a/packages/stacks-docs/plugins/markdown.js b/packages/stacks-docs/plugins/markdown.js index 53e025691a..d7fcca3fd3 100644 --- a/packages/stacks-docs/plugins/markdown.js +++ b/packages/stacks-docs/plugins/markdown.js @@ -21,17 +21,8 @@ module.exports = { // customize markdown-it rendering to add our classes markdownIt.use(function (md) { - // mapping of tag: classes - const customClasses = { - "code": "docs-code" - } - const addClasses = function (tokens) { tokens.forEach(function (token) { - if (token.tag in customClasses) { - token.attrJoin("class", customClasses[token.tag]); - } - if (token.children) { addClasses(token.children); } diff --git a/packages/stacks-docs/product/base/backgrounds.html b/packages/stacks-docs/product/base/backgrounds.html index 2d286ff43d..4096a80bb3 100644 --- a/packages/stacks-docs/product/base/backgrounds.html +++ b/packages/stacks-docs/product/base/backgrounds.html @@ -9,7 +9,7 @@ {% header "h2", "Background size" %} {% header "h3", "Background size classes" %}
        - +
        @@ -19,7 +19,7 @@ {% for background-size in backgrounds.background-size %} - + {% endfor %} @@ -32,7 +32,7 @@ {% header "h2", "Background repeat" %} {% header "h3", "Background repeat classes" %}
        -
        Class
        .{{ background-size.class }}.{{ background-size.class }} {{ background-size.output }}
        +
        @@ -42,7 +42,7 @@ {% for background-repeat in backgrounds.background-repeat %} - + {% endfor %} @@ -55,7 +55,7 @@ {% header "h2", "Background position" %} {% header "h3", "Background position classes" %}
        -
        Class
        .{{ background-repeat.class }}.{{ background-repeat.class }} {{ background-repeat.output }}
        +
        @@ -65,7 +65,7 @@ {% for background-position in backgrounds.background-position %} - + {% endfor %} @@ -107,7 +107,7 @@ {% header "h2", "Background attachment" %} {% header "h3", "Background attachment classes" %}
        -
        Class
        .{{ background-position.class }}.{{ background-position.class }} {{ background-position.output }}
        +
        @@ -117,7 +117,7 @@ {% for background-attachment in backgrounds.background-attachment %} - + {% endfor %} @@ -130,7 +130,7 @@ {% header "h2", "Background image" %} {% header "h3", "Background image classes" %}
        -
        Class
        .{{ background-attachment.class }}.{{ background-attachment.class }} {{ background-attachment.output }}
        +
        @@ -140,7 +140,7 @@ {% for background-image in backgrounds.background-image %} - + {% endfor %} @@ -184,7 +184,7 @@ {% header "h3", "Confetti" %} -

        Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects prefers-reduced-motion and displays the static version of the background when necessary. No JavaScript required.

        +

        Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects prefers-reduced-motion and displays the static version of the background when necessary. No JavaScript required.

        {% highlight html %}
        …
        diff --git a/packages/stacks-docs/product/base/border-radius.html b/packages/stacks-docs/product/base/border-radius.html index 676c13c6f7..047f900b3a 100644 --- a/packages/stacks-docs/product/base/border-radius.html +++ b/packages/stacks-docs/product/base/border-radius.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ background-image.class }}.{{ background-image.class }} {{ background-image.output }}
        +
        @@ -21,7 +21,7 @@ {% for border in borders.border-radius %} - +
        Abbreviation
        .{{ border.class }}.{{ border.class }} {{ border.output }} {{ border.define }} diff --git a/packages/stacks-docs/product/base/borders.html b/packages/stacks-docs/product/base/borders.html index 8da9520c11..2b5e9eff4d 100644 --- a/packages/stacks-docs/product/base/borders.html +++ b/packages/stacks-docs/product/base/borders.html @@ -8,7 +8,7 @@
        {% header "h2", "Classes" %}
        - +
        @@ -22,7 +22,7 @@ {% for border in borders.border %} - +
        Class
        .{{ border.class }}.{{ border.class }} {{ border.output }} {{ border.define }} @@ -59,7 +59,7 @@ {% header "h2", "Width" %} {% header "h3", "Width classes" %}
        - +
        @@ -73,7 +73,7 @@ {% for border in borders.width %} - +
        Class
        .{{ border.class }}.{{ border.class }} {{ border.output }} {{ border.define }} @@ -111,7 +111,7 @@ {% header "h2", "Style" %} {% header "h3", "Style classes" %}
        - +
        @@ -122,7 +122,7 @@ {% for border in borders.border-style %} - + diff --git a/packages/stacks-docs/product/base/box-shadow.html b/packages/stacks-docs/product/base/box-shadow.html index 146ec860f5..b15540a835 100644 --- a/packages/stacks-docs/product/base/box-shadow.html +++ b/packages/stacks-docs/product/base/box-shadow.html @@ -21,8 +21,8 @@ {% for atomic in box-shadow.classes %} - - + + {% for atomic in box-sizing.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/current-color.html b/packages/stacks-docs/product/base/current-color.html index fa18e8cdc2..05927d9ee2 100644 --- a/packages/stacks-docs/product/base/current-color.html +++ b/packages/stacks-docs/product/base/current-color.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ border.class }}.{{ border.class }} {{ border.output }} {{ border.define }}
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {% if atomic.hover %} {% icon "Checkmark", "fc-green-400" %} diff --git a/packages/stacks-docs/product/base/box-sizing.html b/packages/stacks-docs/product/base/box-sizing.html index a25fa6b7da..d9fbbb3edc 100644 --- a/packages/stacks-docs/product/base/box-sizing.html +++ b/packages/stacks-docs/product/base/box-sizing.html @@ -18,8 +18,8 @@
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -17,8 +17,8 @@ {% for atomic in current-color.classes %} - - + + {% endfor %} @@ -26,7 +26,7 @@ {% header "h2", "Examples" %} -

        When applied to an SVG, applying currentColor to the fill or stroke property allows you to inherit the parent element’s text color or the text color applied to the element itself.

        +

        When applied to an SVG, applying currentColor to the fill or stroke property allows you to inherit the parent element’s text color or the text color applied to the element itself.

        {% highlight html %} … diff --git a/packages/stacks-docs/product/base/cursors.html b/packages/stacks-docs/product/base/cursors.html index 0526e81dd4..5256492a0c 100644 --- a/packages/stacks-docs/product/base/cursors.html +++ b/packages/stacks-docs/product/base/cursors.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }}
        +
        @@ -17,8 +17,8 @@ {% for atomic in cursors.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/display.html b/packages/stacks-docs/product/base/display.html index 05d34863c0..1ea95cc39b 100644 --- a/packages/stacks-docs/product/base/display.html +++ b/packages/stacks-docs/product/base/display.html @@ -20,8 +20,8 @@ {% for atomic in display.classes %} - - + + {% for item in flex.flex-item %} - - - + + + {% endfor %} @@ -158,14 +158,14 @@
        {% header "h2", "Helpers" %} -

        We have a few helper classes you can add to a .d-flex container that affect the child .flex--items.

        +

        We have a few helper classes you can add to a .d-flex container that affect the child .flex--items.

        {% header "h3", "Helper classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }}
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }} {% if atomic.responsive %} diff --git a/packages/stacks-docs/product/base/flex.html b/packages/stacks-docs/product/base/flex.html index 6c5acc7fb8..918b396c02 100644 --- a/packages/stacks-docs/product/base/flex.html +++ b/packages/stacks-docs/product/base/flex.html @@ -7,7 +7,7 @@
        {% header "h2", "Basic flex layout" %} -

        A flex layout is initiated with the .d-flex class. By default, display: flex; starts a non-wrapping row. To convert it to a column, apply the .fd-column atomic class.

        +

        A flex layout is initiated with the .d-flex class. By default, display: flex; starts a non-wrapping row. To convert it to a column, apply the .fd-column atomic class.

        {% highlight html %}
        @@ -40,7 +40,7 @@
        {% header "h2", "Fluid" %} -

        By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the .fl-grow1 to the individual item, or .flex__fl-equal to the parent to apply to all children.

        +

        By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the .fl-grow1 to the individual item, or .flex__fl-equal to the parent to apply to all children.

        {% header "h3", "Fluid examples" %}
        @@ -91,9 +91,9 @@
        {{ item.class }}{{ item.all }}{{ item.output }}{{ item.class }}{{ item.all }}{{ item.output }}
        +
        - + @@ -173,7 +173,7 @@ {% for item in flex.helpers %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -272,7 +272,7 @@ {% header "h3", "Gutter classes" %}
        - +
        @@ -282,7 +282,7 @@ {% for item in flex.gutter %} - + {% endfor %} @@ -340,7 +340,7 @@ {% tip, "warning" %} Note: Nested flex layouts with gutter spacing will conflict with each other in unpredictable ways. TL;DR? Don’t stick a .d-flex directly into a .d-flex, instead stick a .d-flex into a .flex--item like so: {% endtip %} -

        If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child’s parent wrapper margins will be overwritten by the parent. To have the child flex layout’s gutter spacing honored, you have to put the child flex layout within a .flex--item wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.

        +

        If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child’s parent wrapper margins will be overwritten by the parent. To have the child flex layout’s gutter spacing honored, you have to put the child flex layout within a .flex--item wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.

        {% icon "Checkmark", "mtn1 mbn1" %} Do
        @@ -397,10 +397,10 @@ {% header "h3", "Flex direction classes" %}
        -
        Class
        {{ item.class }}{{ item.class }} {{ item.output }}
        +
        - + @@ -408,7 +408,7 @@ {% for item in flex.flex-direction %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -493,10 +493,10 @@ {% header "h3", "Flex wrap classes" %}
        - +
        - + @@ -504,7 +504,7 @@ {% for item in flex.flex-wrap %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -588,14 +588,14 @@
        {% header "h2", "Justify content" %} -

        Flex items can be controlled with atomic classes on the container’s main axis. This means controlling how a .flex--item is aligned left to right when in an .fd-row, and top and bottom in an .fd-column.

        +

        Flex items can be controlled with atomic classes on the container’s main axis. This means controlling how a .flex--item is aligned left to right when in an .fd-row, and top and bottom in an .fd-column.

        {% header "h3", "Justify content classes" %}
        - +
        - + @@ -603,7 +603,7 @@ {% for item in flex.justification %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -710,14 +710,14 @@
        {% header "h2", "Align items" %} -

        Flex items can be controlled with atomic classes on the container’s cross axis. This means controlling how a .flex--item is aligned top to bottom when in an .fd-row, and left to right in an .fd-column.

        +

        Flex items can be controlled with atomic classes on the container’s cross axis. This means controlling how a .flex--item is aligned top to bottom when in an .fd-row, and left to right in an .fd-column.

        {% header "h3", "Align items classes" %}
        - +
        - + @@ -725,7 +725,7 @@ {% for item in flex.align-items %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -823,10 +823,10 @@ {% header "h3", "Align content classes" %}
        - +
        - + @@ -834,7 +834,7 @@ {% for item in flex.align-content %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -973,14 +973,14 @@
        {% header "h2", "Align self" %} -

        A flex container’s align-items can be overridden on individual items within a flex layout.

        +

        A flex container’s align-items can be overridden on individual items within a flex layout.

        {% header "h3", "Align self classes" %}
        - +
        - + @@ -988,7 +988,7 @@ {% for item in flex.align-self %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -1099,7 +1099,7 @@ {% header "h3", "Order classes" %}
        - +
        @@ -1110,7 +1110,7 @@ {% for item in flex.order %} - +
        Class
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -1166,10 +1166,10 @@ {% header "h3", "Flex classes" %}
        - +
        - + @@ -1177,7 +1177,7 @@ {% for item in flex.flex %} - +
        ClassClass Definition Responsive?
        {{ item.class }}{{ item.class }} {{ item.define }} {% if item.responsive %} diff --git a/packages/stacks-docs/product/base/floats.html b/packages/stacks-docs/product/base/floats.html index 80b9998386..b3edeae4ea 100644 --- a/packages/stacks-docs/product/base/floats.html +++ b/packages/stacks-docs/product/base/floats.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        - +
        @@ -18,8 +18,8 @@ {% for atomic in floats.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/gap.html b/packages/stacks-docs/product/base/gap.html index 9dfc77348e..531cb56669 100644 --- a/packages/stacks-docs/product/base/gap.html +++ b/packages/stacks-docs/product/base/gap.html @@ -1,13 +1,13 @@ --- layout: page title: Gap -description: Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts. +description: Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts. tags: base ---
        {% header "h2", "Gap classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -19,8 +19,8 @@ {% for item in gap.gap %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -66,9 +66,9 @@
        {% header "h2", "Column gap" %} -

        Spacing can be set on just the x-axis with .gx classes. They can be used independently or in combination with other atomic gap classes.

        +

        Spacing can be set on just the x-axis with .gx classes. They can be used independently or in combination with other atomic gap classes.

        - +
        @@ -79,7 +79,7 @@ {% for item in gap.column %} - +
        Class
        .{{ item.class }}.{{ item.class }} {{ item.define }} {% if item.responsive %} @@ -124,9 +124,9 @@
        {% header "h2", "Row gap" %} -

        Spacing can be set on just the y-axis with .gy classes. They can be used independently or in combination with other atomic gap classes.

        +

        Spacing can be set on just the y-axis with .gy classes. They can be used independently or in combination with other atomic gap classes.

        - +
        @@ -137,7 +137,7 @@ {% for item in gap.row %} - +
        Class
        .{{ item.class }}.{{ item.class }} {{ item.define }} {% if item.responsive %} diff --git a/packages/stacks-docs/product/base/grid.html b/packages/stacks-docs/product/base/grid.html index cd9d902e67..345640661f 100644 --- a/packages/stacks-docs/product/base/grid.html +++ b/packages/stacks-docs/product/base/grid.html @@ -6,7 +6,7 @@ ---
        {% header "h2", "Overview" %} -

        CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike flex layouts which can only do one at a time. Applying .d-grid to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual .grid--item will change that cell’s behavior.

        +

        CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike flex layouts which can only do one at a time. Applying .d-grid to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual .grid--item will change that cell’s behavior.

        {% header "h3", "Examples" %}
        @@ -97,11 +97,11 @@
        {% header "h2", "Columns" %} -

        To define a discrete number of columns in your grid layout, you can add a grid__[x] modifying class.

        +

        To define a discrete number of columns in your grid layout, you can add a grid__[x] modifying class.

        {% header "h3", "Column classes" %}
        - +
        @@ -113,8 +113,8 @@ {% for item in grid.column-templates %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -225,10 +225,10 @@
        {% header "h2", "Column and row spans" %} -

        You can apply grid--col[x] to your columns, and grid--row[x] to your rows to span a specific number of columns or rows.

        +

        You can apply grid--col[x] to your columns, and grid--row[x] to your rows to span a specific number of columns or rows.

        {% header "h3", "Column spanning classes" %}
        - +
        @@ -240,8 +240,8 @@ {% for item in grid.columns %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -294,7 +294,7 @@ {% header "h3", "Row classes" %}
        - +
        @@ -306,8 +306,8 @@ {% for item in grid.rows %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -351,7 +351,7 @@ {% header "h3", "Autoflow classes" %}
        - +
        @@ -363,8 +363,8 @@ {% for item in grid.autoflow %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -423,7 +423,7 @@ {% header "h3", "Column start and end classes" %}
        - +
        @@ -435,8 +435,8 @@ {% for item in grid.column-start-end %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -473,7 +473,7 @@ {% header "h3", "Row start and end classes" %}
        - +
        @@ -485,8 +485,8 @@ {% for item in grid.row-start-end %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} @@ -527,11 +527,11 @@
        {% header "h2", "Alignment" %} -

        On the grid container, you can apply align-items to the y axis and justify-items to the x axis. On individual items, you can apply align-self on the y axis, and justify-self on the x axis.

        +

        On the grid container, you can apply align-items to the y axis and justify-items to the x axis. On individual items, you can apply align-self on the y axis, and justify-self on the x axis.

        {% header "h3", "Alignment classes" %}
        - +
        @@ -543,8 +543,8 @@ {% for item in grid.alignment %} - - + +
        Class
        .{{ item.class }}{{ item.output }}.{{ item.class }}{{ item.output }} {{ item.define }} {% if item.responsive %} diff --git a/packages/stacks-docs/product/base/height.html b/packages/stacks-docs/product/base/height.html index 00293bd809..b960f81a81 100644 --- a/packages/stacks-docs/product/base/height.html +++ b/packages/stacks-docs/product/base/height.html @@ -11,7 +11,7 @@ {% header "h3", "Pixel height classes" %}
        - +
        @@ -23,7 +23,7 @@ {% for size in sizing.px %} - +
        Class
        .h{{ size.px }}.h{{ size.px }} height: {{ size.px }}px; {{ size.rem }}rem @@ -71,7 +71,7 @@ {% header "h3", "Sizing units height classes" %}
        - +
        @@ -83,7 +83,7 @@ {% for size in sizing.sizing-units %} - +
        Class
        .hs{{ size.level }}.hs{{ size.level }} height: {{ size.px }}px; {{ size.rem }}rem @@ -132,7 +132,7 @@ {% header "h3", "Fluid height classes" %}
        - +
        @@ -142,21 +142,21 @@ - + - + - +
        Class
        .h100.h100 height: 100%; {% icon "Checkmark", "fc-green-400" %}
        .h-screen.h-screen height: 100vh; {% icon "Checkmark", "fc-green-400" %}
        .h-auto.h-auto height: auto; {% icon "Checkmark", "fc-green-400" %} @@ -190,7 +190,7 @@ {% header "h3", "Min height classes" %}
        - +
        @@ -201,7 +201,7 @@ - + {% for size in sizing.sizing-units %} - + {% endfor %} - + - + - +
        Class
        .hmn0.hmn0 min-height: 0; - @@ -210,7 +210,7 @@
        .hmn{{ size.level }}.hmn{{ size.level }} min-height: {{ size.px }}px; {{ size.rem }}rem @@ -221,7 +221,7 @@
        .hmn100.hmn100 min-height: 100%; - @@ -229,7 +229,7 @@
        .hmn-screen.hmn-screen min-height: 100vh; - @@ -237,7 +237,7 @@
        .hmn-initial.hmn-initial min-height: initial; - @@ -256,7 +256,7 @@ {% header "h3", "Max height classes" %}
        - +
        @@ -268,7 +268,7 @@ {% for size in sizing.sizing-units %} - + {% endfor %} - + - + - +
        Class
        .hmx{{ size.level }}.hmx{{ size.level }} max-height: {{ size.px }}px; {{ size.rem }}rem @@ -279,7 +279,7 @@
        .hmx100.hmx100 max-height: 100%; - @@ -287,7 +287,7 @@
        .hmx-screen.hmx-screen max-height: 100vh; - @@ -295,7 +295,7 @@
        .hmx-initial.hmx-initial max-height: initial; - diff --git a/packages/stacks-docs/product/base/interactivity.html b/packages/stacks-docs/product/base/interactivity.html index b244cba630..709e05f167 100644 --- a/packages/stacks-docs/product/base/interactivity.html +++ b/packages/stacks-docs/product/base/interactivity.html @@ -9,7 +9,7 @@

        The pointer-events CSS property enables or disables all mouse events on an element.

        {% header "h3", "Pointer events classes" %}
        - +
        @@ -20,8 +20,8 @@ {% for atomic in interactivity.pointer-events %} - - + + {% endfor %} @@ -46,10 +46,10 @@
        {% header "h2", "Focus" %} -

        The focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix f: to only apply the style when the element is focused.

        +

        The focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix f: to only apply the style when the element is focused.

        {% header "h3", "Focus classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -59,7 +59,7 @@ {% for atomic in interactivity.focus %} - + {% endfor %} @@ -85,7 +85,7 @@ {% header "h3", "Conditional focus examples" %} -

        Add the conditional prefix f: to only apply the style when the element is focused.

        +

        Add the conditional prefix f: to only apply the style when the element is focused.

        {% highlight html %}
        …
        @@ -108,7 +108,7 @@

        The user-select CSS property controls whether the user can select text.

        {% header "h3", "User select classes" %}
        -
        Class
        .{{ atomic.class }}.{{ atomic.class }} {{ atomic.define }}
        +
        @@ -119,8 +119,8 @@ {% for atomic in interactivity.user-select %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/lists.html b/packages/stacks-docs/product/base/lists.html index bfd9b7a1ee..ed522ef7f5 100644 --- a/packages/stacks-docs/product/base/lists.html +++ b/packages/stacks-docs/product/base/lists.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -17,8 +17,8 @@ {% for atomic in lists.classes %} - - + + {% endfor %} @@ -27,7 +27,7 @@
        {% header "h2", "Examples" %} -

        By design, our lists inherit some sensible margins by default. However, in some layouts, you may want to strip these default margins by adding .list-reset and then explicitly choosing a list style and list style position. These classes can be applied to ordered and unordered lists interchangably, though if you’re wanting to show decimals, it’s most appropriate to mark your list up as an ordered list.

        +

        By design, our lists inherit some sensible margins by default. However, in some layouts, you may want to strip these default margins by adding .list-reset and then explicitly choosing a list style and list style position. These classes can be applied to ordered and unordered lists interchangably, though if you’re wanting to show decimals, it’s most appropriate to mark your list up as an ordered list.

        {% header "h3", "List Style" %}
        diff --git a/packages/stacks-docs/product/base/margin.html b/packages/stacks-docs/product/base/margin.html index cf90855745..72ba087256 100644 --- a/packages/stacks-docs/product/base/margin.html +++ b/packages/stacks-docs/product/base/margin.html @@ -10,7 +10,7 @@ {% header "h3", "Abbreviations" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }}
        +
        @@ -81,7 +81,7 @@ {% header "h3", "Abbreviations" %}
        -
        Abbreviation
        +
        @@ -152,7 +152,7 @@ {% header "h3", "Auto classes" %}
        -
        Abbreviation
        +
        diff --git a/packages/stacks-docs/product/base/object-fit.html b/packages/stacks-docs/product/base/object-fit.html index 8e2782e629..79f741752c 100644 --- a/packages/stacks-docs/product/base/object-fit.html +++ b/packages/stacks-docs/product/base/object-fit.html @@ -1,13 +1,13 @@ --- layout: page title: Object fit -description: Atomic classes that control the sizing of an img or video relative to its container. +description: Atomic classes that control the sizing of an img or video relative to its container. tags: base ---
        {% header "h2", "Classes" %}
        -
        Class
        +
        @@ -18,8 +18,8 @@ {% for atomic in object-fit.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/opacity.html b/packages/stacks-docs/product/base/opacity.html index cf692d3df6..28553f8109 100644 --- a/packages/stacks-docs/product/base/opacity.html +++ b/packages/stacks-docs/product/base/opacity.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -19,8 +19,8 @@ {% for atomic in opacity.classes %} - - + +
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {% if atomic.hover %} {% icon "Checkmark", "fc-green-400" %} diff --git a/packages/stacks-docs/product/base/outline.html b/packages/stacks-docs/product/base/outline.html index 924933d089..469d7f2963 100644 --- a/packages/stacks-docs/product/base/outline.html +++ b/packages/stacks-docs/product/base/outline.html @@ -11,7 +11,7 @@ {% header "h2", "Classes" %}
        - +
        @@ -22,8 +22,8 @@ {% for atomic in outline.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/overflow.html b/packages/stacks-docs/product/base/overflow.html index b65d831704..090f05d1dd 100644 --- a/packages/stacks-docs/product/base/overflow.html +++ b/packages/stacks-docs/product/base/overflow.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        @@ -18,8 +18,8 @@ {% for atomic in overflow.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/padding.html b/packages/stacks-docs/product/base/padding.html index 0186564f35..203958c88d 100644 --- a/packages/stacks-docs/product/base/padding.html +++ b/packages/stacks-docs/product/base/padding.html @@ -12,7 +12,7 @@ {% header "h3", "Padding class abbreviations" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        +
        diff --git a/packages/stacks-docs/product/base/position.html b/packages/stacks-docs/product/base/position.html index 25ed007721..c3d0649664 100644 --- a/packages/stacks-docs/product/base/position.html +++ b/packages/stacks-docs/product/base/position.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Abbreviation
        +
        @@ -19,8 +19,8 @@ {% for atomic in position.classes %} - - + +
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }} {% if atomic.responsive %} @@ -60,7 +60,7 @@ {% header "h3", "Coordinate classes" %}
        - +
        @@ -123,7 +123,7 @@ {% header "h2", "Positive coordinates" %}
        -
        Abbreviation
        +
        @@ -158,7 +158,7 @@ {% header "h2", "Negative coordinates" %}
        -
        Prefix
        +
        diff --git a/packages/stacks-docs/product/base/transitions.html b/packages/stacks-docs/product/base/transitions.html index 542eddb8fc..e9b09a83f7 100644 --- a/packages/stacks-docs/product/base/transitions.html +++ b/packages/stacks-docs/product/base/transitions.html @@ -4,13 +4,13 @@ description: Atomic transition classes allow you to quickly apply transitions properties to an element. You can modify an element’s transition duration, property, or delay. tags: base --- -

        You can trigger CSS transitions directly with pseudo classes like :hover which activate on mouse over, :focus which activates when user tabs onto or clicks into an input element, or active when a user clicks on an element.

        +

        You can trigger CSS transitions directly with pseudo classes like :hover which activate on mouse over, :focus which activates when user tabs onto or clicks into an input element, or active when a user clicks on an element.

        You can also trigger a CSS transition using JavaScript by adding or removing a class.

        {% header "h2", "Classes" %}
        -
        Prefix
        +
        @@ -21,8 +21,8 @@ {% for atomic in transitions.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/truncation.html b/packages/stacks-docs/product/base/truncation.html index e5361c2fe7..e7b2126bd1 100644 --- a/packages/stacks-docs/product/base/truncation.html +++ b/packages/stacks-docs/product/base/truncation.html @@ -17,28 +17,28 @@ - + - + - + - - + + - - + + @@ -87,7 +87,7 @@ {% header "h3", "Fade" %} -

        Alternatively, you can use a vertical fade that will set max-height and sets a vertical mask-image:

        +

        Alternatively, you can use a vertical fade that will set max-height and sets a vertical mask-image:

        {% highlight html %}

        …

        diff --git a/packages/stacks-docs/product/base/vertical-alignment.html b/packages/stacks-docs/product/base/vertical-alignment.html index 4ce8291b05..ce5add6398 100644 --- a/packages/stacks-docs/product/base/vertical-alignment.html +++ b/packages/stacks-docs/product/base/vertical-alignment.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }} {{ atomic.define }}
        .truncate.truncate Text is cropped to the width of its parent with an ellipsis.
        .v-truncate[x].v-truncate[x] Text is cropped to the length of [x] number of lines with an ellipsis.
        .v-truncate-fade.v-truncate-fade Text is cropped by visually fading it out.
        .v-truncate-fade__sm.v-truncate-fade.v-truncate-fade__sm.v-truncate-fade Reduces the height of the visible text
        .v-truncate-fade__lg.v-truncate-fade.v-truncate-fade__lg.v-truncate-fade Increases the amount of visible text.
        +
        @@ -17,8 +17,8 @@ {% for atomic in vertical-alignment.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/base/visibility.html b/packages/stacks-docs/product/base/visibility.html index 8d08367b4f..b011780cf3 100644 --- a/packages/stacks-docs/product/base/visibility.html +++ b/packages/stacks-docs/product/base/visibility.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }}
        +
        @@ -17,7 +17,7 @@ {% for atomic in visibility.classes %} - + {% endfor %} diff --git a/packages/stacks-docs/product/base/width.html b/packages/stacks-docs/product/base/width.html index b225327e9d..009e6241f8 100644 --- a/packages/stacks-docs/product/base/width.html +++ b/packages/stacks-docs/product/base/width.html @@ -11,7 +11,7 @@ {% header "h3", "Pixel width classes" %}
        -
        Class
        .{{ atomic.class }}.{{ atomic.class }} {{ atomic.definition }}
        +
        @@ -23,7 +23,7 @@ {% for size in sizing.px %} - +
        Class
        .w{{ size.px }}.w{{ size.px }} width: {{ size.px }}px; {{ size.rem }}rem @@ -73,7 +73,7 @@ {% header "h3", "Sizing units width classes" %}
        - +
        @@ -85,7 +85,7 @@ {% for size in sizing.sizing-units %} - +
        Class
        .ws{{ size.level }}.ws{{ size.level }} width: {{ size.px }}px; {{ size.rem }}rem @@ -132,7 +132,7 @@ {% header "h3", "Fluid width classes" %}
        - +
        @@ -143,7 +143,7 @@ {% for size in sizing.percent %} - + {% endfor %} - + - +
        Class
        .w{{ size.percentage }}.w{{ size.percentage }} width: {{ size.percentage }}% {% if size.responsive %} @@ -153,14 +153,14 @@
        .w-screen.w-screen width: 100vw; {% icon "Checkmark", "fc-green-400" %}
        .w-auto.w-auto width: auto; {% icon "Checkmark", "fc-green-400" %} @@ -209,7 +209,7 @@ {% header "h3", "Min width classes" %}
        - +
        @@ -220,7 +220,7 @@ - + {% for size in sizing.sizing-units %} - + - + {% endfor %} - + - +
        Class
        .wmn0.wmn0 min-width: 0; - @@ -229,7 +229,7 @@
        .wmn{{ size.level }}.wmn{{ size.level }} min-width: {{ size.px }}px; {{ size.rem }}rem @@ -244,7 +244,7 @@ {% assign percentItems = percentItems | split: "," %} {% for size in percentItems %}
        .wmn{{ size }}.wmn{{ size }} min-width: {{ size }}%; - @@ -255,7 +255,7 @@
        .wmn-screen.wmn-screen min-width: 100vh; - @@ -263,7 +263,7 @@
        .wmn-initial.wmn-initial min-width: initial; - @@ -282,7 +282,7 @@ {% header "h3", "Max width classes" %}
        - +
        @@ -294,7 +294,7 @@ {% for size in sizing.sizing-units %} - + - + - + - +
        Class
        .wmx{{ size.level }}.wmx{{ size.level }} max-width: {{ size.px }}px; {{ size.rem }}rem @@ -309,7 +309,7 @@ {% assign percentItems = percentItems | split: "," %} {% for size in percentItems %}
        .wmx{{ size }}.wmx{{ size }} max-width: {{ size }}%; - @@ -321,7 +321,7 @@ {% endfor %}
        .wmx-screen.wmx-screen max-width: 100vh; - @@ -329,7 +329,7 @@
        .wmx-initial.wmx-initial max-width: initial; - diff --git a/packages/stacks-docs/product/base/z-index.html b/packages/stacks-docs/product/base/z-index.html index 7c22f7124a..8b23da78c9 100644 --- a/packages/stacks-docs/product/base/z-index.html +++ b/packages/stacks-docs/product/base/z-index.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        - +
        @@ -17,8 +17,8 @@ {% for atomic in z-index.classes %} - - + + {% endfor %} diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html index ec795ad5f1..6012439c2c 100644 --- a/packages/stacks-docs/product/components/activity-indicator.html +++ b/packages/stacks-docs/product/components/activity-indicator.html @@ -12,7 +12,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        .{{ atomic.class }}{{ atomic.output }}.{{ atomic.class }}{{ atomic.output }}
        +
        @@ -23,8 +23,8 @@ {% for item in activity-indicator.indicator %} - - + + {% endfor %} @@ -35,7 +35,7 @@
        {% header "h2", "Examples" %} {% header "h3", "Default" %} -

        By default, our indicator has no positioning attached to it. Depending on your context, you can modify the activity indicator’s positioning using any combination of atomic classes. Since our activity indicator has no inherent semantic meaning, make sure to include visually-hidden, screenreader-only text with the v-visible-sr class.

        +

        By default, our indicator has no positioning attached to it. Depending on your context, you can modify the activity indicator’s positioning using any combination of atomic classes. Since our activity indicator has no inherent semantic meaning, make sure to include visually-hidden, screenreader-only text with the v-visible-sr class.

        {% highlight html %}
        diff --git a/packages/stacks-docs/product/components/avatars.html b/packages/stacks-docs/product/components/avatars.html index ce34587646..6b87c6e8f1 100644 --- a/packages/stacks-docs/product/components/avatars.html +++ b/packages/stacks-docs/product/components/avatars.html @@ -9,7 +9,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        {{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %} {{ item.description }}
        +
        @@ -20,8 +20,8 @@ {% for item in avatars-component.classes %} - - + + {% endfor %} @@ -32,7 +32,7 @@
        {% header "h2", "Examples" %} {% header "h3", "Users" %} -

        Including an image with the class s-avatar--image within s-avatar will apply the correct size. Remember, you’ll want to double the size of the avatar image to account for retina screens.

        +

        Including an image with the class s-avatar--image within s-avatar will apply the correct size. Remember, you’ll want to double the size of the avatar image to account for retina screens.

        {% highlight html %} @@ -68,8 +68,8 @@
        Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }} {{ item.description }}
        - 16px - default + 16px + default @@ -79,8 +79,8 @@
        - 24px - .s-avatar__24 + 24px + .s-avatar__24 @@ -90,8 +90,8 @@
        - 32px - .s-avatar__32 + 32px + .s-avatar__32 @@ -101,8 +101,8 @@
        - 48px - .s-avatar__48 + 48px + .s-avatar__48 @@ -112,8 +112,8 @@
        - 64px - .s-avatar__64 + 64px + .s-avatar__64 @@ -123,8 +123,8 @@
        - 96px - .s-avatar__96 + 96px + .s-avatar__96 @@ -134,8 +134,8 @@
        - 128px - .s-avatar__128 + 128px + .s-avatar__128 @@ -150,7 +150,7 @@ {% header "h3", "Activity" %}

        Avatars can display activity indicators to show activities or status changes. - Add the s-avatar--indicator class to a child element of s-avatar along with s-activity-indicator and s-activity-indicator__sm classes. + Add the s-avatar--indicator class to a child element of s-avatar along with s-activity-indicator and s-activity-indicator__sm classes. The indicator is positioned at the top-right corner of the avatar.

        {% highlight html %} @@ -172,8 +172,8 @@
        - 16px - default + 16px + default @@ -186,8 +186,8 @@
        - 24px - .s-avatar__24 + 24px + .s-avatar__24 @@ -257,8 +257,8 @@ @@ -198,9 +198,9 @@ @@ -282,12 +282,12 @@ @@ -337,12 +337,12 @@ @@ -404,7 +404,7 @@
        {% assign classes = type.html | split: " " %} {% for class in classes %} - .{{ class }} + .{{ class }} {% endfor %}
        @@ -448,9 +448,9 @@ @@ -500,9 +500,9 @@ diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html index 29e2a390f7..a70ac51c16 100644 --- a/packages/stacks-docs/product/components/banners.html +++ b/packages/stacks-docs/product/components/banners.html @@ -21,10 +21,10 @@

        System banners are used for system messaging. They are full-width notices placed in one of two locations:

          -
        1. Above everything else: If the system banner is related to the entire website (e.g. the website is in read-only), place the banner first. These cannot be dismissed until the issue is resolved. To pin a system banner to the top of the browser window, add .is-pinned.
          2. +
        2. Above everything else: If the system banner is related to the entire website (e.g. the website is in read-only), place the banner first. These cannot be dismissed until the issue is resolved. To pin a system banner to the top of the browser window, add .is-pinned.
        3. Below the top navigation bar: This is the default location for all system banners. Use these banners when it affects only a particular area of the product (e.g. when a product subscription is about to expire).
        -

        Since system banners are a type of notice, you can use the following notice visual styles in conjunction with .s-banner:

        +

        Since system banners are a type of notice, you can use the following notice visual styles in conjunction with .s-banner:

        @@ -41,8 +41,8 @@
        {% for item in banners.system %} - - + + {% endfor %} @@ -50,11 +50,11 @@
        - 16px - default + 16px + default @@ -290,8 +290,8 @@
        - 24px - .s-avatar__24 + 24px + .s-avatar__24 @@ -317,8 +317,8 @@
        - 32px - .s-avatar__32 + 32px + .s-avatar__32 @@ -344,8 +344,8 @@
        - 48px - .s-avatar__48 + 48px + .s-avatar__48 @@ -371,8 +371,8 @@
        - 64px - .s-avatar__64 + 64px + .s-avatar__64 @@ -398,8 +398,8 @@
        - 96px - .s-avatar__96 + 96px + .s-avatar__96 @@ -425,8 +425,8 @@
        - 128px - .s-avatar__128 + 128px + .s-avatar__128 diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html index cac8a618ab..4da2598456 100644 --- a/packages/stacks-docs/product/components/badges.html +++ b/packages/stacks-docs/product/components/badges.html @@ -134,9 +134,9 @@
        - .s-badge > + .s-badge > {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %}
        - .s-badge + .s-badge {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %}
        - .s-badge + .s-badge {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %} {% if badge.class != nil %} - .{{ badge.class }} + .{{ badge.class }} {% endif %}
        - .s-badge + .s-badge {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %} {% if badge.class != nil %} - .{{ badge.class }} + .{{ badge.class }} {% endif %}
        - .s-badge + .s-badge {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %}
        - .s-badge + .s-badge {% if type.class != nil %} - .{{ type.class }} + .{{ type.class }} {% endif %}
        {{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %} {{ item.description }}
        {% header "h2", "JavaScript" %} -

        The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.

        +

        The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.

        {% header "h3", "Attributes" %}
        - +
        @@ -64,17 +64,17 @@ - + - + - + - + @@ -83,7 +83,7 @@ {% header "h3", "Events" %}
        -
        Attribute
        data-controller="s-banner"data-controller="s-banner" Controller elementWires up the element to the banner controller. This may be a .s-banner element or a wrapper element.Wires up the element to the banner controller. This may be a .s-banner element or a wrapper element.
        data-s-banner-target="banner"data-s-banner-target="banner" .s-banner element Wires up the element that is to be shown/hidden
        data-s-banner-remove-when-hidden="true"data-s-banner-remove-when-hidden="true" Controller element Optional Removes the banner from the DOM entirely when it is hidden
        +
        @@ -93,22 +93,22 @@ - + - + - + - + - + - + @@ -116,7 +116,7 @@
        Event
        s-banner:shows-banner:show Banner targetDefault preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.Default preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.
        s-banner:showns-banner:shown Banner target Fires after the banner has been visually shown
        s-banner:hides-banner:hide Banner targetDefault preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.Default preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.
        s-banner:hiddens-banner:hidden Banner target Fires after the banner has been visually hidden
        - +
        @@ -126,16 +126,16 @@ - - - + + +
        event.detail
        dispatchers-banner:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.dispatchers-banner:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc.
        {% header "h3", "Helpers" %}
        - +
        @@ -145,16 +145,16 @@ - + - + diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html index 5ee71b5fc2..1f1bfd5c0d 100644 --- a/packages/stacks-docs/product/components/bling.html +++ b/packages/stacks-docs/product/components/bling.html @@ -44,9 +44,9 @@ @@ -93,10 +93,10 @@ @@ -112,7 +112,7 @@
        {% header "h2", "Sizes" %} -

        A bling component has a default size. To change the bling’s size, apply one of the following sizing classes along with the base .s-bling class.

        +

        A bling component has a default size. To change the bling’s size, apply one of the following sizing classes along with the base .s-bling class.

        {% highlight html %} … @@ -139,9 +139,9 @@
        diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index 62925ba204..16576359c3 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -8,7 +8,7 @@
        {% header "h2", "Classes" %}
        -
        Function
        Stacks.showBannerStacks.showBanner - element: the element the data-controller="s-banner" attribute is on

        + element: the element the data-controller="s-banner" attribute is on

        		Helper to manually show an s-banner element via external JS
        Stacks.hideBannerStacks.hideBanner - element: the element the data-controller="s-banner" attribute is on

        + element: the element the data-controller="s-banner" attribute is on

        		Helper to manually hide an s-banner element via external JS
        - .s-bling + .s-bling {% if bling.name != "default" %} - .s-bling__{{ bling.modifier }} + .s-bling__{{ bling.modifier }} {% endif %}
        - .s-bling - .s-bling__filled + .s-bling + .s-bling__filled {% if bling.name != "default" %} - .s-bling__{{ bling.modifier }} + .s-bling__{{ bling.modifier }} {% endif %}
        - .s-bling + .s-bling {% if size != "default" %} - .s-bling__{{ size }} + .s-bling__{{ size }} {% endif %}
        +
        @@ -19,8 +19,8 @@ {% for item in breadcrumbs.classes %} - - + + {% endfor %} @@ -36,7 +36,7 @@
      5. The current page does not have its own navigation
      6. The user needs to quickly go back to the previous parent page
        7. -

        Breadcrumbs should be the first page element—placed directly above the page’s title. The page the user is on should not appear in the breadcrumb trail, since that indicator is satisfied by the title of the page itself. Additionally, the last .s-breadcrumb--item shouldn’t include the divider.

        +

        Breadcrumbs should be the first page element—placed directly above the page’s title. The page the user is on should not appear in the breadcrumb trail, since that indicator is satisfied by the title of the page itself. Additionally, the last .s-breadcrumb--item shouldn’t include the divider.

        It is not appropriate to use Breadcrumbs when:

          diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index 17308673d6..6821683192 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -2,13 +2,13 @@ layout: page title: Button groups figma: https://svelte.stackoverflow.design/figma/button-groups -description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the .s-btn-group component. Add the class .is-selected and the aria-current attribute with the appropriate value to show the currently selected button. +description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the .s-btn-group component. Add the class .is-selected and the aria-current attribute with the appropriate value to show the currently selected button. tags: components ---
          {% header "h2", "Classes" %}
          -
        Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }} {{ item.description }}
        +
        @@ -19,8 +19,8 @@ {% for item in button-groups.classes %} - - + + {% endfor %} @@ -36,7 +36,7 @@

        {{item.description}}

        -
        Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }} {{ item.description }}
        +
        @@ -47,8 +47,8 @@ {% for attribute in item.attributes %} - - + + {% endfor %} @@ -158,7 +158,7 @@
        {% header "h2", "Radio" %}

        - Button groups can be implemented using radio elements with the class .s-btn--radio on the radio input element. This class assumes all buttons are styled label elements. + Button groups can be implemented using radio elements with the class .s-btn--radio on the radio input element. This class assumes all buttons are styled label elements.

        {% highlight html %} @@ -200,7 +200,7 @@ {% header "h2", "Links" %}

        In some cases items in the button groups let users navigate between related sections of content, displaying one section at a time. - In those cases an a tag should be prefferred over the button. + In those cases an a tag should be prefferred over the button.

        {% highlight html %} diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index b793edeaa0..57367c2cf8 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -19,7 +19,7 @@ {% header "h3", "Base" %} -

        Base buttons can gain clear styling with the .s-btn__clear class.

        +

        Base buttons can gain clear styling with the .s-btn__clear class.

        {% highlight html %} @@ -45,12 +45,12 @@
        @@ -94,12 +94,12 @@ @@ -146,10 +146,10 @@ @@ -196,12 +196,12 @@ @@ -221,7 +221,7 @@
        {% header "h2", "Anchors" %} -

        Anchors can be rendered with the .s-btn to adopt a button-like visual style for a link.

        +

        Anchors can be rendered with the .s-btn to adopt a button-like visual style for a link.

        {% highlight html %} @@ -245,12 +245,12 @@
        @@ -268,7 +268,7 @@
        {% header "h2", "Loading" %} -

        Indicate a loading state by adding a .s-loader component to a button.

        +

        Indicate a loading state by adding a .s-loader component to a button.

        {% highlight html %}
        @@ -382,7 +382,7 @@
        {% header "h2", "Badges" %} -

        Adding an .s-btn--badge to any button will add an appropriately-styled badge.

        +

        Adding an .s-btn--badge to any button will add an appropriately-styled badge.

        {% highlight html %} @@ -411,14 +411,14 @@
        Item
        {{ attribute.attribute }}{{ attribute.applies }}{{ attribute.attribute }}{{ attribute.applies }} {{ attribute.description }}
        {{ class.title }}
        - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
        		{{ class.title }}
        - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
        - .s-btn - .s-btn__featured + .s-btn + .s-btn__featured {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
        - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
        		{{ btn.title }}
        - .s-btn + .s-btn {% if btn.variant != nil %} - .{{ btn.variant }} + .{{ btn.variant }} {% endif %} {% if btn.modifier != nil %} - .{{ btn.modifier }} + .{{ btn.modifier }} {% endif %}
        		{{ btn.title }}
        - .s-btn + .s-btn {% if btn.variant != nil %} - .{{ btn.variant }} + .{{ btn.variant }} {% endif %} {% if btn.modifier != nil %} - .{{ btn.modifier }} + .{{ btn.modifier }} {% endif %} - .s-loader s-loader__sm + .s-loader s-loader__sm
        		{{ btn.title }}
        - .s-btn + .s-btn {% if btn.variant != nil %} - .{{ btn.variant }} + .{{ btn.variant }} {% endif %} {% if btn.modifier != nil %} - .{{ btn.modifier }} + .{{ btn.modifier }} {% endif %} - .s-btn__dropdown + .s-btn__dropdown
        		{{ btn.title }}
        - .s-btn + .s-btn {% if btn.variant != nil %} - .{{ btn.variant }} + .{{ btn.variant }} {% endif %} {% if btn.modifier != nil %} - .{{ btn.modifier }} + .{{ btn.modifier }} {% endif %} - .s-btn--badge + .s-btn--badge
        		@@ -447,10 +447,10 @@
        {% header "h2", "Sizes" %} -

        A button’s default font-size is determined by the @body-fs variable. To change the button’s font-size, use the following classes with .s-btn:

        +

        A button’s default font-size is determined by the @body-fs variable. To change the button’s font-size, use the following classes with .s-btn:

        - +
        @@ -467,7 +467,7 @@ {% if size.class == "N/A" %} {{ size.class }} {% else %} - {{ size.class }} + {{ size.class }} {% endif %} @@ -481,7 +481,7 @@
        {% header "h2", "Toggle buttons" %} -

        Each button class has a selected state which can be visually activated by applying the .is-selected class. When a button can switch between selected and unselected states, it is important to also annotate the button with the aria-pressed attribute for accessibility. A title attribute may also be appropriate to describe what will happen when pressing the button.

        +

        Each button class has a selected state which can be visually activated by applying the .is-selected class. When a button can switch between selected and unselected states, it is important to also annotate the button with the aria-pressed attribute for accessibility. A title attribute may also be appropriate to describe what will happen when pressing the button.

        {% highlight html %} @@ -513,7 +513,7 @@ {% header "h3", "Disabled" %}
        -
        Type {{ size.fs }}
        +
        @@ -526,9 +526,9 @@ - + @@ -537,7 +537,7 @@ {% header "h3", "Resets" %}
        -
        Type
        Disabled - [aria-disabled="true"] + [aria-disabled="true"] Adds disabled styling to any element with .s-btn applied.Adds disabled styling to any element with .s-btn applied. Ask question
        +
        @@ -550,7 +550,7 @@ @@ -558,9 +558,9 @@ - + @@ -569,7 +569,7 @@ {% header "h3", "Icons" %}
        -
        Type
        Unset - .s-btn__unset + .s-btn__unset Removes all styling from a button and reverts focus states to browser default.
        Link - .s-btn__link + .s-btn__link Styles a button element as though it were a link. Instead of transforming an s-btn to a link, you most likely want to style a button as a link.Styles a button element as though it were a link. Instead of transforming an s-btn to a link, you most likely want to style a button as a link.
        +
        @@ -582,7 +582,7 @@
        Type
        Icon - .s-btn__icon + .s-btn__icon Adds some margin overrides that apply to an icon within a button @@ -599,7 +599,7 @@ {% header "h3", "Social" %}
        - +
        @@ -612,7 +612,7 @@ @@ -91,9 +91,9 @@ {% header "h2", "Accessibility" %}

        The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

          -
        • All inputs should have an id attribute.
          • -
        • Be sure to associate the checkbox label by using the for attribute. The value here is the input's id.
          • -
        • If you have a group of related checkboxes, use the fieldset and legend to group them together.
          • +
        • All inputs should have an id attribute.
          • +
        • Be sure to associate the checkbox label by using the for attribute. The value here is the input's id.
          • +
        • If you have a group of related checkboxes, use the fieldset and legend to group them together.

        For more information, please read Gov.UK's article, "Using the fieldset and legend elements".

        @@ -203,7 +203,7 @@ {% header "h3", "Validation classes" %}
        -
        Type
        Facebook - .s-btn__facebook + .s-btn__facebook Styles a button consistent with Facebook’s branding @@ -622,7 +622,7 @@
        Google - .s-btn__google + .s-btn__google Styles a button consistent with Google’s branding @@ -632,7 +632,7 @@
        GitHub - .s-btn__github + .s-btn__github Styles a button consistent with GitHub’s branding diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index a2974483c0..2521ef0d98 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -40,7 +40,7 @@

        Base card title

        {% header "h2", "Box shadows" %} -

        Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

        +

        Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

        {% highlight html %}
        …
        @@ -68,8 +68,8 @@

        Large box shadow

        {% header "h2", "Linked cards" %} -

        The .s-card class can be applied to an <a> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an .s-btn or .s-link somewhere).

        -

        A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

        +

        The .s-card class can be applied to an <a> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an .s-btn or .s-link somewhere).

        +

        A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

        {% highlight html %} @@ -146,7 +146,7 @@

        Linked card title

        {% header "h2", "Stacked" %} -

        First introduced for our collections feature in Teams, cards can also be stacked to imply multiple sections or items. No need to overthink it, we can just nest our cards. Note: You’ll need to compensate for the 4px of nesting on that right edge to keep things equidistant.

        +

        First introduced for our collections feature in Teams, cards can also be stacked to imply multiple sections or items. No need to overthink it, we can just nest our cards. Note: You’ll need to compensate for the 4px of nesting on that right edge to keep things equidistant.

        {% highlight html %}
        diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html index 39b417fb47..9fd321b5c9 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -9,7 +9,7 @@
        {% header "h2", "Base" %} -

        Use the .s-checkbox to wrap input[type="checkbox"] elements to apply checkbox styles.

        +

        Use the .s-checkbox to wrap input[type="checkbox"] elements to apply checkbox styles.

        {% highlight html %} @@ -46,7 +46,7 @@
        {% header "h3", "Checkmark" %} -

        The checkmark style is an alternative to the base checkbox style. To use the checkmark style, wrap your input and label in a container with the .s-checkbox__checkmark class.

        +

        The checkmark style is an alternative to the base checkbox style. To use the checkmark style, wrap your input and label in a container with the .s-checkbox__checkmark class.

        {% highlight html %} @@ -75,7 +75,7 @@
        		- .s-checkbox__checkmark + .s-checkbox__checkmark {{ input.description }}
        +
        @@ -213,7 +213,7 @@ {% for state in inputs.validation %} - + {% endfor %} diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index c6890a3fe1..7e026ca1eb 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -7,7 +7,7 @@
        {% header "h2", "Classes" %}
        -
        Class
        {{ state.class }}{{ state.class }} {{ state.description }}
        +
        @@ -17,19 +17,19 @@ - - + + - - + + - - - + + +
        Class
        .s-code-blockpre.s-code-blockpre Adds proper styling to pre-formatted code.
        .linenums.s-code-block.linenums.s-code-block Adds a line numbers column to the code block.
        .linenums:<n>.s-code-blockAdds a line numbers column to the code block starting at a number <n>..linenums:<n>.s-code-blockAdds a line numbers column to the code block starting at a number <n>.
        @@ -38,7 +38,7 @@
        {% header "h2", "Language examples" %} -

        The following examples are a small subset of the languages that highlight.js supports.

        +

        The following examples are a small subset of the languages that highlight.js supports.

        {% header "h3", "HTML" %}
        {% highlight html %} @@ -433,7 +433,7 @@
        {% header "h2", "Line numbers" %} -

        Add .linenums to include line numbers on a code block.

        +

        Add .linenums to include line numbers on a code block.

        {% header "h3", "Default" %}
        {% highlight html %} @@ -454,7 +454,7 @@
        {% header "h3", "Offset" %} -

        Append a number preceeded by : to .linenums to offset the start of the line numbers.

        +

        Append a number preceeded by : to .linenums to offset the start of the line numbers.

        {% highlight html %} 
        diff --git a/packages/stacks-docs/product/components/editor.html b/packages/stacks-docs/product/components/editor.html
index 9e7becf77e..92eaf0a08f 100644
--- a/packages/stacks-docs/product/components/editor.html
+++ b/packages/stacks-docs/product/components/editor.html
@@ -11,7 +11,7 @@
     
        Because of its size, the Stacks editor is bundled independently of Stacks. You can install it a few ways:
        
 
     {% header "h3", "NPM" %}
-    
        The Stacks Editor is available as an NPM package. To make it available in your node modules, npm install @stackoverflow/stacks-editor
        
+    
        The Stacks Editor is available as an NPM package. To make it available in your node modules, npm install @stackoverflow/stacks-editor
        
 
     {% header "h3", "Import via Modules or CommonJS" %}
     
        
diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html
index f2415b4961..4a2e7759ad 100644
--- a/packages/stacks-docs/product/components/expandable.html
+++ b/packages/stacks-docs/product/components/expandable.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Examples" %}
     {% header "h3", "Basic" %}
-    
        From a purely visual standpoint, all you need is a container of class s-expandable and a child of class s-expandable--content. Toggle the state class is-expanded on the container to collapse / expand the content. Care must be taken to keep the collapsing functionality accessible.
        
+    
        From a purely visual standpoint, all you need is a container of class s-expandable and a child of class s-expandable--content. Toggle the state class is-expanded on the container to collapse / expand the content. Care must be taken to keep the collapsing functionality accessible.
        
 
 
     
        
@@ -48,7 +48,7 @@
     
        
 
     {% header "h3", "Multiple" %}
-    
        It’s also possible to control the state of multiple elements from a single s-expandable-control by listing all the ids for the controlled elements in the aria-controls attribute.
        
+    
        It’s also possible to control the state of multiple elements from a single s-expandable-control by listing all the ids for the controlled elements in the aria-controls attribute.
        
 
     
        
 {% highlight html %}
@@ -100,22 +100,22 @@
 
        
     {% header "h2", "JavaScript" %}
 
-    
        In the usual case in which you have a button or other clickable element that toggles the expanded state, you can use the built-in s-expandable-control functionality. See the JavaScript introduction for general information on JS in Stacks.
        
+    
        In the usual case in which you have a button or other clickable element that toggles the expanded state, you can use the built-in s-expandable-control functionality. See the JavaScript introduction for general information on JS in Stacks.
        
 
     
          
-        
        1. Give all desired s-expandable elements an id attribute.
          2. 
-        
        2. Give your button an aria-controls attribute whose value is a space-separated list of all IDs in 1.
          3. 
-        
        3. Give your button an aria-expanded attribute whose value is true or false depending on the initial state of your expandables.
          4. 
-        
        4. Give your button a data-controller="s-expandable-control" attribute.
          5. 
-        
        5. If your button is an element that is not focusable by default, be sure to make it keyboard-reachable with tabindex="0"
          6. 
-        
        6. Give your button an aria-label attribute that makes it clear that this is a expanding/collapsing control, unless this is already clear from its text content
          7. 
+        
        7. Give all desired s-expandable elements an id attribute.
          8. 
+        
        8. Give your button an aria-controls attribute whose value is a space-separated list of all IDs in 1.
          9. 
+        
        9. Give your button an aria-expanded attribute whose value is true or false depending on the initial state of your expandables.
          10. 
+        
        10. Give your button a data-controller="s-expandable-control" attribute.
          11. 
+        
        11. If your button is an element that is not focusable by default, be sure to make it keyboard-reachable with tabindex="0"
          12. 
+        
        12. Give your button an aria-label attribute that makes it clear that this is a expanding/collapsing control, unless this is already clear from its text content
          13. 
     
        
 
-    
        A common need is for one or more CSS classes to be applied to the expandable control whenever the state is toggled, e.g. to indicate a “selected” state. To achieve this, you can add the data-s-expandable-control-toggle-class attribute. The value should be a space-separated list of CSS classes. These classes will be added to the control whenever it expands the expandable, and removed whenever it collapses it.
        
+    
        A common need is for one or more CSS classes to be applied to the expandable control whenever the state is toggled, e.g. to indicate a “selected” state. To achieve this, you can add the data-s-expandable-control-toggle-class attribute. The value should be a space-separated list of CSS classes. These classes will be added to the control whenever it expands the expandable, and removed whenever it collapses it.
        
 
     
        See the previous section for an example of all of this.
        
 
-    
        If you are writing custom CSS to indicate the selected state of the expandable control, consider targetting [aria-controls="true"] instead of creating a new class.
        
+    
        If you are writing custom CSS to indicate the selected state of the expandable control, consider targetting [aria-controls="true"] instead of creating a new class.
        
 
     
        If your expandable control is a checkbox or radio button, then the visibility of the expandable will be synchronized with the radio / checkbox state:
        
 
@@ -157,5 +157,5 @@
     
        
 
     {% header "h3", "Events" %}
-    
        When an s-expandable-control collapses or expands an element, it will fire an event of type s-expandable-control:hide or s-expandable-control:show, respectively. This event is fired synchronously. The event’s target element is the s-expandable-control element, not the expandable itself.
        
+    
        When an s-expandable-control collapses or expands an element, it will fire an event of type s-expandable-control:hide or s-expandable-control:show, respectively. This event is fired synchronously. The event’s target element is the s-expandable-control element, not the expandable itself.
        
 
        
diff --git a/packages/stacks-docs/product/components/inputs.html b/packages/stacks-docs/product/components/inputs.html
index d29f0d56bc..d8814647f3 100644
--- a/packages/stacks-docs/product/components/inputs.html
+++ b/packages/stacks-docs/product/components/inputs.html
@@ -67,17 +67,17 @@
     {% header "h2", "Accessibility" %}
     
        The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to inputs, there are a few things to keep in mind:
        
     
          
-        
        • All inputs should have an id attribute.
          • 
-        
        • Be sure to associate the input’s label by using the for attribute. The value here is the input’s id.
          • 
-        
        • If you have a group of related inputs, use the fieldset and legend to group them together.
          • 
+        
        • All inputs should have an id attribute.
          • 
+        
        • Be sure to associate the input’s label by using the for attribute. The value here is the input’s id.
          • 
+        
        • If you have a group of related inputs, use the fieldset and legend to group them together.
          • 
     
        
     
        For more information, please read Gov.UK's article, "Using the fieldset and legend elements".
        
 
     {% header "h3", "Required input fields" %}
-    
        Labels or instructions must be provided when content requires user input. For any input field within a form that is required for successful data submission, provide the asterisk * as a symbol and a legend advising the meaning of the symbol before the first use.
        
-    
        Stacks includes a special .s-required-symbol class to ensure the symbol (asterisk) is clearly visible.
        
+    
        Labels or instructions must be provided when content requires user input. For any input field within a form that is required for successful data submission, provide the asterisk * as a symbol and a legend advising the meaning of the symbol before the first use.
        
+    
        Stacks includes a special .s-required-symbol class to ensure the symbol (asterisk) is clearly visible.
        
 
-    
+    
        
@@ -87,8 +87,8 @@
         
-                
-                
+                
+                
@@ -153,7 +153,7 @@ 
        
 
     {% header "h3", "Validation classes" %}
     
        
-        
        
         
             
        
                 Class
        
         
             
        .s-required-symbolabbr element enclosing the asterisk.s-required-symbolabbr element enclosing the asterisk
                 Used to style the asterisk indicating that a specific field is required.
             
        
         
        
+        
        
@@ -164,7 +164,7 @@ 
        
             
        
                 {% for state in inputs.validation %}
                     
-                        
+                        
@@ -181,7 +181,7 @@ 
        
         Once the user is presented validation states, they can be cleared as soon as the user interacts with the form field. For example, the error state for an incorrect password should be cleared as soon as the user focuses the input to re-enter their password.
     
        
     
        
-        Similarly to using for with labels, validation messages below inputs should be associated with their respective fields using the aria-describedby attribute for accessible behavior.
+        Similarly to using for with labels, validation messages below inputs should be associated with their respective fields using the aria-describedby attribute for accessible behavior.
     
        
 
     {% header "h3", "Validation examples" %}
@@ -271,7 +271,7 @@ 
        
 
        
     {% header "h2", "Icons" %}
     {% header "h3", "Search" %}
-    
        Stacks provides helper classes to consistently style an input used for search. First, wrap your search input in an element with relative positioning. Then, and add s-input__search to the input itself. Finally, be sure to add s-input-icon and s-input-icon__search to the search icon.
        
+    
        Stacks provides helper classes to consistently style an input used for search. First, wrap your search input in an element with relative positioning. Then, and add s-input__search to the input itself. Finally, be sure to add s-input-icon and s-input-icon__search to the search icon.
        
 
     
        
 {% highlight html %}
@@ -328,7 +328,7 @@ 
        
                     
        
-                        
+                        
                     {% endfor %}
@@ -412,7 +412,7 @@ 
        
 
        
 
     {% header "h2", "Nested inputs" %}
-    
        An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.
        
+    
        An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.
        
 
     
        
 {% highlight html %}
diff --git a/packages/stacks-docs/product/components/labels.html b/packages/stacks-docs/product/components/labels.html
index c1ffa75c41..d091552d8f 100644
--- a/packages/stacks-docs/product/components/labels.html
+++ b/packages/stacks-docs/product/components/labels.html
@@ -36,7 +36,7 @@
 
        
     {% header "h2", "Sizes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ state.class }}{{ state.class }}
                         Parent wrapper for input
                         {{ state.description }}
                     
        
                         {{ item.name }}
                         {{ item.size }}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}
                         
                     
        
+        
        
@@ -52,7 +52,7 @@
                     
-                        
+                        
                     {% endfor %}
diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html
index 83f240d2bd..93c3710497 100644
--- a/packages/stacks-docs/product/components/link-previews.html
+++ b/packages/stacks-docs/product/components/link-previews.html
@@ -7,7 +7,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Name
        
                         {{ item.name }}
                         {{ item.size }}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}
                         
                     
        
+        
        
@@ -18,8 +18,8 @@
             
                 {% for item in link-previews.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -79,8 +79,8 @@
     
 
     {% header "h3", "Code blocks" %}
-    
        Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.
        
-    
        Add a s-code-block class to the <pre> tag if you’d like to apply highlight.js’s syntax highlighting on Stack Exchange sites with this option enabled.
        
+    
        Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.
        
+    
        Add a s-code-block class to the <pre> tag if you’d like to apply highlight.js’s syntax highlighting on Stack Exchange sites with this option enabled.
        
 {% highlight html %}
 
        
@@ -147,9 +147,9 @@
     
        
 
     {% header "h3", "Code blocks with line numbers" %}
-    
        You can further configure highlight.js’s syntax highlighting to include line numbers by adding the class linenums to the prettified <pre> tag containing the code. See also Code blocks.
        
+    
        You can further configure highlight.js’s syntax highlighting to include line numbers by adding the class linenums to the prettified <pre> tag containing the code. See also Code blocks.
        
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.parent }}{{ item.class }}{{ item.parent }}
                         {{ item.description }}
                     
        
     
        
+        
        
@@ -158,12 +158,12 @@
             
-                    
+                    
-                    
-                    
+                    
+                    
        
             
                 
        
                     Class
        
             
                 
        linenumslinenums
                     Count starts at line 1
                 
        
                 
        linenums:<n>Count starts at line <n>linenums:<n>Count starts at line <n>
                 
        
                     
         
        
diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html
index ba813e36ab..4735f6dbb9 100644
--- a/packages/stacks-docs/product/components/links.html
+++ b/packages/stacks-docs/product/components/links.html
@@ -2,14 +2,14 @@
 layout: page
 title: Links
 svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-link--docs
-description: Links are lightly styled via the a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to n button while maintaining the look of an anchor.
+description: Links are lightly styled via the a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to n button while maintaining the look of an anchor.
 tags: components
 ---
 
        
     {% header "h2", "Single link" %}
     {% header "h3", "Single link classes" %}
     
        
-        
+        
        
@@ -20,8 +20,8 @@
             
                 {% for item in links.single-links %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -60,7 +60,7 @@
 
     {% header "h3", "Accessibility" %}
 
-    
        Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text (often blue-400), it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.
        
+    
        Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text (often blue-400), it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.
        
 
@@ -68,7 +68,7 @@
     {% header "h2", "Descendent anchors" %}
     {% header "h3", "Descendent anchor classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
 
 
        
+        
        
@@ -79,8 +79,8 @@
             
                 {% for item in links.descendent-anchors %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -88,11 +88,11 @@
         
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
     
        
     {% header "h3", "Descendent anchor examples" %}
-    
        Sometimes you need to give all <a> elements inside a container or component the same color, even
-        when it‘s impractical or even impossible to give each anchor element an s-link class (e.g. because the markup is generated from Markdown).
        
-    
        In this case, you can add the s-anchors class together with one of the modifiers
-        s-anchors__default, s-anchors__grayscale, s-anchors__muted,
-        s-anchors__danger, or s-anchors__inherit to the container.
+    
        Sometimes you need to give all <a> elements inside a container or component the same color, even
+        when it‘s impractical or even impossible to give each anchor element an s-link class (e.g. because the markup is generated from Markdown).
        
+    
        In this case, you can add the s-anchors class together with one of the modifiers
+        s-anchors__default, s-anchors__grayscale, s-anchors__muted,
+        s-anchors__danger, or s-anchors__inherit to the container.
     
        
 
     
        
@@ -148,7 +148,7 @@
         
        
     
        
 
-    
        An explicit s-link on an anchor overrides any s-anchors setting:
        
+    
        An explicit s-link on an anchor overrides any s-anchors setting:
        
 
     
        
 {% highlight html %}
@@ -172,7 +172,7 @@
     {% header "h2", "Block link" %}
     {% header "h3", "Block link classes" %}
     
        
-        
+        
        
@@ -183,8 +183,8 @@
             
                 {% for item in links.block-links %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html
index a72c480c10..2b0db11d9e 100644
--- a/packages/stacks-docs/product/components/loader.html
+++ b/packages/stacks-docs/product/components/loader.html
@@ -9,11 +9,11 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
-                    
-                    
+                    
+                    
@@ -21,16 +21,14 @@
                 {% for item in loader.classes %}
                 
@@ -62,7 +60,7 @@
 
 
        
     {% header "h3", "Sizes" %}
-    
        
             
                 
        ClassApplied toClassApplied to
                     Description
                 
        
             
        
                     
-                        {{ item.class }}
+                        {{ item.class }}
                     
                     
-                        {% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}
+                        {% if item.applies == "N/A" %}
+                            {{ item.applies }}
+                        {% else %}
+                            {{ item.applies }}
+                        {% endif %}
                     
                     {{ item.description }}
                 
        
+    
        
@@ -74,17 +72,18 @@
             {% for size in loader.sizes %}
             
                 {% for item in notices.access %}
                 
-                    
+                    
@@ -67,7 +67,7 @@
     {% header "h2", "JavaScript" %}
     {% header "h3", "Attributes" %}
     
        
-        
        
         
             
        
                 Class
        
                 
-                    
-                        {% if size == "" %} .s-loader {% else %} .{{ size }} {%
-                        endif %}
-                    
+                    {% if size == "" %}
+                        .s-loader
+                    {% else %}
+                        .{{ size }}
+                    {%endif %}
                 
                 
-                    
-                        {% if size == "" %}
+                    {% if size == "" %}
                         N/A
-                        {% else %} .s-loader {% endif %}
-                    
+                    {% else %} 
+                        .s-loader
+                    {% endif %}
                 
                 
                     
        
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html
index 4f4012b676..57c5570218 100644
--- a/packages/stacks-docs/product/components/menus.html
+++ b/packages/stacks-docs/product/components/menus.html
@@ -9,7 +9,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
+        
        
@@ -20,8 +20,8 @@
             
                 {% for item in menu.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -192,7 +192,7 @@
 
     {% header "h3", "Icons" %}
     
        
-        Icons can be added to menu items to help visually distinguish actions. Include the s-menu--icon class on the icon to ensure proper spacing and alignment.
+        Icons can be added to menu items to help visually distinguish actions. Include the s-menu--icon class on the icon to ensure proper spacing and alignment.
     
        
 {% highlight html %}
@@ -245,7 +245,7 @@
 
     {% header "h3", "Selected states" %}
     
        
-        To create selectable menu items, add .s-checkbox.s-checkbox__checkmark or .s-radio.s-radio__checkmark to the .s-menu--action element and include a radio or checkbox input as a child element. When the input is :checked, the corresponding menu item displays a checkmark.
+        To create selectable menu items, add .s-checkbox.s-checkbox__checkmark or .s-radio.s-radio__checkmark to the .s-menu--action element and include a radio or checkbox input as a child element. When the input is :checked, the corresponding menu item displays a checkmark.
     
        
     
        
 {% highlight html %}
@@ -331,7 +331,7 @@
 
     {% header "h3", "Radio groups" %}
     
        
-        In the case of user management, it’s appropriate to include radio options. In this example, we’re setting a user’s role. While our examples up to this point have all been simple unordered lists, the s-menu component works on any markup including fieldset.
+        In the case of user management, it’s appropriate to include radio options. In this example, we’re setting a user’s role. While our examples up to this point have all been simple unordered lists, the s-menu component works on any markup including fieldset.
     
        
     
        
 {% highlight html %}
diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html
index 0d87344c38..182e70cca5 100644
--- a/packages/stacks-docs/product/components/modals.html
+++ b/packages/stacks-docs/product/components/modals.html
@@ -10,7 +10,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
     
        
+        
        
@@ -21,7 +21,7 @@
             
                 {% for item in modals.classes %}
                     
-                        
+                        
@@ -33,7 +33,7 @@
     {% header "h2", "JavaScript" %}
     {% header "h3", "Attributes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.class }}
                         {{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -43,32 +43,32 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -77,7 +77,7 @@
     
     {% header "h3", "Events" %}
     
        
-        
        
             
                 
        
                     Attribute
        
             
                 
        data-controller="s-modal"data-controller="s-modal"
                     Controller elementWires up the element to the modal controller. This may be a .s-modal element or a wrapper element.Wires up the element to the modal controller. This may be a .s-modal element or a wrapper element.
                 
        
                 
        data-s-modal-target="modal"data-s-modal-target="modal"
                     .s-modal element
                     Wires up the element that is to be shown/hidden
                 
        
                 
        data-s-modal-target="initialFocus"data-s-modal-target="initialFocus"
                     Any child focusable element
                     Optional Designates which element to focus on modal show. If absent, defaults to the first focusable element within the modal.
                 
        
                 
        data-action="s-modal#toggle"data-action="s-modal#toggle"
                     Toggling element
                     Wires up the element to toggle the visibility of a modal
                 
        
                 
        data-s-modal-return-element="[css selector]"data-s-modal-return-element="[css selector]"
                     Controller element
                     Optional Designates the element to return focus to when the modal is closed. If left unset, focus is not altered on close.
                 
        
                 
        data-s-modal-remove-when-hidden="true"data-s-modal-remove-when-hidden="true"
                     Controller element
                     Optional Removes the modal from the DOM entirely when it is hidden
                 
        
+        
        
@@ -87,22 +87,22 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -110,7 +110,7 @@
         
        
             
                 
        
                     Event
        
             
                 
        s-modal:shows-modal:show
                     Modal targetDefault preventable Fires immediately before showing the modal. Calling .preventDefault() cancels the display of the modal.Default preventable Fires immediately before showing the modal. Calling .preventDefault() cancels the display of the modal.
                 
        
                 
        s-modal:showns-modal:shown
                     Modal target
                     Fires after the modal has been visually shown
                 
        
                 
        s-modal:hides-modal:hide
                     Modal targetDefault preventable Fires immediately before hiding the modal. Calling .preventDefault() cancels the removal of the modal.Default preventable Fires immediately before hiding the modal. Calling .preventDefault() cancels the removal of the modal.
                 
        
                 
        s-modal:hiddens-modal:hidden
                     Modal target
                     Fires after the modal has been visually hidden
                 
        
     
        
     
        
-        
+        
        
@@ -120,23 +120,23 @@
             
-                    
-                    
-                    
+                    
+                    
+                    
-                    
-                    
-                    
+                    
+                    
+                    
        
             
                 
        
                     event.detail
        
             
                 
        dispatchers-modal:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the modal that caused it to hide, etc.dispatchers-modal:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the modal that caused it to hide, etc.
                 
        
                     
             
                 
        returnElements-modal:show, s-modal:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.returnElements-modal:show, s-modal:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.
                 
        
                     
         
        
     
        
     {% header "h3", "Helpers" %}
     
        
-        
+        
        
@@ -146,16 +146,16 @@
             
-                    
+                    
-                    
+                    
@@ -166,11 +166,11 @@
     {% header "h2", "Accessibility" %}
     
        
         Modals are designed with accessibility in mind by default. When a modal is open, navigation with the keyboard will be constrained to only those elements within the modal.
-        To ensure maximum compatibility, all a tags must have href attributes and any default focusable items you don’t want focusable must have their tabindex set to -1.
+        To ensure maximum compatibility, all a tags must have href attributes and any default focusable items you don’t want focusable must have their tabindex set to -1.
     
        
-        
        
             
                 
        
                     Function
        
             
                 
        Stacks.showModalStacks.showModal
                     
-                        element: the element the data-controller="s-modal" attribute is on 

        
+                        element: the element the data-controller="s-modal" attribute is on 

        
                             		
                     Helper to manually show an s-modal element via external JS
                 
        
                 
        Stacks.hideModalStacks.hideModal
                     
-                        element: the element the data-controller="s-modal" attribute is on 

        
+                        element: the element the data-controller="s-modal" attribute is on 

        
                             		
                     Helper to manually hide an s-modal element via external JS
                 
        
 
     
        
+        
        
@@ -180,33 +180,33 @@
             
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
@@ -253,7 +253,7 @@ 
        Example danger title<
             
         
     
-    
        You can wire up a modal along with the corresponding button by wrapping both in a s-modal controller and attaching the corresponding data-* attributes. Make sure to set data-s-modal-return-element if you want your button to refocus on close.
        
+    
        You can wire up a modal along with the corresponding button by wrapping both in a s-modal controller and attaching the corresponding data-* attributes. Make sure to set data-s-modal-return-element if you want your button to refocus on close.
        
     
        
 {% highlight html %}
 
        
@@ -321,7 +321,7 @@ 
        …
        
 
 
        
     {% header "h2", "Danger state" %}
-    
        Not every modal is sunshine and rainbows. Sometimes there are potentially drastic things that could happen by hitting a confirm button in a modal—such as deleting an account. In moments like this, add the .s-modal__danger class to .s-modal. Additionally, you should switch the buttons to .s-btn__danger, since the main call to action will be destructive.
        
+    
        Not every modal is sunshine and rainbows. Sometimes there are potentially drastic things that could happen by hitting a confirm button in a modal—such as deleting an account. In moments like this, add the .s-modal__danger class to .s-modal. Additionally, you should switch the buttons to .s-btn__danger, since the main call to action will be destructive.
        
     
        
 {% highlight html %}
 
        
     {% header "h2", "Celebratory" %}
-    
        Sometimes it’s appropriate to confirm a user’s action with some confetti. You can combine our confetti background utility with some extra spacing by adding the s-modal__celebration modifier.
        
+    
        Sometimes it’s appropriate to confirm a user’s action with some confetti. You can combine our confetti background utility with some extra spacing by adding the s-modal__celebration modifier.
        
     
        
 {% highlight html %}
 
        
             
                 
        
                     Item
        
             
                 
        aria-describedby="[id]".s-modalaria-describedby="[id]".s-modal
                     Supply the modal’s summary copy id. Assistive technologies (such as screen readers) use this to attribute to associate static text with a widget, element groups, headings, definitions, etc. (Source)
                 
        
                 
        aria-hidden="[state]".s-modalaria-hidden="[state]".s-modal
                     Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source)
                 
        
                 
        aria-label="[text]".s-modal--closearia-label="[text]".s-modal--close
                     Labels the element for assistive technologies (such as screen readers). (Source)
                 
        
                 
        aria-labelledby="[id]".s-modalaria-labelledby="[id]".s-modal
                     Supply the modal’s title id here. Assistive technologies (such as screen readers) use this to attribute to catalog the document objects correctly. (Source)
                 
        
                 
        role="dialog".s-modalrole="dialog".s-modal
                     Identifies dialog elements for assistive technologies (Source)
                 
        
                 
        role="document".s-modal--dialogrole="document".s-modal--dialog
                     Helps assistive technologies to switch their reading mode from the larger document to a focused dialog window. (Source)
                 
        
                     
 
 
        
+        
        
@@ -408,7 +408,7 @@ 
        Congratulations
             
        
-                    
+                    
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html
index e656f53bbc..e0afc170af 100644
--- a/packages/stacks-docs/product/components/navigation.html
+++ b/packages/stacks-docs/product/components/navigation.html
@@ -10,7 +10,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        
             
                 
        .s-modal__full.s-modal__full
                     100% - 48px
                     N/A
                     N/A
        
+        
        
@@ -21,7 +21,7 @@
             
                 {% for item in navigation.classes %}
                     
-                        
+                        
@@ -36,7 +36,7 @@
         
        {{item.description}}
        
-            
        
             
                 
        
                     Class
        {{ item.class }}{{ item.class }}
                         {{ item.applies }}
                         {{ item.description }}
                     
        
 
         
        
+            
        
@@ -47,8 +47,8 @@
                 
                     {% for attribute in item.attributes %}
                         
-                            
-                            
+                            
+                            
                     {% endfor %}
@@ -687,7 +687,7 @@
 
 
 {% header "h2", "Buttons" %}
-
        This component can be used for in-page navigation patterns, using button elements in place of link. When doing so, it may be appropriate to annotate elements with role="tablist" to indicate the dynamic behavior.
        
+
        This component can be used for in-page navigation patterns, using button elements in place of link. When doing so, it may be appropriate to annotate elements with role="tablist" to indicate the dynamic behavior.
        
 {% highlight html %}
@@ -729,7 +729,7 @@
 
     {% header "h3", "Attributes" %}
     
        
-        
        
                 
                     
        
                         Item
        {{ attribute.attribute }}{{ attribute.applies }}{{ attribute.attribute }}{{ attribute.applies }}
                             {{ attribute.description }}
                         
        
 
 
        
+        
        
@@ -739,62 +739,62 @@
             
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
-                    
+                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -803,7 +803,7 @@
     
     {% header "h3", "Events" %}
     
        
-        
        
             
                 
        
                     Attribute
        
             
                 
        data-controller="s-navigation-tablist".s-navigationdata-controller="s-navigation-tablist".s-navigation
                     Wires up the element to the tooltip controller.
                 
        
                 
        role="tablist".s-navigationrole="tablist".s-navigation
                     Indicates to accessibility tools that the navigation element is a tab list.
                 
        
                 
        role="tab".s-navigation--itemrole="tab".s-navigation--item
                     Indicates to accessibility tools that the navigation item is a tab.  Used by the controller to automatically connect mouse and keyboard events.
                 
        
                 
        class="s-navigation--item is-selected"Initially selected .s-navigation--item elementsclass="s-navigation--item is-selected"Initially selected .s-navigation--item elements
                     Provides visual indication that the tab is selected.
                 
        
                 
        aria-selected="{true|false}".s-navigation--itemaria-selected="{true|false}".s-navigation--item
                     Indicates to accessibility tools which tab is selected.  Used by the controller to track the selected tab.
                 
        
                 
        id="{TAB_ID}".s-navigation--itemA unique id for the tab.  Will be used by the tab panel to refer back to the button via aria-labelledby="{TAB_ID}".id="{TAB_ID}".s-navigation--itemA unique id for the tab.  Will be used by the tab panel to refer back to the button via aria-labelledby="{TAB_ID}".
                 
        
                 
        aria-controls="{PANEL_ID}".s-navigation--itemaria-controls="{PANEL_ID}".s-navigation--item
                     A unique id for the panel element corresponding to the tab.
                 
        
                 
        tabindex="-1"Initially unselected .s-navigation--item elementstabindex="-1"Initially unselected .s-navigation--item elements
                     Indicates to the browser that the element should be excluded from tab navigation.  When interacting with the control, arrow keys will be used to switch tabs.
                 
        
                 
        role="tabpanel"role="tabpanel"
                     Tab panel elements
                     Indicates to accessibility tools that the element is a panel corresponding to a tab.
                 
        
                 
        id="{PANEL_ID}"id="{PANEL_ID}"
                     Tab panel elementsA unique id for the panel.  Used by the tab to identify the panel that will be shown when it is active, via aria-controls="{PANEL_ID}".A unique id for the panel.  Used by the tab to identify the panel that will be shown when it is active, via aria-controls="{PANEL_ID}".
                 
        
                 
        aria-labelledby="{TAB_ID}"aria-labelledby="{TAB_ID}"
                     Tab panel elements
                     Refers to the id of the tab element that corresponds to the panel.
                 
        
                 
        class="d-none"class="d-none"
                     Initially hidden tab panel elements
                     Suppressed display of tab panels.
                 
        
+        
        
@@ -813,12 +813,12 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
@@ -826,7 +826,7 @@
         
        
             
                 
        
                     Event
        
             
                 
        s-navigation-tablist:selects-navigation-tablist:select
                     Controller elementDefault preventable Fires immediately before a new tab is selected.  Calling .preventDefault() cancels the display of the tab and keeps the state unchanged.Default preventable Fires immediately before a new tab is selected.  Calling .preventDefault() cancels the display of the tab and keeps the state unchanged.
                 
        
                 
        s-navigation-tablist:selecteds-navigation-tablist:selected
                     Controller element
                     Fires immediately after the new tag has been selected.
                 
        
     
        
     
        
-        
+        
        
@@ -836,14 +836,14 @@
             
-                    
-                    
-                    
+                    
+                    
+                    
-                    
-                    
-                    
+                    
+                    
+                    
        
             
                 
        
                     event.detail
        
             
                 
        oldTabs-navigation-tablist:*Contains HTMLElement | null representing the previously selected tab, if one was selected.  This is the element with role="tab", not the panel itself which can be found using the tab's aria-controls attribute.oldTabs-navigation-tablist:*Contains HTMLElement | null representing the previously selected tab, if one was selected.  This is the element with role="tab", not the panel itself which can be found using the tab's aria-controls attribute.
                 
        
                 
        newTabs-navigation-tablist:*Contains HTMLElement representing the newly selected tab.  This is the element with role="tab", not the panel itself which can be found using the tab's aria-controls attribute.newTabs-navigation-tablist:*Contains HTMLElement representing the newly selected tab.  This is the element with role="tab", not the panel itself which can be found using the tab's aria-controls attribute.
                 
        
                     
         
        
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html
index 729ca523db..30d47f624f 100644
--- a/packages/stacks-docs/product/components/notices.html
+++ b/packages/stacks-docs/product/components/notices.html
@@ -43,7 +43,7 @@
             
        {{ item.item }}{{ item.item }}
                     
                         {% if item.applies == "N/A" %}
                             {{ item.applies }}
@@ -51,7 +51,7 @@
                             {% assign class = item.applies | split: " " %}
 
                             {% for name in class %}
-                                {{ name }}
+                                {{ name }}
                             {% endfor %}
                         {% endif %}
                     
        
+        
        
@@ -77,32 +77,32 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -111,7 +111,7 @@
     
     {% header "h3", "Events" %}
     
        
-        
        
             
                 
        
                     Attribute
        
             
                 
        data-controller="s-toast"data-controller="s-toast"
                     Controller elementWires up the element to the toast controller. This may be a .s-toast element or a wrapper element.Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element.
                 
        
                 
        data-s-toast-target="toast"data-s-toast-target="toast"
                     .s-toast element
                     Wires up the element that is to be shown/hidden
                 
        
                 
        data-s-toast-target="initialFocus"data-s-toast-target="initialFocus"
                     Any child focusable element
                     Optional Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.
                 
        
                 
        data-action="s-toast#toggle"data-action="s-toast#toggle"
                     Toggling element
                     Wires up the element to toggle the visibility of a toast
                 
        
                 
        data-s-toast-return-element="[css selector]"data-s-toast-return-element="[css selector]"
                     Controller element
                     Optional Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.
                 
        
                 
        data-s-toast-remove-when-hidden="true"data-s-toast-remove-when-hidden="true"
                     Controller element
                     Optional Removes the toast from the DOM entirely when it is hidden
                 
        
+        
        
@@ -121,22 +121,22 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -144,7 +144,7 @@
         
        
             
                 
        
                     Event
        
             
                 
        s-toast:shows-toast:show
                     Toast targetDefault preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.Default preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.
                 
        
                 
        s-toast:showns-toast:shown
                     Toast target
                     Fires after the toast has been visually shown
                 
        
                 
        s-toast:hides-toast:hide
                     Toast targetDefault preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.Default preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.
                 
        
                 
        s-toast:hiddens-toast:hidden
                     Toast target
                     Fires after the toast has been visually hidden
                 
        
     
        
     
        
-        
+        
        
@@ -154,23 +154,23 @@
             
-                    
-                    
-                    
+                    
+                    
+                    
-                    
-                    
-                    
+                    
+                    
+                    
        
             
                 
        
                     event.detail
        
             
                 
        dispatchers-toast:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.dispatchers-toast:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.
                 
        
                     
             
                 
        returnElements-toast:show, s-toast:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.returnElements-toast:show, s-toast:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.
                 
        
                     
         
        
     
        
     {% header "h3", "Helpers" %}
     
        
-        
+        
        
@@ -180,16 +180,16 @@
             
-                    
+                    
-                    
+                    
@@ -213,7 +213,7 @@
             
                 {% for item in notices.visual %}
                 
-                    
+                    
@@ -340,7 +340,7 @@
     
 
         {% header "h3", "Styling child links" %}
-    
        We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.
        
+    
        We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.
        
 {% highlight html %}
 
        
             
                 
        
                     Function
        
             
                 
        Stacks.showToastStacks.showToast
                     
-                        element: the element the data-controller="s-toast" attribute is on 

        
+                        element: the element the data-controller="s-toast" attribute is on 

        
                             		
                     Helper to manually show an s-toast element via external JS
                 
        
                 
        Stacks.hideToastStacks.hideToast
                     
-                        element: the element the data-controller="s-toast" attribute is on 

        
+                        element: the element the data-controller="s-toast" attribute is on 

        
                             		
                     Helper to manually hide an s-toast element via external JS
                 
        {{ item.class }}{{ item.class }}
                     
                         {% if item.applies == "N/A" %}
                             {{ item.applies }}
@@ -221,7 +221,7 @@
                             {% assign class = item.applies | split: " " %}
 
                             {% for name in class %}
-                                {{ name }}
+                                {{ name }}
                             {% endfor %}
                         {% endif %}
                     
     
        
+        
        
@@ -386,7 +386,7 @@
                 {% for item in notices.behavior %}
                 
+                    
@@ -408,8 +408,8 @@
     {% header "h3", "Toast" %}
     
        
         Floating notices, but aligned to the top and center of the page and they disappear after a set time. 
-        Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". 
-        When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.
+        Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". 
+        When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.
     
        
diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html
index f4d94a524b..c708d7361d 100644
--- a/packages/stacks-docs/product/components/page-titles.html
+++ b/packages/stacks-docs/product/components/page-titles.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Components" %}
     
        
-        
        
             
                 
        
                     Behavior
        
                     {{ item.type }}
-                    {{ item.class }}{{ item.class }}
                     
                         {% if item.applies == "N/A" %}
                             {{ item.applies }}
@@ -394,7 +394,7 @@
                             {% assign class = item.applies | split: " " %}
 
                             {% for name in class %}
-                                {{ name }}
+                                {{ name }}
                             {% endfor %}
                         {% endif %}
                     
 
     
        
+        
        
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html
index fb3c2c4887..2b964278b0 100644
--- a/packages/stacks-docs/product/components/pagination.html
+++ b/packages/stacks-docs/product/components/pagination.html
@@ -9,7 +9,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Component
        
+        
        
@@ -20,8 +20,8 @@
             
                 {% for item in pagination-component.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
diff --git a/packages/stacks-docs/product/components/popovers.html b/packages/stacks-docs/product/components/popovers.html
index 5cf53a4e15..077186032a 100644
--- a/packages/stacks-docs/product/components/popovers.html
+++ b/packages/stacks-docs/product/components/popovers.html
@@ -10,7 +10,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -21,7 +21,7 @@
             
                 {% for item in popovers.automatic %}
                     
-                        
+                        
@@ -37,7 +37,7 @@
 
     {% header "h3", "Interactive Attributes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.class }}
                         {{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -47,56 +47,56 @@
             
-                    
-                    
-                    
+                    
+                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -105,7 +105,7 @@
 
     {% header "h3", "Interactive Events" %}
     
        
-        
        
             
                 
        
                     Attribute
        
             
                 
        id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-controls] on the toggling element.id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-controls] on the toggling element.
                 
        
                 
        data-controller="s-popover"data-controller="s-popover"
                     Controller element
                     Wires up the element to the popover controller. This may be a toggling element or a wrapper element.
                 
        
                 
        data-s-popover-reference-selector="[css selector]"data-s-popover-reference-selector="[css selector]"
                     Controller element
                     Optional Designates the element to use as the popover reference. If left unset, the value defaults to the controller element.
                 
        
                 
        aria-controls="{POPOVER_ID}"aria-controls="{POPOVER_ID}"
                     Reference element
                     Associates the element to the desired popover element.
                 
        
                 
        data-action="s-popover#toggle"data-action="s-popover#toggle"
                     Toggling element
                     Wires up the element to toggle the visibility of a generic popover.
                 
        
                 
        data-s-popover-toggle-class="[class list]"data-s-popover-toggle-class="[class list]"
                     Controller element
                     Adds an optional space-delineated list of classes to be toggled on the originating element when the popover is shown or hidden.
                 
        
                 
        data-s-popover-placement="[placement]"data-s-popover-placement="[placement]"
                     Controller elementDictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.Dictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.
                 
        
                 
        data-s-popover-auto-show="[true|false]"data-s-popover-auto-show="[true|false]"
                     Controller elementOptional If true, the popover will appear immediately when the Stacks controller is first connected.  This should be used in place of .is-visible for displaying popovers on load as it will prevent the popover from appearing before it has been correctly positioned.Optional If true, the popover will appear immediately when the Stacks controller is first connected.  This should be used in place of .is-visible for displaying popovers on load as it will prevent the popover from appearing before it has been correctly positioned.
                 
        
                 
        data-s-popover-hide-on-outside-click="[always|never|if-in-viewport|after-dismissal]"data-s-popover-hide-on-outside-click="[always|never|if-in-viewport|after-dismissal]"
                     Controller element
                     Optional
                         
          
-                            
        • If always, the popover will appear disappear when outside clicks occur.
          • 
-                            
        • If if-in-viewport, the popover will appear disappear when outside clicks occur and the popover is currently in the browser's visible viewport.
          • 
-                            
        • If never, the popover will not disappear on outside clicks and will only be dismissed through other means, e.g. data-target="s-popover#hide".
          • 
-                            
        • If after-dismissal, the popover will not disappear on outside clicks unless it has been dismissed some other way at least once.
          • 
+                            
        • If always, the popover will appear disappear when outside clicks occur.
          • 
+                            
        • If if-in-viewport, the popover will appear disappear when outside clicks occur and the popover is currently in the browser's visible viewport.
          • 
+                            
        • If never, the popover will not disappear on outside clicks and will only be dismissed through other means, e.g. data-target="s-popover#hide".
          • 
+                            
        • If after-dismissal, the popover will not disappear on outside clicks unless it has been dismissed some other way at least once.
          • 
                         
        
-                        
        If left unset, defaults to always.
        
+                        
        If left unset, defaults to always.
        
                             		
                 
        
             
        
+        
        
@@ -115,22 +115,22 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -138,7 +138,7 @@
         
        
             
                 
        
                     Event
        
             
                 
        s-popover:shows-popover:show
                     Controller elementDefault preventable Fires immediately before showing and positioning the popover. This fires before the popover is first displayed to the user, and can be used to create or initialize the popover element. Calling .preventDefault() cancels the display of the popover.Default preventable Fires immediately before showing and positioning the popover. This fires before the popover is first displayed to the user, and can be used to create or initialize the popover element. Calling .preventDefault() cancels the display of the popover.
                 
        
                 
        s-popover:showns-popover:shown
                     Controller element
                     Fires immediately after showing the popover.
                 
        
                 
        s-popover:hides-popover:hide
                     Controller elementDefault preventable Fires immediately before hiding the popover.  Calling .preventDefault() prevents the removal of the popover.Default preventable Fires immediately before hiding the popover.  Calling .preventDefault() prevents the removal of the popover.
                 
        
                 
        s-popover:hiddens-popover:hidden
                     Controller element
                     Fires immediately after hiding the popover.
                 
        
     
        
     
        
-        
+        
        
@@ -148,9 +148,9 @@
             
-                    
-                    
-                    
+                    
+                    
+                    
        
             
                 
        
                     event.detail
        
             
                 
        dispatchers-popover:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the popover that caused it to hide, etc.dispatchers-popover:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the popover that caused it to hide, etc.
                 
        
                     
         
        
@@ -222,7 +222,7 @@
     
        
 
     {% header "h4", "Default interactivity" %}
-    
        To enable interactive popovers, you will need to add the above attributes to the popover’s originating button. Custom positioning can be specified using the data-s-popover-placement. In the following example, we’ve chosen bottom-start. No positioning classes need to be added to your markup, only the data attributes.
        
+    
        To enable interactive popovers, you will need to add the above attributes to the popover’s originating button. Custom positioning can be specified using the data-s-popover-placement. In the following example, we’ve chosen bottom-start. No positioning classes need to be added to your markup, only the data attributes.
        
     
        To promote being able to tab to an open popover, it’s best to place the popover immediately after the toggling button in the markup as siblings.
        
 
     
        
@@ -265,7 +265,7 @@
     
        
 
     {% header "h4", "Dismissible" %}
-    
        In the case of new feature callouts, it may be appropriate to include an explicit dismiss button. You can add one using the styling provided by .s-popover--close.
        
+    
        In the case of new feature callouts, it may be appropriate to include an explicit dismiss button. You can add one using the styling provided by .s-popover--close.
        
     
        In order for to close the popover with an explicit close button, you’ll need to add the controller to a parent as illustrated in the following example code:
        
     
        
  {% highlight html %}
@@ -351,7 +351,7 @@ 
        Lorem ipsum
        
 
     {% header "h4", "JavaScript configuration (popovers)" %}
     
        Situations may also arise where popovers need to be attached to an element after the document is rendered. For example, a button could have a contextual menu that is too expensive to serve up on every page load.
        
-    
        Popovers can be attached to an element after the fact using Stacks.attachPopover.
        
+    
        Popovers can be attached to an element after the fact using Stacks.attachPopover.
        
     
        This method takes three parameters, the element to attach the popover to, the popover either as an element or an HTML string, and optional options for displaying the popover.
        
 
     
        
@@ -382,11 +382,11 @@ 
        Lorem ipsum
        
 
        
     {% header "h2", "Hover tooltips" %}
 
-    
        When a popover is intended only for display as an on-hover tooltip and contains no interactive text, the s-tooltip controller can be used in place of s-popover. This is a separate controller that can be used alongside s-popover on a single target element.
        
+    
        When a popover is intended only for display as an on-hover tooltip and contains no interactive text, the s-tooltip controller can be used in place of s-popover. This is a separate controller that can be used alongside s-popover on a single target element.
        
 
     {% header "h3", "Hover attributes" %}
     
        
-        
+        
        
@@ -396,46 +396,46 @@ 
        Lorem ipsum
        
-                    
-                    
-                    
+                    
+                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
        
             
                 
        
                     Attribute
             
        
             
                 
        id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element.id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element.
                 
        
                 
        data-controller="s-tooltip"data-controller="s-tooltip"
                     Controller element
                     Wires up the element to the tooltip controller.
                 
        
                 
        data-s-tooltip-reference-selector="[css selector]"data-s-tooltip-reference-selector="[css selector]"
                     Controller element
                     Optional Designates the element to use as the tooltip reference. If left unset, the value defaults to the controller element.
                 
        
                 
        aria-describedby="{POPOVER_ID}"aria-describedby="{POPOVER_ID}"
                     Reference element
                     Associates the element to the desired popover element.
                 
        
                 
        title="{TITLE}"title="{TITLE}"
                     Controller elementIf aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text.If aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text.
                 
        
                 
        data-s-tooltip-html-title="{TITLE}"data-s-tooltip-html-title="{TITLE}"
                     Controller elementActs the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used.Acts the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used.
                 
        
                 
        data-s-tooltip-placement="[placement]"data-s-tooltip-placement="[placement]"
                     Controller elementDictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.Dictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.
                 
        
                     
         
        
     
        
     {% header "h3", "Hover events" %}
     
        
-        
+        
        
@@ -445,22 +445,22 @@ 
        Lorem ipsum
        
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -468,7 +468,7 @@ 
        Lorem ipsum
        
             
                 
        
                     Event
             
        
             
                 
        s-tooltip:shows-tooltip:show
                     Controller elementDefault preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover.Default preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover.
                 
        
                 
        s-tooltip:showns-tooltip:shown
                     Controller element
                     Fires immediately after showing the tooltip.
                 
        
                 
        s-tooltip:hides-tooltip:hide
                     Controller elementDefault preventable Fires immediately before hiding the tooltip.  Calling .preventDefault() prevents the removal of the tooltip.Default preventable Fires immediately before hiding the tooltip.  Calling .preventDefault() prevents the removal of the tooltip.
                 
        
                 
        s-tooltip:hiddens-tooltip:hidden
                     Controller element
                     Fires immediately after hiding the tooltip.
                 
        
         
        
     
        
     
        
-        
+        
        
@@ -478,18 +478,18 @@ 
        Lorem ipsum
        
-                    
-                    
-                    
+                    
+                    
+                    
        
             
                 
        
                     event.detail
             
        
             
                 
        dispatchers-tooltip:*Contains the Element that initiated the event. For instance, the element hovered over to show, etc.dispatchers-tooltip:*Contains the Element that initiated the event. For instance, the element hovered over to show, etc.
                 
        
                     
         
        
     
        
     {% header "h3", "Hover examples" %}
-    
        If the user doesn’t need to interact with the contents of the popover, it may be appropriate to only show it on hover. This will make popovers feel like a tooltip. To do so, we provide an alternative controller, s-tooltip, that shows the tooltip only on hover.
        
+    
        If the user doesn’t need to interact with the contents of the popover, it may be appropriate to only show it on hover. This will make popovers feel like a tooltip. To do so, we provide an alternative controller, s-tooltip, that shows the tooltip only on hover.
        
 
     {% header "h4", "Title attribute" %}
-    
        In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.
        
+    
        In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.
        
 
     
        
 {% highlight html %}
@@ -537,7 +537,7 @@ 
        Lorem ipsum
        
     
        
 
     {% header "h4", "Rich tooltips" %}
-    
        When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.
        
+    
        When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.
        
 
     
        
 {% highlight html %}
@@ -638,8 +638,8 @@ 
        Lorem ipsum
        
         Our Stimulus popover controller handles the positioning of popovers for you. Popovers can be positioned manually for various legacy reasons, but we recommend using the s-popover controller's placement property instead.
     {% endtip %}
     {% header "h3", "Manual examples" %}
-    
        Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.
        
-    
        By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.
        
+    
        Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.
        
+    
        By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.
        
 
     
        
 {% highlight html %}
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html
index 89da614064..d363f21419 100644
--- a/packages/stacks-docs/product/components/post-summary.html
+++ b/packages/stacks-docs/product/components/post-summary.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
+        
        
@@ -19,8 +19,8 @@
             
                 {% for item in post-summary.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html
index 62073ee01a..fab134d9e9 100644
--- a/packages/stacks-docs/product/components/progress-bars.html
+++ b/packages/stacks-docs/product/components/progress-bars.html
@@ -10,7 +10,7 @@
 
     {% header "h3", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -19,87 +19,87 @@
             
-                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
        
             
                 
        
                     Classes
        
             
                 
        .s-progress.s-progress
                     The parent class for all progress bars.
                 
        
                 
        .s-progress--barA child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color..s-progress--barA child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color.
                 
        
                 
        .s-progress--labelA child element of .s-progress. It’s used to describe what progress bar is tracking..s-progress--labelA child element of .s-progress. It’s used to describe what progress bar is tracking.
                 
        
                 
        .s-progress__brandA modifying class applied to .s-progress, it changes the bar color from green to orange..s-progress__brandA modifying class applied to .s-progress, it changes the bar color from green to orange.
                 
        
                 
        .s-progress__infoA modifying class applied to .s-progress, it changes the bar color from green to blue..s-progress__infoA modifying class applied to .s-progress, it changes the bar color from green to blue.
                 
        
                 
        .s-progress__circularA modifying class applied to .s-progress, it changes the bar to be a percentage of a circle..s-progress__circularA modifying class applied to .s-progress, it changes the bar to be a percentage of a circle.
                 
        
                 
        .s-progress__privilegeA modifying class applied to .s-progress, it changes the bar color from green to a lighter green (for legibility reasons)..s-progress__privilegeA modifying class applied to .s-progress, it changes the bar color from green to a lighter green (for legibility reasons).
                 
        
                 
        .s-progress__badgeA modifying class applied to .s-progress, it is applied when a badge progress bar is desired..s-progress__badgeA modifying class applied to .s-progress, it is applied when a badge progress bar is desired.
                 
        
                 
        .s-progress__goldA modifying class applied to .s-progress__badge, it is used when a gold badge progress bar is desired..s-progress__goldA modifying class applied to .s-progress__badge, it is used when a gold badge progress bar is desired.
                 
        
                 
        .s-progress__silverA modifying class applied to .s-progress__badge, it is used when a silver badge progress bar is desired..s-progress__silverA modifying class applied to .s-progress__badge, it is used when a silver badge progress bar is desired.
                 
        
                 
        .s-progress__bronzeA modifying class applied to .s-progress__badge, it is used when a bronze badge progress bar is desired..s-progress__bronzeA modifying class applied to .s-progress__badge, it is used when a bronze badge progress bar is desired.
                 
        
                 
        .s-progress__segmentedA modifying class applied to .s-progress for a segmented progress bar.s-progress__segmentedA modifying class applied to .s-progress for a segmented progress bar
                 
        
                 
        .s-progress__steppedA modifying class applied to .s-progress for a stepped progress bar.s-progress__steppedA modifying class applied to .s-progress for a stepped progress bar
                 
        
                 
        .s-progress--stepA child of .s-progress__stepped that’s a wrapper for each individual step.s-progress--stepA child of .s-progress__stepped that’s a wrapper for each individual step
                 
        
                 
        .is-activeA modifier .s-progress__step that adds visual styling to the active step..is-activeA modifier .s-progress__step that adds visual styling to the active step.
                 
        
                 
        .is-completedA modifier .s-progress__step that adds visual styling to a completed step..is-completedA modifier .s-progress__step that adds visual styling to a completed step.
                 
        
                 
        .s-progress--stopA child of .s-progress__step, the circle that might contain a checkmark if the step’s been completed..s-progress--stopA child of .s-progress__step, the circle that might contain a checkmark if the step’s been completed.
                 
        
                 
        .s-progress--bar__leftA modifier of .s-progress__bar that draws a line on the left side of a step..s-progress--bar__leftA modifier of .s-progress__bar that draws a line on the left side of a step.
                 
        
                 
        .s-progress--bar__rightA modifier of .s-progress__bar that draws a line on the right side of a step..s-progress--bar__rightA modifier of .s-progress__bar that draws a line on the right side of a step.
                 
        
                     
         
        
     
        
     {% header "h3", "Parameters" %}
     
        
-        
+        
        
@@ -109,23 +109,23 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
        
             
                 
        
                     Parameter
        
                 
        
                     role="progressbar"Applied to .s-progress--bar, this parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)Applied to .s-progress--bar, this parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)
                 
        
                 
        
                     aria-valueminApplied to .s-progress--bar, this parameter defines the minimum allowed value for the progress bar. (Source)Applied to .s-progress--bar, this parameter defines the minimum allowed value for the progress bar. (Source)
                 
        
                 
        
                     aria-valuemaxApplied to .s-progress--bar, this parameter defines the maximum allowed value for the progress bar. (Source)Applied to .s-progress--bar, this parameter defines the maximum allowed value for the progress bar. (Source)
                 
        
                 
        
                     aria-valuenowApplied to .s-progress--bar, this parameter defines the current value for the progress bar. (Source)Applied to .s-progress--bar, this parameter defines the current value for the progress bar. (Source)
                 
        
                 
        
                     style="width: [value]%"Applied to .s-progress--bar, this is the aria-valuenow value displayed as a percentage.Applied to .s-progress--bar, this is the aria-valuenow value displayed as a percentage.
                 
        
                     
         
        
@@ -189,9 +189,9 @@
 
 
        
     {% header "h2", "Circular" %}
-    
        In compact layouts, switching to a circular progress might be more appropriate. Our circular progress bar inherits the parent’s text color. You and your designer will need to choose an appropriate font color. You’ll also need to pass the --s-progress-value CSS variable a value percentage value in decimal form.
        
+    
        In compact layouts, switching to a circular progress might be more appropriate. Our circular progress bar inherits the parent’s text color. You and your designer will need to choose an appropriate font color. You’ll also need to pass the --s-progress-value CSS variable a value percentage value in decimal form.
        
 
-    
        By default, the circular progress bars are 32px. These dimensions can be modified by adding t-shirt sizing classes to .s-progress__circular: .s-progress__sm, .s-progress__md, and .s-progress__lg
        
+    
        By default, the circular progress bars are 32px. These dimensions can be modified by adding t-shirt sizing classes to .s-progress__circular: .s-progress__sm, .s-progress__md, and .s-progress__lg
        
 
     
        
 {% highlight html %}
diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html
index 38336d8c39..7ed7bcfdcb 100644
--- a/packages/stacks-docs/product/components/prose.html
+++ b/packages/stacks-docs/product/components/prose.html
@@ -7,7 +7,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
+        
        
@@ -16,19 +16,19 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html
index 5c682af903..fe57bd0c74 100644
--- a/packages/stacks-docs/product/components/radio.html
+++ b/packages/stacks-docs/product/components/radio.html
@@ -9,7 +9,7 @@
 
        
 
     {% header "h2", "Base" %}
-    
        Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.
        
+    
        Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.
        
 
     
        
 {% highlight html %}
@@ -50,7 +50,7 @@
     
        
 
     {% header "h3", "Checkmark" %}
-    
        The checkmark style is an alternative to the base radio style. To use the checkmark style, wrap your input and label in a container with the .s-radio__checkmark class.
        
+    
        The checkmark style is an alternative to the base radio style. To use the checkmark style, wrap your input and label in a container with the .s-radio__checkmark class.
        
 
     
        
 {% highlight html %}
@@ -84,7 +84,7 @@
                                     
                                 
                                 
        
@@ -100,9 +100,9 @@
     {% header "h2", "Accessibility" %}
     
        The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to radios, there are a few things to keep in mind:
          
-        
        • All inputs should have an id attribute.
          • 
-        
        • Be sure to associate the radio label by using the for attribute. The value here is the input's id.
          • 
-        
        • If you have a group of related radios, use the fieldset and legend to group them together.
          • 
+        
        • All inputs should have an id attribute.
          • 
+        
        • Be sure to associate the radio label by using the for attribute. The value here is the input's id.
          • 
+        
        • If you have a group of related radios, use the fieldset and legend to group them together.
          • 
     
        For more information, please read Gov.UK's article, "Using the fieldset and legend elements".
        
@@ -282,7 +282,7 @@
 
     {% header "h3", "Validation classes" %}
     
        
-        
        
             
                 
        
                     Class
        
             
                 
        .s-prose.s-prose
                     Adds proper styling for rendered Markdown.
                 
        
                 
        .s-prose__xs.s-prose__xs
                     Our most compact version with the smallest font size and line height.
                 
        
                 
        .s-prose__sm.s-prose__sm
                     Decreases the base font size and line height.
                 
        
                 
        .s-prose__md.s-prose__md
                     Increases the base font size and line height.
                 
        
             
        
-                                    .s-radio__checkmark
+                                    .s-radio__checkmark
                                 
                                 {{ input.description | replace: "checkbox", "radio" }}
                             
        
     
     
 
        
+        
        
@@ -292,7 +292,7 @@
             
                 {% for state in inputs.validation %}
                     
-                        
+                        
                 {% endfor %}
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html
index deb5c02a79..6df6ff569f 100644
--- a/packages/stacks-docs/product/components/select.html
+++ b/packages/stacks-docs/product/components/select.html
@@ -3,7 +3,7 @@
 title: Select
 svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-select--docs
 figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=4537-50988
-description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class.
+description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class.
 tags: components
 ---
 
        
@@ -87,7 +87,7 @@
 
     {% header "h3", "Validation classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ state.class }}{{ state.class }}
                         {{ state.description }}
                     
        
+        
        
@@ -98,7 +98,7 @@
             
                 {% for state in inputs.validation %}
                     
-                        
+                        
@@ -254,7 +254,7 @@
                     
-                        
+                        
                     {% endfor %}
diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html
index 9d3d5752ac..63e14f9c98 100644
--- a/packages/stacks-docs/product/components/sidebar-widgets.html
+++ b/packages/stacks-docs/product/components/sidebar-widgets.html
@@ -9,13 +9,13 @@
     {% header "h2", "Basic style" %}
 
     
        
-        In its simplest form, .s-sidebarwidget is comprised of a .s-sidebarwidget--content section and optional .s-sidebarwidget--header and .s-sidebarwidget--footer sections.
+        In its simplest form, .s-sidebarwidget is comprised of a .s-sidebarwidget--content section and optional .s-sidebarwidget--header and .s-sidebarwidget--footer sections.
         Together these classes create a widget with appropriate inner spacing for you to put whatever you want into it.
     
        
         {% icon "Info" %}
-        By default the content is a flex container. If you require display: block instead, add the d-block class.
+        By default the content is a flex container. If you require display: block instead, add the d-block class.
     
        
diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html
index e7ae0cad72..4772a6d85b 100644
--- a/packages/stacks-docs/product/components/tables.html
+++ b/packages/stacks-docs/product/components/tables.html
@@ -8,7 +8,7 @@
 
 
        
     {% header "h2", "Default style" %}
-    
        Tables should be wrapped in a container, .s-table-container. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.
        
+    
        Tables should be wrapped in a container, .s-table-container. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.
        
     
        
 {% highlight html %}
 
        
@@ -507,7 +507,7 @@
 
        
     {% header "h2", "Alignment" %}
     {% header "h3", "Vertical alignment" %}
-    
        The default vertical alignment is middle. You change a table’s or a specific cell’s vertical alignment by using the Vertical Alignment atomic classes.
        
+    
        The default vertical alignment is middle. You change a table’s or a specific cell’s vertical alignment by using the Vertical Alignment atomic classes.
        
     
        
 {% highlight html %}
 
        
@@ -614,8 +614,8 @@
 
        
 
        
     {% header "h2", "Sortable tables" %}
-    
        To indicate that the user can sort a table by different columns, add the s-table__sortable class to the table.
        
-    
        The <th> cells should include arrows to indicate sortability or the currently applied sorting. In addition, the column that is currently sorted should be indicated with the is-sorted class on its <th>.
        
+    
        To indicate that the user can sort a table by different columns, add the s-table__sortable class to the table.
        
+    
        The <th> cells should include arrows to indicate sortability or the currently applied sorting. In addition, the column that is currently sorted should be indicated with the is-sorted class on its <th>.
        
     
        
 {% highlight html %}
 
        
@@ -715,10 +715,10 @@
 
     
          
         
        1. Style the table as sortable as explained in the section above.
          2. 
-        
        2. Set data-controller="s-table" on the <table> element.
          3. 
-        
        3. Set data-s-table-target="column" and data-action="click->s-table#sort" on each of the <th> elements that control sorting.
          4. 
+        
        4. Set data-controller="s-table" on the <table> element.
          5. 
+        
        5. Set data-s-table-target="column" and data-action="click->s-table#sort" on each of the <th> elements that control sorting.
          6. 
         
        6. 
-            Add the three icons for showing ascending sort, descending sort, and unsorted to each of these header cells, hiding the first two with a d-none class. Add the js-sorting-indicator class to each of the icons, and add js-sorting-indicator-asc, js-sorting-indicator-desc, and js-sorting-indicator-none to the appropriate icon.
+            Add the three icons for showing ascending sort, descending sort, and unsorted to each of these header cells, hiding the first two with a d-none class. Add the js-sorting-indicator class to each of the icons, and add js-sorting-indicator-asc, js-sorting-indicator-desc, and js-sorting-indicator-none to the appropriate icon.
         
          7. 
     
        
 
@@ -726,15 +726,15 @@
         Note: Using js-… classes is not really the optimal way of doing this, and will probably replaced with something better eventually. When that happens, the js-… mechanism will be deprecated but continue to be supported for a while, so you have ample time to update things.
     {% endtip %}
 
-    
        By default, the data is sorted by the content of the cell. If you need to use a different value, for example because your cell contains a human-readable date, add a data-s-table-sort-val attribute to the cell.
        
+    
        By default, the data is sorted by the content of the cell. If you need to use a different value, for example because your cell contains a human-readable date, add a data-s-table-sort-val attribute to the cell.
        
 
     
        If a column contains any data that is not an integer, the data will be sorted lexicographically. Otherwise it will be sorted numerically, with empty cells being considered the lowest number.
        
 
-    
        If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.
        
+    
        If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.
        
 
     {% header "h3", "JavaScript data attributes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ state.class }}{{ state.class }}
                         Parent wrapper for select
                         {{ state.description }}
                     
        
                         {{ item.name }}
                         {{ item.size }}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}
                         
        		
                     
        
 
     
 
     
        
+        
        
@@ -745,8 +745,8 @@
             
                 {% for item in tables.data-attributes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -1121,7 +1121,7 @@
 
        
     {% header "h2", "Inactive rows" %}
-    
        For tables that include inactive or disabled rows, such as inactive users or teams, .is-disabled can be applied to any <tr>. Additionally, .is-enabled can be applied to any <th> or <td> that you’d like to ignoring the parent disabled styling (such as a persistent link to reactivate a disabled account).
        
+    
        For tables that include inactive or disabled rows, such as inactive users or teams, .is-disabled can be applied to any <tr>. Additionally, .is-enabled can be applied to any <th> or <td> that you’d like to ignoring the parent disabled styling (such as a persistent link to reactivate a disabled account).
        
     
        
 {% highlight html %}
 
        
@@ -1187,7 +1187,7 @@
     
        
 
     {% header "h2", "Atomic classes" %}
-    
        Further control of table behavior is possible with atomic classes. For example, you can make non-table markup display as a table layout by pairing .d-table, .d-table-cell and .tl-fixed.
        
+    
        Further control of table behavior is possible with atomic classes. For example, you can make non-table markup display as a table layout by pairing .d-table, .d-table-cell and .tl-fixed.
        
     
        
         
        
             
                 
        
                     Attribute
        {{ item.attribute }}{{ item.applies }}{{ item.attribute }}{{ item.applies }}
                         {{ item.description }}
                     
        
 
        
@@ -1199,7 +1199,7 @@
             
                 {% for item in tables.atomic %}
                 
-                    
+                    
                 {% endfor %}
diff --git a/packages/stacks-docs/product/components/tags.html b/packages/stacks-docs/product/components/tags.html
index efea6bb324..a5959defa7 100644
--- a/packages/stacks-docs/product/components/tags.html
+++ b/packages/stacks-docs/product/components/tags.html
@@ -9,7 +9,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
        {{ item.class }}{{ item.class }}
                     {{ item.output }}
                 
        
+        
        
@@ -20,8 +20,8 @@
             
                 {% for item in tags-component.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -32,7 +32,7 @@
     
        
         Tags should be focusable and navigable with the keyboard. 
         The various tag states (Required, Moderator, Watched, Ignored) are visually distinct but do not include any text indicators for screen readers. 
-        For that reason it is recommended to provide additional context using hidden text elements with the v-visible-sr class.
+        For that reason it is recommended to provide additional context using hidden text elements with the v-visible-sr class.
     
        
 
@@ -133,8 +133,8 @@
         
             {% for item in tags-component.sizes %}
                 
-                    
-                    
+                    
+                    
             {% endfor %}
diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html
index c686ca9abd..9ccfeb5185 100644
--- a/packages/stacks-docs/product/components/textarea.html
+++ b/packages/stacks-docs/product/components/textarea.html
@@ -32,7 +32,7 @@
     {% header "h2", "Accessibility" %}
     
        
         It is recommended to follow the same accessibility guidance as the Input component. 
-        Including marking Textarea's as required via the .s-required-symbol class.
+        Including marking Textarea's as required via the .s-required-symbol class.
     
        
 
@@ -53,7 +53,7 @@
             
                 {% for state in inputs.validation %}
                     
-                        
+                        
@@ -155,7 +155,7 @@
                     
-                        
+                        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
 
        {% if item.class == "N/A" %}.s-tag{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.s-tag{% endif %}{% if item.class == "N/A" %}.s-tag{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.s-tag{% endif %}
                     css
                 
        
 
        {{ state.class }}{{ state.class }}
                         Parent wrapper for textarea
                         {{ state.description }}
                     
        
                         {{ item.name }}
                         {{ item.size }}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}{% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}
                         
                             
        
                                 
diff --git a/packages/stacks-docs/product/components/toggle-switch.html b/packages/stacks-docs/product/components/toggle-switch.html
index 818e8443b0..234ec0d6ee 100644
--- a/packages/stacks-docs/product/components/toggle-switch.html
+++ b/packages/stacks-docs/product/components/toggle-switch.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
+        
        
@@ -17,15 +17,15 @@
             
-                    
-                    
+                    
+                    
-                    
+                    
-                    
+                    
diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html
index e86a2398ae..988d03b67d 100644
--- a/packages/stacks-docs/product/components/topbar.html
+++ b/packages/stacks-docs/product/components/topbar.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        
             
                 
        .s-toggle-switchClass to apply toggle switch styling to input[type="checkbox"] or on a parent of multiple input[type="radio"] elements..s-toggle-switchClass to apply toggle switch styling to input[type="checkbox"] or on a parent of multiple input[type="radio"] elements.
                 
        
                 
        .s-toggle-switch__multiple.s-toggle-switch__multiple
                     Modifies the base container to accept multiple options.
                 
        
                 
        .s-toggle-switch--label-off.s-toggle-switch--label-off
                     Apply to the “Off” or “None” option so it’s highlighted state isn’t lit up green.
                 
        
             
        
+        
        
@@ -19,7 +19,7 @@
             
                 {% for item in topbar %}
                     
-                        
+                        
diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html
index 29b1515244..59cb1f79f4 100644
--- a/packages/stacks-docs/product/components/uploader.html
+++ b/packages/stacks-docs/product/components/uploader.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.class }}
                         {{ item.applies | default: "N/A" | markdown | newline_to_br }}
                         {{ item.description | markdown }}
                     
        
+        
        
@@ -19,7 +19,7 @@
             
                 {% for item in uploader-component.classes %}
                     
-                        
+                        
@@ -30,7 +30,7 @@
     {% header "h2", "JavaScript" %}
     {% header "h3", "Attributes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.class }}
                         {{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -40,48 +40,48 @@
             
-                    
+                    
-                    
+                    
-                    
-                    
+                    
+                    
-                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
-                    
+                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -91,7 +91,7 @@
 
        
     {% header "h2", "Examples" %}
-    
        Including a file input with the class s-uploader--input within s-uploader will provide the correct styling for an upload section.
        
+    
        Including a file input with the class s-uploader--input within s-uploader will provide the correct styling for an upload section.
        
 
     {% header "h3", "Profile picture" %}
     
        In this example, we’re showing a single file input with an image as the example’s placeholder illustration.
        
@@ -179,7 +179,7 @@
     
 
     {% header "h3", "Multiple files" %}
-    
        In this example, this uploader accepts multiple documents so we’ve swapped @Svg.Spot.Image for @Svg.Spot.DocumentAlt and changed the input’s description and attributes to allow for multiples.
        
+    
        In this example, this uploader accepts multiple documents so we’ve swapped @Svg.Spot.Image for @Svg.Spot.DocumentAlt and changed the input’s description and attributes to allow for multiples.
        
     
        
 {% highlight html %}
 
diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html
index 8752c28e9a..462901dd8e 100644
--- a/packages/stacks-docs/product/components/user-cards.html
+++ b/packages/stacks-docs/product/components/user-cards.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Attribute
        
             
                 
        data-controller="s-uploader"data-controller="s-uploader"
                     Controller elementWires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element.Wires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element.
                 
        
                 
        data-target="s-uploader.uploader".s-uploaderdata-target="s-uploader.uploader".s-uploader
                     Wires up the element containing input, previews, and reset targets.Wires up the element containing input, previews, and reset targets.
                 
        
                 
        data-s-uploader-target="input".s-uploader--inputdata-s-uploader-target="input".s-uploader--input
                     Designates the file input element.
                 
        
                 
        data-target="s-uploader.previews".s-uploader--previewsdata-target="s-uploader.previews".s-uploader--previews
                     Designates the element to act as a container to file preview(s).
                 
        
                 
        data-action="input->s-uploader#handleInput"input[type=file] elementdata-action="input->s-uploader#handleInput"input[type=file] element
                     Wires up the element to provide files for preview on change.
                 
        
                 
        data-action="click->s-uploader#reset"data-action="click->s-uploader#reset"
                     Any child element
                     Wires up the element to reset the uploader to its initial state.
                 
        
                 
        data-s-uploader-show-on-inputdata-s-uploader-show-on-input
                     Any child element
                     Toggles element visibility. Shows when input has value.
                 
        
                 
        data-s-uploader-hide-on-inputdata-s-uploader-hide-on-input
                     Any child element
                     Toggles element visibility. Hides when input has value.
                 
        
                 
        data-s-uploader-enable-on-inputdata-s-uploader-enable-on-input
                     Any child element
                     Toggles element disabled state. Disables when input has no value.
                 
        
 
        
+        
        
@@ -19,8 +19,8 @@
             
                 {% for item in user-card.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -245,7 +245,7 @@
 
        
     {% header "h3", "Sizes" %}
     
        
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
+        
        
@@ -261,7 +261,7 @@
                         {% if item.class == "N/A" %}
                             {{ item.class }}
                         {% else %}
-                            {{ item.class }}
+                            {{ item.class }}
                         {% endif %}
                         
@@ -515,7 +515,7 @@
 
        
     {% header "h3", "States" %}
     
        
-        
        
             
                 
        
                     Size
                         {{ item.description }}
        
+        
        
@@ -527,7 +527,7 @@
                 {% for state in user-card.states %}
                     
-                        
+                        
                 {% endfor %}
@@ -788,7 +788,7 @@
     {% header "h3", "Additional bling" %}
     
        Use to display a specialized icon alongside the username, highlighting unique achievements. This style is additive and can be combined with any of the usercard variants listed above.
        
-        
        
             
                 
        
                     State
        
                         {{ state.name }}{{ state.class }}{{ state.class }}
                         {{ state.description }}
                     
        
     
        
+        
        
@@ -803,7 +803,7 @@
                         {% if bling.class == "N/A" %}
                             
                         {% else %}
-                            
+                            
                         {% endif %}
                         
diff --git a/packages/stacks-docs/product/components/vote.html b/packages/stacks-docs/product/components/vote.html
index 62b90f71c7..2ebed43695 100644
--- a/packages/stacks-docs/product/components/vote.html
+++ b/packages/stacks-docs/product/components/vote.html
@@ -11,7 +11,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Name{{ bling.class }} {{ bling.class }} {{ bling.class }}{{ bling.description }}
                     
        
+        
        
@@ -22,8 +22,8 @@
             
                 {% for item in vote.classes %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -36,7 +36,7 @@
     {% header "h2", "Examples" %}
     {% header "h3", "Base" %}
     
        
-        The base vote component includes an upvote button, a downvote button, and a vote count. When the vote count is zero and the current user has not voted, it should display Vote in place of a number. Otherwise, show the vote count and truncate large numbers (e.g., 1.2k).
+        The base vote component includes an upvote button, a downvote button, and a vote count. When the vote count is zero and the current user has not voted, it should display Vote in place of a number. Otherwise, show the vote count and truncate large numbers (e.g., 1.2k).
     
        
@@ -79,7 +79,7 @@
 
     {% header "h3", "Expanded" %}
     
        
-        Include the .s-vote__expanded modifier to show upvote and downvote counts instead of the total vote count. This modifier hides .s-vote--total and shows .s-vote--upvotes and .s-vote--downvotes instead.
+        Include the .s-vote__expanded modifier to show upvote and downvote counts instead of the total vote count. This modifier hides .s-vote--total and shows .s-vote--upvotes and .s-vote--downvotes instead.
     
        
 
     
        
@@ -125,7 +125,7 @@
 
     {% header "h3", "Horizontal" %}
     
        
-        Apply the .s-vote__horizontal modifier to arrange the vote buttons and counts in a horizontal layout. This layout does not officially support expanded vote count. This configuration is best suited for scenarios such as comment voting, where a more compact design is preferred.
+        Apply the .s-vote__horizontal modifier to arrange the vote buttons and counts in a horizontal layout. This layout does not officially support expanded vote count. This configuration is best suited for scenarios such as comment voting, where a more compact design is preferred.
     
        
 
     
        
diff --git a/packages/stacks-docs/product/develop/building.html b/packages/stacks-docs/product/develop/building.html
index 9dc9e7fc99..b3e06144f1 100644
--- a/packages/stacks-docs/product/develop/building.html
+++ b/packages/stacks-docs/product/develop/building.html
@@ -9,7 +9,7 @@
     {% header "h2", "Clone the repo" %}
     
        There are two common ways to clone a repo:
        
     
          
-        
        • Use the command line: git clone https://github.com/StackExchange/Stacks.git
          • 
+        
        • Use the command line: git clone https://github.com/StackExchange/Stacks.git
          • 
         
        • Use GitHub’s desktop app.
             
            
                 
          1. Download and install GitHub Desktop.
            2. 
@@ -26,7 +26,7 @@
     
              
         
            1. Install Node & NPM
              2. 
         
            2. Open the Stacks repo in a Terminal window.
              3. 
-        
            3. Install the NPM dependencies. npm install
              4. 
+        
            4. Install the NPM dependencies. npm install
              5. 
     
            
 
 
@@ -34,8 +34,8 @@
   {% header "h2", "Running Stacks" %}
   
            That should do it for all our dependencies. You’re now able to run Stacks. {% icon "Tada", "native va-text-bottom" %} 
            
   
              
-      
            1. From the top level of the Stacks repo, run our main script npm run start -w packages/stacks-docs
              2. 
-      
            2. Visit your local copy of Stacks at http://localhost:8080/
              3. 
+      
            3. From the top level of the Stacks repo, run our main script npm run start -w packages/stacks-docs
              4. 
+      
            4. Visit your local copy of Stacks at http://localhost:8080/
              5. 
   
            
 
 
diff --git a/packages/stacks-docs/product/develop/conditional-classes.html b/packages/stacks-docs/product/develop/conditional-classes.html
index f68f762068..0486d38bc5 100644
--- a/packages/stacks-docs/product/develop/conditional-classes.html
+++ b/packages/stacks-docs/product/develop/conditional-classes.html
@@ -7,9 +7,9 @@
 
 
            
     {% header "h2", "Responsive" %}
-    
            Many utility classes in Stacks are also available in screen-size specific variations. For example, the .d-none utility can be applied to small browser widths and below using the .sm:d-none class, on medium browser widths and below using the .md:d-none class, and on large browser widths and below using the .lg:d-none class.
            
+    
            Many utility classes in Stacks are also available in screen-size specific variations. For example, the .d-none utility can be applied to small browser widths and below using the .sm:d-none class, on medium browser widths and below using the .md:d-none class, and on large browser widths and below using the .lg:d-none class.
            
 
-    
            This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply .md:fd-column to a flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying fd-column.”
            
+    
            This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply .md:fd-column to a flex layout. This means, “At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying fd-column.”
            
 
     {% tip %}
         Note: Our font size classes, .fs-[x] are automatically adjusted at the smallest breakpoint.
@@ -19,7 +19,7 @@
 
            
     {% header "h3", "Responsive classes" %}
     
            
-        
        
             
                 
        
                     Class
        {{ item.class }}{{ item.applies }}{{ item.class }}{{ item.applies }}
                         {{ item.description }}
                     
        
 
     
        
+        
        
@@ -29,22 +29,22 @@
             
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -76,7 +76,7 @@
 
 
        
     {% header "h2", "Hover" %}
-    
        Stacks provides hover-only atomic classes. By applying .h:bs-lg, .h:o100, and .h:fc-black-600, you’re saying “On hover, add a large box shadow, an opacity of 100%, and a font color of black 900.”
        
+    
        Stacks provides hover-only atomic classes. By applying .h:bs-lg, .h:o100, and .h:fc-black-600, you’re saying “On hover, add a large box shadow, an opacity of 100%, and a font color of black 900.”
        
     
        
 {% highlight html %}
 
        
@@ -89,7 +89,7 @@
 
 
        
     {% header "h2", "Focus" %}
-    
        Stacks provides focus-only atomic classes. By applying .f:o100, and .f:fc-black-600, you’re saying “On focus, add an opacity of 100%, and a font color of black 900.”
        
+    
        Stacks provides focus-only atomic classes. By applying .f:o100, and .f:fc-black-600, you’re saying “On focus, add an opacity of 100%, and a font color of black 900.”
        
     
        
 {% highlight html %}
 
        
@@ -102,7 +102,7 @@
 
 
        
     {% header "h2", "Print" %}
-    
        Stacks provides print-only atomic classes. By applying .print:d-none, you’re saying “In print layouts, remove this element from the layout.”
        
+    
        Stacks provides print-only atomic classes. By applying .print:d-none, you’re saying “In print layouts, remove this element from the layout.”
        
     
        
 {% highlight html %}
 
        
@@ -117,7 +117,7 @@
 
 
        
     {% header "h2", "Dark mode" %}
-    
        Stacks provides darkmode-only atomic classes. By applying .d:bg-green-300, you’re saying “In dark mode, apply a background of green 100.”
        
+    
        Stacks provides darkmode-only atomic classes. By applying .d:bg-green-300, you’re saying “In dark mode, apply a background of green 100.”
        
     
        
 {% highlight html %}
 
        
@@ -127,7 +127,7 @@
         
        
     
        
 
-    
        In addition to specific overrides, you can force an element’s colors to be light or dark by applying .theme-dark__forced or .theme-light__forced. This comes in handy when showing users a preview of light or dark interface elements.
        
+    
        In addition to specific overrides, you can force an element’s colors to be light or dark by applying .theme-dark__forced or .theme-light__forced. This comes in handy when showing users a preview of light or dark interface elements.
        
     
        
 {% highlight html %}
 
        
diff --git a/packages/stacks-docs/product/develop/javascript.html b/packages/stacks-docs/product/develop/javascript.html
index 1d8137c278..315bbb01fa 100644
--- a/packages/stacks-docs/product/develop/javascript.html
+++ b/packages/stacks-docs/product/develop/javascript.html
@@ -14,7 +14,7 @@
     
        To include Stacks JavaScript in other projects, do the following.
        
 
     
          
-        
        • Include the file dist/js/stacks.min.js in your page. For example, if you use the unpkg CDN, add the tag <script src="https://unpkg.com/@stackoverflow/stacks/dist/js/stacks.min.js"></script> to your HTML. See Using Stacks for more information on Unpkg and installing Stacks via NPM.
          • 
+        
        • Include the file dist/js/stacks.min.js in your page. For example, if you use the unpkg CDN, add the tag <script src="https://unpkg.com/@stackoverflow/stacks/dist/js/stacks.min.js"></script> to your HTML. See Using Stacks for more information on Unpkg and installing Stacks via NPM.
          • 
     
        
 
        
 
@@ -25,9 +25,9 @@
 
     
        Stimulus allows you to add functionality to your markup in a way that is similar to how you add styling to your markup: by modifying HTML attributes.
        
 
-    
        Just as you style components by adding classes to the class attribute, with Stacks JavaScript, you’ll give components optional functionality by adding data-… attributes to the HTML.
        
+    
        Just as you style components by adding classes to the class attribute, with Stacks JavaScript, you’ll give components optional functionality by adding data-… attributes to the HTML.
        
 
-    
        The basic functional unit of Stimulus, and of a Stacks JavaScript component, is a controller. Controllers are identified by their name, and all Stacks-provided controller names are prefixed with s-…, just like component CSS classes. You give functionality to an HTML element by setting its data-controller attribute.
        
+    
        The basic functional unit of Stimulus, and of a Stacks JavaScript component, is a controller. Controllers are identified by their name, and all Stacks-provided controller names are prefixed with s-…, just like component CSS classes. You give functionality to an HTML element by setting its data-controller attribute.
        
 
     
        
 {% highlight html %}
@@ -45,7 +45,7 @@
 
     
        For general information about writing code with Stimulus, refer to the official documentation. That documentation generally assumes that you’re writing ES6 code. In order to make it useful without ES6-to-ES5 transpilation, Stacks provides a helper that allows you to write controllers using old-fashioned JavaScript syntax.
        
 
-    
        This helper is called Stacks.addController and takes two arguments: The name (“identifier”) of the controller, and an object that is analogous to the ES6 class that you would write for your controller, except that it's a plain JavaScript object. All own enumerable properties of that object will be made available on the controller prototype, with the exception of the targets property, which will be available on the controller constructor itself, i.e. statically.
        
+    
        This helper is called Stacks.addController and takes two arguments: The name (“identifier”) of the controller, and an object that is analogous to the ES6 class that you would write for your controller, except that it's a plain JavaScript object. All own enumerable properties of that object will be made available on the controller prototype, with the exception of the targets property, which will be available on the controller constructor itself, i.e. statically.
        
 
     
        With that, you can create and register the final Hello World controller example from the official documentation like this:
        
 
@@ -68,8 +68,8 @@
 
 
        
     {% header "h2", "JavaScript classnames" %}
-    
        We prefix our JavaScript target classes with .js- so that changing or adding a class name for styling purposes doesn’t inadvertently break our JS. This allows us to style elements with any chain of atomic or component classes from Stacks without breaking any additional JavaScript interactivity.
        
-    
        We also try to avoid IDs for both visual styling and JavaScript targeting. They aren’t reusable, visual styling can’t be overwritten by atomic classes, and, like non-.js- classes, we can’t tell if there is JavaScript interactivity attached at a glance.
        
+    
        We prefix our JavaScript target classes with .js- so that changing or adding a class name for styling purposes doesn’t inadvertently break our JS. This allows us to style elements with any chain of atomic or component classes from Stacks without breaking any additional JavaScript interactivity.
        
+    
        We also try to avoid IDs for both visual styling and JavaScript targeting. They aren’t reusable, visual styling can’t be overwritten by atomic classes, and, like non-.js- classes, we can’t tell if there is JavaScript interactivity attached at a glance.
        
 
     
        {% icon "Checkmark", "mtn1 mbn1" %} Do
        
     
        
diff --git a/packages/stacks-docs/product/develop/using-stacks.html b/packages/stacks-docs/product/develop/using-stacks.html
index a0fc2a9c97..383255e396 100644
--- a/packages/stacks-docs/product/develop/using-stacks.html
+++ b/packages/stacks-docs/product/develop/using-stacks.html
@@ -14,8 +14,8 @@
 
        
     {% header "h2", "Installing" %}
     
        Stacks is currently included within various Stack Overflow projects automatically. If you’re working on a Stack Overflow project, chances are it’s already available for you! If not, reach out to us and we’ll work on getting it set up.
        
-    
        To include Stacks in other projects, you can install Stacks via NPM: npm install --save @stackoverflow/stacks
        
-    
        You can also include a minified, compiled Stacks CSS style sheet that’s delivered via Unkpg, a CDN for NPM packages. This is good for things like Codepen or other quick prototypes. This CDN should not be considered production-ready. <link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks.min.css">
        
+    
        To include Stacks in other projects, you can install Stacks via NPM: npm install --save @stackoverflow/stacks
        
+    
        You can also include a minified, compiled Stacks CSS style sheet that’s delivered via Unkpg, a CDN for NPM packages. This is good for things like Codepen or other quick prototypes. This CDN should not be considered production-ready. <link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks.min.css">
        
 
     
        To use Stack’s built-in JavaScript interactivity with your components, refer to the JavaScript guidelines.
        
 
@@ -35,7 +35,7 @@
         
         
      7. 
             
        My design uses existing components, but has some special cases.
        
-            
        E.g. background colors, border, and font sizes. Awesome, copy the component’s example markup to your view and add an atomic class to override its styling. Practically, this will likely just be adding something like an .mb12 to a button, or hiding something temporarily with .d-none.
        
+            
        E.g. background colors, border, and font sizes. Awesome, copy the component’s example markup to your view and add an atomic class to override its styling. Practically, this will likely just be adding something like an .mb12 to a button, or hiding something temporarily with .d-none.
        
         
        8. 
         
      8. 
             
        My design uses a new pattern that doesn’t have a component yet.
@@ -43,7 +43,7 @@
         
        9. 
         
      9. 
             
        My design is super special and…
        
-            
        I’m going to write a lot of custom CSS from scratch in its own .less file that I’ve included in the bundle. You probably shouldn’t be doing this. With atomic classes, you can build most of what you’re attempting to do without writing a single new line of CSS. The Stacks team would prefer you use these pre-existing classes to build new UI. Every line of CSS you write, the more CSS we have to maintain, the more our users have to download, and the more bytes we have to host.
        
+            
        I’m going to write a lot of custom CSS from scratch in its own .less file that I’ve included in the bundle. You probably shouldn’t be doing this. With atomic classes, you can build most of what you’re attempting to do without writing a single new line of CSS. The Stacks team would prefer you use these pre-existing classes to build new UI. Every line of CSS you write, the more CSS we have to maintain, the more our users have to download, and the more bytes we have to host.
        
         
        10. 
     
 
        
diff --git a/packages/stacks-docs/product/foundation/accessibility.html b/packages/stacks-docs/product/foundation/accessibility.html
index 6424bea19a..dd0d0141d2 100644
--- a/packages/stacks-docs/product/foundation/accessibility.html
+++ b/packages/stacks-docs/product/foundation/accessibility.html
@@ -83,14 +83,14 @@
     {% header "h3", "Foundation for custom approach" %}
 
     
        
-        The custom approach adds two different outline rings on the inside of the component. The outer ring color uses secondary-theme-400
+        The custom approach adds two different outline rings on the inside of the component. The outer ring color uses secondary-theme-400
         {%
             render 'color-swatch.html',
             color: "theme-secondary-400",
             size: "16",
             classes: "mbn2"
         %}
-        (matching the primary button color) and the inner ring color uses white
+        (matching the primary button color) and the inner ring color uses white
         {%
             render 'color-swatch.html',
             color: "white",
@@ -117,7 +117,7 @@
     
        
 
     
        
-        The outer ring color will always display as the theme color even when applied to a muted or danger styled button. This ensures the focus ring maintains a 3:1 color contrast ratio for any adjacent colors (WCAG level AA) within any theme (assuming the secondary-theme color
+        The outer ring color will always display as the theme color even when applied to a muted or danger styled button. This ensures the focus ring maintains a 3:1 color contrast ratio for any adjacent colors (WCAG level AA) within any theme (assuming the secondary-theme color
         {%
             render 'color-swatch.html',
             color: "theme-secondary-400",
@@ -271,7 +271,7 @@
 
     {% header "h4", "Exceptions" %}
 
-    
        The exceptions to this pattern are the Clear button variations. All buttons display a background fill layer when in focus. Clear, Outline and Filled styles will all look the same when in focus. The fill color was chosen to match the existing Filled style.
        
+    
        The exceptions to this pattern are the Clear button variations. All buttons display a background fill layer when in focus. Clear, Outline and Filled styles will all look the same when in focus. The fill color was chosen to match the existing Filled style.
        
 
     
        
         {% for group in accessibility.consistent-style-patterns.exceptions %}
@@ -314,8 +314,8 @@
 
     
        
         ARIA landmarks should be used across Stack Overflow product pages to provide clear navigation structures for users relying on assistive technologies.
-        Landmarks are inserted into the page explictly using the role attribute on an element (e.g. role="search", etc...) or by leveraging semantic HTML (e.g. an header element is given automatically the banner landmark).
        
-        Using semantic HTML elements should be preferred over using the role attribute whenever possible.
+        Landmarks are inserted into the page explictly using the role attribute on an element (e.g. role="search", etc...) or by leveraging semantic HTML (e.g. an header element is given automatically the banner landmark).
        
+        Using semantic HTML elements should be preferred over using the role attribute whenever possible.
     
        
     
        For a comprehensive guide on using ARIA landmark roles refer to:
        
     
          
diff --git a/packages/stacks-docs/product/foundation/color-fundamentals.html b/packages/stacks-docs/product/foundation/color-fundamentals.html
index 66d3cafd39..1f5973dcfd 100644
--- a/packages/stacks-docs/product/foundation/color-fundamentals.html
+++ b/packages/stacks-docs/product/foundation/color-fundamentals.html
@@ -344,9 +344,9 @@
         {% header "h2", "Light, dark, and high contrast modes" %}
         
          Stacks supports light, dark, and high contrast modes. By using Stacks, you will get each of these modes for free. By using a Stacks component, an atomic color class, or CSS variable directly, your theme will switch appropriately based on the following methods: 
          
         
            
-            
          1. You can apply .theme-system to the body element. This will change colors based on the prefers-color-scheme media query, which is ultimately powered by the user’s system or browser settings. This can be preferable for folks who have their system turn to dark mode based on ambient light or time of day.
            2. 
-            
          2. Alternatively, you can set a dark mode that is not system dependent by attaching .theme-dark to the body element.
            3. 
-            
          3. Adding .theme-highcontrast to the body element will boost colors to WCAG Level AAA contrast ratios in as many places as possible. This mode stacks on top of both light and dark modes. The only exception is branded themed colors remain untouched by high contrast mode.
            4. 
+            
          4. You can apply .theme-system to the body element. This will change colors based on the prefers-color-scheme media query, which is ultimately powered by the user’s system or browser settings. This can be preferable for folks who have their system turn to dark mode based on ambient light or time of day.
            5. 
+            
          5. Alternatively, you can set a dark mode that is not system dependent by attaching .theme-dark to the body element.
            6. 
+            
          6. Adding .theme-highcontrast to the body element will boost colors to WCAG Level AAA contrast ratios in as many places as possible. This mode stacks on top of both light and dark modes. The only exception is branded themed colors remain untouched by high contrast mode.
            7. 
         
          
         
          There are also conditional classes that can be applied to override assumed dark mode colors, force light mode, or to force dark mode. Forcing modes can be good for previews in admin-only situations.
          
     
        
diff --git a/packages/stacks-docs/product/foundation/icons.html b/packages/stacks-docs/product/foundation/icons.html
index 5010e73637..d6a1b7146b 100644
--- a/packages/stacks-docs/product/foundation/icons.html
+++ b/packages/stacks-docs/product/foundation/icons.html
@@ -9,12 +9,12 @@
 
 
        
     {% header "h2", "Usage" %}
-    
        Stacks icons are designed to be directly injected into the markup as an svg element. This allows us to color them on the fly using any of our atomic classes. We have different helpers in different environments.
        
+    
        Stacks icons are designed to be directly injected into the markup as an svg element. This allows us to color them on the fly using any of our atomic classes. We have different helpers in different environments.
        
 
     {% header "h3", "Svelte" %}
     
        
-        If you are working in a Svelte project, you can use the Icon component to render an icon.
-        This component will render the icon as an svg element with the appropriate classes and attributes (docs).
+        If you are working in a Svelte project, you can use the Icon component to render an icon.
+        This component will render the icon as an svg element with the appropriate classes and attributes (docs).
     
        
     
        
 {% highlight html %}
@@ -45,7 +45,7 @@
     
        
 
     {% header "h3", "Dotnet" %}
-    
        If you’re working in a dotnet project, we have a helper that can be called with @Svg. and the icon name, eg. @Svg.Answer. By default, any icon will inherit the text color of the parent element. Optionally, you can pass the class native to the icon to render any native colors that are included eg. @Svg.ServiceCCPA.With("native"). This same syntax allows you to pass additional arbitrary classes like atomic helpers, or js- prefixed classes.
        
+    
        If you’re working in a dotnet project, we have a helper that can be called with @Svg. and the icon name, eg. @Svg.Answer. By default, any icon will inherit the text color of the parent element. Optionally, you can pass the class native to the icon to render any native colors that are included eg. @Svg.ServiceCCPA.With("native"). This same syntax allows you to pass additional arbitrary classes like atomic helpers, or js- prefixed classes.
        
     
        
 {% highlight java %}
 @Svg.ServiceCCPA
diff --git a/packages/stacks-docs/product/foundation/theming.html b/packages/stacks-docs/product/foundation/theming.html
index fb25fa41b7..f6e4fd8ae7 100644
--- a/packages/stacks-docs/product/foundation/theming.html
+++ b/packages/stacks-docs/product/foundation/theming.html
@@ -46,43 +46,43 @@ 
        {{ set.name | capitalize }}
        
     {% header "h2", "Theming API" %}
 
     {% header "h3", "Programmatic theme generation" %}
-    
        Use .create-custom-theme-hsl-variables(@color, @tier, @modeCustom) to create a custom theme.
        
+    
        Use .create-custom-theme-hsl-variables(@color, @tier, @modeCustom) to create a custom theme.
        
         
     
        This function generates two sets of CSS variables: 1) independent h/s/l color variables and 2) variables at each colors stop that reference the h/s/l variables. Provide this function the arguments defined below to generate theme colors which will apply across Stacks.
        
 
     
        
-        
        
             
                 
        
                     Class
        
             
                 
        .[x].[x]
                     N/A
                     The class is applied on all browser widths.
                 
        
                 
        .lg:[x].lg:[x]
                     92.25rem
                     The class is applied on large browser widths and below.
        (1476px at 16px font size)        		
                 
        
                 
        .md:[x].md:[x]
                     71.875rem
                     The class is applied on medium browser widths and below.
        (1150px at 16px font size)        		
                 
        
                 
        .sm:[x].sm:[x]
                     48.75rem
                     The class is applied on small browser widths and below.
        (780px at 16px font size)        		
                 
        
+        
        
-                    
-                    
+                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
-                    
+                    
@@ -131,7 +131,7 @@ 
        {{ set.name | capitalize }}
        
     {% header "h4", "Manual addition of theme variables" %}
     
        If you need to apply a theme without using the above function, you can do so by manually adding the variables above to your CSS. The most common use for this approach is when the theme needs to change client-side, such as when allowing the user to change and preview a theme dynamically.
        
 
-    
        With this approach, we recommend targeting new h/s/l color variables on a parent element that includes .themed class.
        
+    
        With this approach, we recommend targeting new h/s/l color variables on a parent element that includes .themed class.
        
 
     {% header "h3", "Live playground" %}
     
        
@@ -241,7 +241,7 @@ 
        {{ set.name | capitalize }}
        
 
 
        
     {% header "h2", "Child theming" %}
-    
        Stacks allows for further theming various portions of a page. You can simply pair the .themed class with an atomic color stop, and a new theming scope. For this example, we’re using a class name of .theme-team-[xxx] with a unique ID appended.
        
+    
        Stacks allows for further theming various portions of a page. You can simply pair the .themed class with an atomic color stop, and a new theming scope. For this example, we’re using a class name of .theme-team-[xxx] with a unique ID appended.
        
     
        
 {% highlight html %}
 
        
diff --git a/packages/stacks-docs/product/foundation/typography.html b/packages/stacks-docs/product/foundation/typography.html
index 06218f454d..54af338629 100644
--- a/packages/stacks-docs/product/foundation/typography.html
+++ b/packages/stacks-docs/product/foundation/typography.html
@@ -7,7 +7,7 @@
 ---
 
        
     {% header "h2", "Basic" %}
-    
        These styles should only be used as overrides. They shouldn’t replace standard semantic uses of strong or em tags.
        
+    
        These styles should only be used as overrides. They shouldn’t replace standard semantic uses of strong or em tags.
        
 
     {% header "h3", "Basic classes" %}
     
        
@@ -22,8 +22,8 @@
             
        
                 {% for basic in typography.type-basic %}
                     
-                        
-                        
+                        
+                        
                 {% endfor %}
@@ -85,8 +85,8 @@
             
                 {% for layout in typography.type-layout %}
                     
-                        
-                        
+                        
+                        
        
             
                 
        ArgumentTypeArgumentType
                     Default
                     Description
                 
        
                     
             
                 
        @color@color
                     HSL, hex, or other color value
                     
                     Color to use to generate theme values.
                 
        
                 
        @tier@tier
                     
-                        primary |
-                        secondary
+                        primary |
+                        secondary
                     primaryprimary
                     Color tier to generate.
                 
        
                 
        @modeCustom@modeCustom
                     
-                        base |
-                        dark
+                        base |
+                        dark
                     basebase
                     The color mode the theme applies to.
                 
        
             
        .{{ basic.class }}{{ basic.output }}.{{ basic.class }}{{ basic.output }}
                         {{ basic.define }}
                     
        .{{ layout.class }}{{ layout.output }}.{{ layout.class }}{{ layout.output }}
                         
        {{ layout.define }}
        		
                         
                             {% if layout.responsive %}
@@ -165,11 +165,11 @@
 
        
     {% header "h2", "Sizes" %}
     
        
-        Fonts larger than .fs-body1 are reduced in size at the smallest responsive breakpoint. .fs-body1 or smaller remain fixed at their initial pixel values.
+        Fonts larger than .fs-body1 are reduced in size at the smallest responsive breakpoint. .fs-body1 or smaller remain fixed at their initial pixel values.
     
        
     {% header "h3", "Size classes" %}
     
        
-        
+        
        
@@ -181,10 +181,10 @@
             
                 {% for term in typography.fontsize %}
                     
-                        
-                        
-                        
-                        
+                        
+                        
+                        
+                        
                 {% endfor %}
             
@@ -234,13 +234,13 @@
 
        …
        
 {% endhighlight %}
         
        
-            
        Line Height XS: This sets the line-height value to 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height SM: This sets the line-height value to 1.15. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height MD: This sets the line-height value to 1.3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height LG: This sets the line-height value to 1.6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height XL: This sets the line-height value to 1.92. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height XXL: This sets the line-height value to 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
-            
        Line Height Unset: This sets the line-height value to initial. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height XS: This sets the line-height value to 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height SM: This sets the line-height value to 1.15. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height MD: This sets the line-height value to 1.3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height LG: This sets the line-height value to 1.6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height XL: This sets the line-height value to 1.92. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height XXL: This sets the line-height value to 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
+            
        Line Height Unset: This sets the line-height value to initial. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
         
        
@@ -255,10 +255,10 @@
 {% endhighlight %}
         
        
             
        
-                This text will not be hyphenated when large words break—longer words are broken by .ow-break-word.
+                This text will not be hyphenated when large words break—longer words are broken by .ow-break-word.
             
        
             
        
-                This text will be hyphenated when large words break. .ow-break-word shouldn’t be necessary since breaks are implied by hyphenation rules.
+                This text will be hyphenated when large words break. .ow-break-word shouldn’t be necessary since breaks are implied by hyphenation rules.
             
        
         
        

From 03e9946a384f5bb15bb85229d535b8ac58f0d470 Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 14:54:36 -0500
Subject: [PATCH 10/15] Merge improvements

---
 .../lib/components/post-summary/post-summary.less  |  2 +-
 packages/stacks-classic/lib/stacks-static.less     |  4 ++++
 .../product/components/post-summary.html           | 14 +++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

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 3fabe9041d..f757010bdf 100644
--- a/packages/stacks-classic/lib/components/post-summary/post-summary.less
+++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less
@@ -142,7 +142,7 @@
             --_ps-content-type-fc: var(--black-600);
         }
 
-        border: var(--su-static1) solid var(--_ps-content-type-bc);
+        border: var(--su1) solid var(--_ps-content-type-bc);
         background-color: var(--_ps-content-type-bg);
         color: var(--_ps-content-type-fc);
 
diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less
index c951828d39..f35e960250 100644
--- a/packages/stacks-classic/lib/stacks-static.less
+++ b/packages/stacks-classic/lib/stacks-static.less
@@ -112,3 +112,7 @@
     }
 }
 /* stylelint-enable */
+
+// CONFIG
+@import "base/configuration-static.less";
+@import "base/internal.less";
\ No newline at end of file
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html
index 5b14735450..ed021a30ee 100644
--- a/packages/stacks-docs/product/components/post-summary.html
+++ b/packages/stacks-docs/product/components/post-summary.html
@@ -97,7 +97,7 @@
 {% header "h3", "Answered" %}
 
        
     
        
-        Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer.
+        Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer.
     
        
     
        
 {% highlight html %}
@@ -113,7 +113,7 @@
 
        
     {% header "h3", "Bountied" %}
     
        
-        Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty.
+        Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty.
     
        
     
        
 {% highlight html %}
@@ -197,7 +197,7 @@
 
 {% header "h3", "Deleted" %}
 
        
-    
        Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.
        
+    
        Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.
        
     
        
 {% highlight html %}
 
        
@@ -403,7 +403,7 @@
     {% header "h4", "Classes" %}
     
        Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also Truncation.
        
     
        
-        
        
             
                 
        
                     Class
        .fs-{{ term.term }}{{ term.define }}{{ term.line-height }}{{ term.responsive }}.fs-{{ term.term }}{{ term.define }}{{ term.line-height }}{{ term.responsive }}
                     
        
     
 
     
        
+        
        
@@ -414,7 +414,7 @@
                 {% for item in post-summary.excerptSizes %}
                     {% if item.excerptLines > 0 %}
                     
-                            
+                            
                     {% endif %}
@@ -492,8 +492,8 @@
 {% header "h3", "Answers" %}
 
        
     
-    
        Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.
        
-    
        For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.
        
+    
        Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.
        
+    
        For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.
        
     
        
 {% highlight html %}
 
        

From 4c591a98ef803e0db3e936c4dde49c280d254338 Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 15:44:08 -0500
Subject: [PATCH 11/15] Changeset

---
 .changeset/silent-friends-think.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/silent-friends-think.md

diff --git a/.changeset/silent-friends-think.md b/.changeset/silent-friends-think.md
new file mode 100644
index 0000000000..cdb81bcb1e
--- /dev/null
+++ b/.changeset/silent-friends-think.md
@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": patch
+---
+
+Replace all static size variables (`--su-static*`) with dynamic ones (`--su*`)

From 145fd78e81a95bf2686bce576d6719b5d7502f6a Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 16:08:48 -0500
Subject: [PATCH 12/15] Update visual regression images; fix minor merge issue

---
 packages/stacks-classic/lib/components/select/select.less     | 2 +-
 .../screenshots/Chromium/baseline/s-select-dark-sm.ico        | 4 ++--
 .../Chromium/baseline/s-select-highcontrast-dark-sm.ico       | 4 ++--
 .../Chromium/baseline/s-select-highcontrast-light-sm.ico      | 4 ++--
 .../screenshots/Chromium/baseline/s-select-light-sm.ico       | 4 ++--
 .../Webkit/baseline/s-pagination-highcontrast-light.ico       | 4 ++--
 .../screenshots/Webkit/baseline/s-pagination-light.ico        | 4 ++--
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/stacks-classic/lib/components/select/select.less b/packages/stacks-classic/lib/components/select/select.less
index 3ccaa00a48..bef213cfd7 100644
--- a/packages/stacks-classic/lib/components/select/select.less
+++ b/packages/stacks-classic/lib/components/select/select.less
@@ -30,7 +30,7 @@
     }
 
     &&__lg {
-        --_se-select-fs: var(--fs-title);
+        --_se-select-fs: var(--fs-body3);
         --_se-select-lh: var(--lh-lg);
     }
 
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-dark-sm.ico
index 2a7237d23e..306647613b 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-dark-sm.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-dark-sm.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:78fea7de1d7a0187ae5e5816a827ac7e63719ee488dfb0dedd84cab6a11f94e4
-size 2036
+oid sha256:e90d34f9b8e0b6bcb143ddfa63749b8f3e51ccb5118d89ef433d730b3a61f7a9
+size 2019
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-dark-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-dark-sm.ico
index 8076aa2532..4031b17538 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-dark-sm.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-dark-sm.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:c95644f0cc13f244893bc9ccb1630d76e084802d21a970204283c6cbef723bc6
-size 2042
+oid sha256:b9af8e4cd70491792e51c88564afa7d26e376c4870778404927bcdfdac1ae22a
+size 2034
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-light-sm.ico
index 003bd028a5..dfd5183a26 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-light-sm.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-highcontrast-light-sm.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:6d8ca0130f03bd320a3fb2c74891eb46aa9f110d9ed3b862ded4a208c10afa61
-size 2210
+oid sha256:13a186c19cf7ac6f17c61e0c628f8edf78caf94046d8f9c5cca38f4b789654e7
+size 2197
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-light-sm.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-light-sm.ico
index 545833928a..f9a91070a9 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-select-light-sm.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-select-light-sm.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:43aefdbf4e37e9c04a9b766ac9e567860c91c7a0730e03e12b31e535e4a9f89f
-size 2185
+oid sha256:d22016fd16feda182f6f61000bff7bdf1dafdcb159aac6231ed05c7c743329b0
+size 2178
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico
index 83a1a12774..8356f98e85 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:f0d1a0777a299fa368e7555d2e1d0f3b06cc8e6d629c17a10c895d0e4e7a4a86
-size 2683
+oid sha256:f1528e5605647f87a2331db3852be7444e0803f597fc9e50629ff7b442c9aafc
+size 2666
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico
index ec1c6a3e31..5e5f0e217a 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs-github-com-gh.2025025.xyz/spec/v1
-oid sha256:0fabe70e6b378b1fe394520d5e03a035bb6e57ceb87b802b0b1c54e44f064353
-size 2636
+oid sha256:a1c0a998285a5d47330507b33a6d51bb45df16d770688901f965cfabcfa4c26e
+size 2625

From 35848f751c4a401ff6e3409c0fd18e99559c407e Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 16:17:07 -0500
Subject: [PATCH 13/15] Use more .docs-table

---
 .../stacks-docs/product/base/box-shadow.html     |  2 +-
 .../stacks-docs/product/base/box-sizing.html     |  2 +-
 packages/stacks-docs/product/base/display.html   |  2 +-
 packages/stacks-docs/product/base/flex.html      |  2 +-
 packages/stacks-docs/product/base/margin.html    |  4 ++--
 packages/stacks-docs/product/base/padding.html   |  2 +-
 .../stacks-docs/product/base/truncation.html     |  2 +-
 .../stacks-docs/product/components/badges.html   | 14 +++++++-------
 .../stacks-docs/product/components/banners.html  |  2 +-
 .../stacks-docs/product/components/bling.html    |  6 +++---
 .../stacks-docs/product/components/buttons.html  | 16 ++++++++--------
 .../stacks-docs/product/components/checkbox.html |  4 ++--
 .../stacks-docs/product/components/inputs.html   |  2 +-
 .../stacks-docs/product/components/notices.html  |  4 ++--
 .../stacks-docs/product/components/radio.html    |  4 ++--
 .../stacks-docs/product/components/select.html   |  2 +-
 .../stacks-docs/product/components/textarea.html |  4 ++--
 .../product/foundation/color-fundamentals.html   |  4 ++--
 .../stacks-docs/product/foundation/colors.html   |  6 +++---
 .../product/foundation/typography.html           |  4 ++--
 20 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/stacks-docs/product/base/box-shadow.html b/packages/stacks-docs/product/base/box-shadow.html
index b15540a835..01fbe1899a 100644
--- a/packages/stacks-docs/product/base/box-shadow.html
+++ b/packages/stacks-docs/product/base/box-shadow.html
@@ -8,7 +8,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        .v-truncate{{ item.excerptLines }}.v-truncate{{ item.excerptLines }}
                             Truncates the excerpt to {{ item.excerptLines }} lines of text.
                         
        
+        
        
diff --git a/packages/stacks-docs/product/base/box-sizing.html b/packages/stacks-docs/product/base/box-sizing.html
index d9fbbb3edc..8c7e5b44d2 100644
--- a/packages/stacks-docs/product/base/box-sizing.html
+++ b/packages/stacks-docs/product/base/box-sizing.html
@@ -7,7 +7,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        
+        
        
diff --git a/packages/stacks-docs/product/base/display.html b/packages/stacks-docs/product/base/display.html
index 1ea95cc39b..2faade8a11 100644
--- a/packages/stacks-docs/product/base/display.html
+++ b/packages/stacks-docs/product/base/display.html
@@ -7,7 +7,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     Class
        
+        
        
diff --git a/packages/stacks-docs/product/base/flex.html b/packages/stacks-docs/product/base/flex.html
index 918b396c02..da6de794dd 100644
--- a/packages/stacks-docs/product/base/flex.html
+++ b/packages/stacks-docs/product/base/flex.html
@@ -80,7 +80,7 @@
 
     {% header "h3", "Fixed classes" %}
     
        
-        
        
             
                 
        
                     Class
        
+        
        
diff --git a/packages/stacks-docs/product/base/margin.html b/packages/stacks-docs/product/base/margin.html
index 72ba087256..54cbae819c 100644
--- a/packages/stacks-docs/product/base/margin.html
+++ b/packages/stacks-docs/product/base/margin.html
@@ -52,7 +52,7 @@
 
     {% header "h3", "Base classes" %}
     
        
-        
        
             
                 
        
                     Individual Width
        
+        
        
@@ -123,7 +123,7 @@
     {% assign margin-values-negative = margin.values | replace: "0, ", "" | split: ", " %}
 
     
        
-        
        
             
                 
        
                     
        
+        
        
diff --git a/packages/stacks-docs/product/base/padding.html b/packages/stacks-docs/product/base/padding.html
index 203958c88d..7af55cfd42 100644
--- a/packages/stacks-docs/product/base/padding.html
+++ b/packages/stacks-docs/product/base/padding.html
@@ -53,7 +53,7 @@
         
        
-        
        
             
                 
        
                     
     
     
        
+        
        
diff --git a/packages/stacks-docs/product/base/truncation.html b/packages/stacks-docs/product/base/truncation.html
index e7b2126bd1..8f2dfb2302 100644
--- a/packages/stacks-docs/product/base/truncation.html
+++ b/packages/stacks-docs/product/base/truncation.html
@@ -7,7 +7,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
             
                 
        
                     
        
+        
        
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html
index 4da2598456..a69e5e3562 100644
--- a/packages/stacks-docs/product/components/badges.html
+++ b/packages/stacks-docs/product/components/badges.html
@@ -111,7 +111,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
             
                 
        
                     Class
        
+                
        
@@ -175,7 +175,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -258,7 +258,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -316,7 +316,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -377,7 +377,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -430,7 +430,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -480,7 +480,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Examples
        
+                
        
diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html
index a70ac51c16..4d11045433 100644
--- a/packages/stacks-docs/product/components/banners.html
+++ b/packages/stacks-docs/product/components/banners.html
@@ -30,7 +30,7 @@
 
        
     {% header "h2", "Classes" %}
     
        
-        
        
                     
                         
        
                             Examples
        
+        
        
diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html
index 1f1bfd5c0d..5aece75f53 100644
--- a/packages/stacks-docs/product/components/bling.html
+++ b/packages/stacks-docs/product/components/bling.html
@@ -25,7 +25,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
             
                 
        
                     Class
        
+                
        
@@ -75,7 +75,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -121,7 +121,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html
index 57367c2cf8..b7216b04f2 100644
--- a/packages/stacks-docs/product/components/buttons.html
+++ b/packages/stacks-docs/product/components/buttons.html
@@ -27,7 +27,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
@@ -76,7 +76,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -126,7 +126,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -176,7 +176,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -229,7 +229,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -280,7 +280,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -342,7 +342,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -395,7 +395,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html
index 9fd321b5c9..6e07623089 100644
--- a/packages/stacks-docs/product/components/checkbox.html
+++ b/packages/stacks-docs/product/components/checkbox.html
@@ -20,7 +20,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Type
        
+                
        
@@ -57,7 +57,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
diff --git a/packages/stacks-docs/product/components/inputs.html b/packages/stacks-docs/product/components/inputs.html
index b8b1f07cf9..deb02178ed 100644
--- a/packages/stacks-docs/product/components/inputs.html
+++ b/packages/stacks-docs/product/components/inputs.html
@@ -312,7 +312,7 @@ 
        
 
        
     {% header "h2", "Sizes" %}
     
        
-        
        
                     
                         
        
                             Example
        
+        
        
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html
index 30d47f624f..08a616f89a 100644
--- a/packages/stacks-docs/product/components/notices.html
+++ b/packages/stacks-docs/product/components/notices.html
@@ -32,7 +32,7 @@
 
        
     {% header "h2", "Accessibility" %}
     
        
-        
        
             
                 
        
                     Name
        
+        
        
@@ -202,7 +202,7 @@
     {% header "h2", "Visual styles" %}
     {% header "h3", "Classes" %}
     
        
-        
        
             
                 
        
                     Item
        
+        
        
diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html
index fe57bd0c74..95660c01b4 100644
--- a/packages/stacks-docs/product/components/radio.html
+++ b/packages/stacks-docs/product/components/radio.html
@@ -20,7 +20,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
             
                 
        
                     Class
        
+                
        
@@ -61,7 +61,7 @@
 {% endhighlight %}
         
        
             
        
-                
        
                     
                         
        
                             Example
        
+                
        
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html
index d94a7775df..61c24dabba 100644
--- a/packages/stacks-docs/product/components/select.html
+++ b/packages/stacks-docs/product/components/select.html
@@ -238,7 +238,7 @@
 
        
     {% header "h2", "Sizes" %}
     
        
-        
        
                     
                         
        
                             Example
        
+        
        
diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html
index c80d05d8a7..8a207cee26 100644
--- a/packages/stacks-docs/product/components/textarea.html
+++ b/packages/stacks-docs/product/components/textarea.html
@@ -42,7 +42,7 @@
 
     {% header "h3", "Validation classes" %}
     
        
-        
        
             
                 
        
                     Name
        
+        
        
@@ -139,7 +139,7 @@
 
        
     {% header "h2", "Sizes" %}
     
        
-        
        
             
                 
        
                     Class
        
+        
        
diff --git a/packages/stacks-docs/product/foundation/color-fundamentals.html b/packages/stacks-docs/product/foundation/color-fundamentals.html
index 1f5973dcfd..2f7016d9f2 100644
--- a/packages/stacks-docs/product/foundation/color-fundamentals.html
+++ b/packages/stacks-docs/product/foundation/color-fundamentals.html
@@ -61,7 +61,7 @@
         {% for group in colors %}
             {% if group.name == "v2" %}
                 
        
-                    
        
             
                 
        
                     Name
        
+                    
        
@@ -226,7 +226,7 @@
 
     
        
         
        
-            
        
                         
                             
        
                                 Role
        
+            
        
diff --git a/packages/stacks-docs/product/foundation/colors.html b/packages/stacks-docs/product/foundation/colors.html
index 4c2f6fd756..73ea18dd26 100644
--- a/packages/stacks-docs/product/foundation/colors.html
+++ b/packages/stacks-docs/product/foundation/colors.html
@@ -71,7 +71,7 @@ 
        {{ set.name | capitalize }}
        
         {% assign name = set.name | replace: " ", "-" %}
 
         
        
-            
        
                 
                     
        
                         Background layer
        
+            
        
@@ -132,7 +132,7 @@ 
        {{ set.name | capitalize }}
        
     {% assign fcAliases = "light,medium,dark" | split: "," %}
     
        
-        
        
                 
                     
        
                         Text
     
        
+        
        
@@ -159,7 +159,7 @@ 
        {{ set.name | capitalize }}
        
         {% assign aliasHeading = alias | capitalize %}
         {% header "h3", aliasHeading %}
         
        
-            
        
             
                 
        
                     Text classes
        
+            
        
diff --git a/packages/stacks-docs/product/foundation/typography.html b/packages/stacks-docs/product/foundation/typography.html
index 54af338629..385911179a 100644
--- a/packages/stacks-docs/product/foundation/typography.html
+++ b/packages/stacks-docs/product/foundation/typography.html
@@ -11,7 +11,7 @@
 
     {% header "h3", "Basic classes" %}
     
        
-        
        
                 
                     
        
                         Text classes
        
+        
        
@@ -73,7 +73,7 @@
     {% header "h2", "Layout" %}
     {% header "h3", "Layout classes" %}
     
        
-        
        
             
                 
        
                     Class
        
+        
        

From c430122a4b8b924bb1d12d048242d139d64401f8 Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 16:58:51 -0500
Subject: [PATCH 14/15] Remove border radius on code blocks

---
 .../stacks-classic/lib/components/code-block/code-block.less     | 1 -
 1 file changed, 1 deletion(-)

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 b5909e5eb2..0a2635c38b 100644
--- a/packages/stacks-classic/lib/components/code-block/code-block.less
+++ b/packages/stacks-classic/lib/components/code-block/code-block.less
@@ -104,7 +104,6 @@
 
         @scrollbar-styles();
         background-color: var(--highlight-bg);
-        border-radius: var(--br-md);
         color: var(--highlight-color);
         font-family: var(--ff-mono);
         font-size: var(--fs-body1);

From ee12331ffe9fe89489eff561891ecfa13bf6f396 Mon Sep 17 00:00:00 2001
From: Dan Cormier 
Date: Wed, 4 Feb 2026 17:00:45 -0500
Subject: [PATCH 15/15] Better use of .docs-table

---
 .../assets/less/stacks-documentation.less     |  24 +++
 .../brand/copywriting/concepts.html           |   6 +-
 .../stacks-docs/brand/copywriting/naming.html |  52 +++---
 .../content/examples/alt-text.html            |  14 +-
 .../content/examples/error-messages.html      |  36 ++--
 .../examples/preferences-settings.html        |  18 +-
 .../content/examples/success-messages.html    |  18 +-
 .../guidelines/grammar-and-mechanics.html     | 174 +++++++++---------
 .../content/guidelines/principles.html        |  42 ++---
 .../content/guidelines/voice-and-tone.html    |  31 ++--
 .../stacks-docs/email/base/border-radius.html |   8 +-
 packages/stacks-docs/email/base/mso.html      |  17 +-
 .../email/base/responsiveness.html            |  43 ++---
 .../stacks-docs/email/components/footers.html |   5 +-
 .../stacks-docs/email/components/spacers.html |   8 +-
 .../email/templates/long-transactional.html   |  14 +-
 .../email/templates/promotional.html          |  16 +-
 .../email/templates/short-transactional.html  |  14 +-
 .../product/components/avatars.html           |   6 +-
 .../stacks-docs/product/components/tags.html  |   2 +-
 20 files changed, 303 insertions(+), 245 deletions(-)

diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less
index 1ef03400c7..ba1163bce7 100644
--- a/packages/stacks-docs/assets/less/stacks-documentation.less
+++ b/packages/stacks-docs/assets/less/stacks-documentation.less
@@ -191,6 +191,30 @@ h2, h3 {
 }
 
 .docs-table {
+    & &--context,
+    & &--do,
+    & &--dont {
+        border-color: var(--_dt-bc, var(--_dt-c));
+        color: var(--_dt-c);
+
+        background-color: transparent;
+        border-width: 0 0 var(--su3) 0;
+        border-style: solid;
+    }
+
+    & &--context {
+        --_dt-bc: var(--black-225);
+        --_dt-c: var(--black-500);
+    }
+
+    & &--dont {
+        --_dt-c: var(--red-400);
+    }
+
+    & &--do {
+        --_dt-c: var(--green-400);
+    }
+
     code {
         font-size: 1em;
     }
diff --git a/packages/stacks-docs/brand/copywriting/concepts.html b/packages/stacks-docs/brand/copywriting/concepts.html
index 80e0c94eef..6522ee9f47 100644
--- a/packages/stacks-docs/brand/copywriting/concepts.html
+++ b/packages/stacks-docs/brand/copywriting/concepts.html
@@ -18,10 +18,10 @@
         
      10. Upvote and downvote (one word, no hyphen) should be used when referring to the individual types of votes cast on a post.
        11. 
         
      11. While the unit for score is obstensibly "points", use of this unit in reference to score or votes is not encouraged.
        12. 
     
-    
        
             
                 
        
                     Class
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/brand/copywriting/naming.html b/packages/stacks-docs/brand/copywriting/naming.html
index 18d54e69ac..ac03d2c7bf 100644
--- a/packages/stacks-docs/brand/copywriting/naming.html
+++ b/packages/stacks-docs/brand/copywriting/naming.html
@@ -6,10 +6,10 @@
 
 
        
     {% header "h2", "Stack Overflow" %}
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct{% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -26,10 +26,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct{% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct
         
        
         
             
        
 
     {% header "h2", "Stack Overflow for Teams" %}
-    
+    
        
-            
-            
+            
+            
@@ -99,10 +99,10 @@
         
      12. Where possible, use the unicode character for trade mark:
        13. 
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct{% icon "Clear", "mtn1 mbn1" %} Incorrect{% icon "Checkmark", "mtn1 mbn1" %} Correct
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -123,9 +123,9 @@
         
      13. Adding “…on Stack Overflow” doesn’t add clarity in the context of other Stack Overflow products and features.
        14. 
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
+            
@@ -155,10 +155,10 @@
         
      14. Even if you’re putting “Join a collective” on a button or in a headline, it will be lowercase unless it is directly following the name of a company.
        15. 
 
-    
        
         
        {% icon "Checkmark", "mtn1 mbn1" %} When to use “on Stack Overflow”{% icon "Checkmark", "mtn1 mbn1" %} When to use “on Stack Overflow”
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -188,10 +188,10 @@
         
      15. Lowercase for everything else
        16. 
     
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -207,10 +207,10 @@
         If a product or feature isn’t unique to Stack Overflow, don’t capitalize it (blogs, pages, etc.) If it is unique to Stack Overflow as its own product, do capitalize it.
     
        
     
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -233,10 +233,10 @@
         
      16. If you’re talking about the Articles section of your collective on Stack Overflow, you’ll call it “Articles.”
        17. 
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -264,10 +264,10 @@
         Capitalize user roles, no matter where they are and in what context.
     
        
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/examples/alt-text.html b/packages/stacks-docs/content/examples/alt-text.html
index 11e60ffc3f..9bc7959047 100644
--- a/packages/stacks-docs/content/examples/alt-text.html
+++ b/packages/stacks-docs/content/examples/alt-text.html
@@ -12,13 +12,13 @@
     
        
         It might sound obvious, but an alt-text should describe the image in case an image doesn’t display or someone has trouble seeing it. The goal of alt-text is to give the necessary information from the image at a glance. It’s best to include only the necessary information.
     
        
-    
        
+    
        
         Man and woman using laptops at a standing table, Illustration.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -40,10 +40,10 @@
     
        
         Don’t start alt-texts with things like “Image of” or “Photo of.”. Screen readers add that by default. If it’s a special type of image (like an icon), you can note that at the end.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/examples/error-messages.html b/packages/stacks-docs/content/examples/error-messages.html
index cd80ec76e0..94600fe847 100644
--- a/packages/stacks-docs/content/examples/error-messages.html
+++ b/packages/stacks-docs/content/examples/error-messages.html
@@ -61,10 +61,10 @@
     
        
         We want to help folks fix errors quickly, so error messages should be concise. Strip out unnecessary words. Keep detail only when it’s relevant.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -84,10 +84,10 @@
     
        
         Apologize when it’s the system’s fault and let the user know it’s not their fault. Use an active voice to accept responsibility. For example:
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -100,10 +100,10 @@
     
        
         Sometimes it’s the user’s fault, but there are ways to tell them without sounding like we’re pointing the finger. For example, we can focus on the desired action rather than telling the user they’ve messed up:
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -128,10 +128,10 @@
     
        
         Avoid mechanical language and jargon, opting for plain language at all times. The aim is to make a user feel like you’re there, helping them solve the error.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -143,10 +143,10 @@
     
        
         At the same time, error messages are not the place to be clever or make jokes. This will only muddy your message and add to your user’s frustration.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -165,10 +165,10 @@
         Always say what happens next. Buttons and links should make sense when read in isolation. Avoid just using things like “OK”. “OK” can be used to dismiss a message or take an action. Be clear to the user what they’re saying “OK” to.
     
        
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/examples/preferences-settings.html b/packages/stacks-docs/content/examples/preferences-settings.html
index 8b8449f81d..dad88d7b89 100644
--- a/packages/stacks-docs/content/examples/preferences-settings.html
+++ b/packages/stacks-docs/content/examples/preferences-settings.html
@@ -6,10 +6,10 @@
 
        
     {% header "h2", "Write labels in the affirmative" %}
     
        Preferences and settings should always be written in the affirmative—even if the preference is meant to disable a feature. When a user checks a feature preference, they should be getting that feature.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -134,10 +134,10 @@
         
      17. Show an example a valid input
        18. Avoid using tooltips.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
     
        
+    
        
-            
-            
+            
+            
@@ -229,10 +229,10 @@
     {% header "h2", "Don’t rely on placeholder text" %}
     
        Placeholder text can be used to show an example of a valid input.
        Placeholder text disappears once a character is typed in the input, so the user should be able to complete their task without placeholder text always visible.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/examples/success-messages.html b/packages/stacks-docs/content/examples/success-messages.html
index bc2af438b3..5b04b808c7 100644
--- a/packages/stacks-docs/content/examples/success-messages.html
+++ b/packages/stacks-docs/content/examples/success-messages.html
@@ -19,10 +19,10 @@
     
        
         A good success message provides clear information that the performed action was completed. It’s fine to let users know that what they did was successful, but even better to be specific about the action they took.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -41,10 +41,10 @@
     
        
         Tone is how you say something. Excitement makes sense for successfully finishing a large task, but avoid overdoing it for a regular system success. Limit exclamation marks to one per page.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -63,10 +63,10 @@
     
        
         Is the successful action part of a larger goal? Are there other recommended actions that need to be performed? Success messages can be a good way to guide the user to the next action for a more seamless interaction.
     
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
index afdd1a3e6d..8e1da6790c 100644
--- a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
+++ b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
@@ -7,10 +7,10 @@
     {% header "h2", "Basics" %}
     {% header "h3", "Use active tense (most of the time)" %}
     
        You should almost always write in the active voice, particularly if the user needs to do something.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -20,10 +20,10 @@
         
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
     
        While it’s generally best to avoid the passive voice, in certain situations it helps you sound softer without adding too many words. It’s especially useful for time-sensitive messages like payment confirmations and error messages. You can also use the passive voice to avoid referring to yourself or Stack Overflow.
        
-    
+    
        
-            
-            
+            
+            
@@ -39,10 +39,10 @@
 
     {% header "h3", "Use contractions" %}
     
        Contractions make copy sound more human. Avoid contractions that sound awkward when you say them out loud, or are not commonly used in everyday conversation.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -60,10 +60,10 @@
     
        Use sentence casing for all headings and calls-to-action. Proper or trademarked nouns (e.g. countries, product names) should be capitalized. If a feature or product is unique to Stack Overflow, capitalize it (Stack Overflow for Teams, Stack Overflow Jobs).
        
 
     {% header "h4", "Headings" %}
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -78,10 +78,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
 
     {% header "h4", "Buttons and links" %}
-    
+    
        
-            
-            
+            
+            
@@ -100,10 +100,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
 
     {% header "h4", "Feature or product names" %}
-    
+    
        
-            
-            
+            
+            
@@ -131,10 +131,10 @@
 
     {% header "h3", "Use American spelling and standards" %}
     
        Use American spelling for all public-facing content. When in doubt, check the Merriam-Webster dictionary for the preferred spelling of specific terms.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -158,10 +158,10 @@
 
     {% header "h3", "OK" %}
     
        Let’s use the abbreviated version of “OK”. This is preferred to “Okay” and its variants. “OK” should be fully capitalized in every context. Tonally, it may be appropriate to use “OK” in an actionable button—if it isn’t used alone.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -179,10 +179,10 @@
 
     {% header "h3", "Pronouns" %}
     
        We think it’s most clear to leave off any possessives when referring to users or features. However, if you must, refer to users as “you.” Don’t put words in their mouths with phrases that use “I” or “my.”
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -200,10 +200,10 @@
         
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
     
        When referring to Stack Overflow, use “we.” However, try to avoid inserting Stack Overflow into the content as much as possible.
        
-    
+    
        
-            
-            
+            
+            
@@ -213,10 +213,10 @@
         
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
     
        Use “their” as a singular, gender-neutral pronoun when the gender of the subject is unknown or unimportant. Avoid using gendered terms.
        
-    
+    
        
-            
-            
+            
+            
@@ -232,10 +232,10 @@
 
     {% header "h3", "Mind your verbs and nouns" %}
     
        Take extra care when using “login,” and “log in.” The former is a noun while the latter is a verb. Do not use “login” as a verb. The same logic applies to “signup,” “sign up.”
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -262,10 +262,10 @@
     {% header "h2", "Punctuation" %}
     {% header "h3", "Ampersands" %}
     
        Don’t use ampersands (&) unless it’s part of a branded term. Spell out the word “and” instead.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -281,10 +281,10 @@
 
     {% header "h3", "Apostrophes" %}
     
        Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’90s) and to form possessives.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -300,10 +300,10 @@
 
     {% header "h3", "Colons" %}
     
        Avoid using colons unless you’re introducing a list. If you need to use a colon in a sentence, don’t capitalize the first word after it.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -315,10 +315,10 @@
 
     {% header "h3", "Ellipses" %}
     
        The ellipses (…) can be used in place of a missing piece of text (most commonly to show the deletion of words from a quote). Avoid using ellipses in text. It’s appropriate to use an ellipses in input placeholder copy. Use the real single character ellipsis unicode (…) instead of three periods (...).
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -334,10 +334,10 @@
 
     {% header "h3", "Exclamation points" %}
     
        Don’t use exclamation points unless something is really exciting! If you have to use one, limit yourself to one exclamation mark per page.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -350,10 +350,10 @@
     {% header "h3", "Hyphens" %}
     
        Use hyphens to combine two words that modify or describe the noun that follows, or join prefixes and suffixes when there are two vowels beside each other.
        Use an en dash with no spaces in between (–) for a fixed range of numbers. Avoid using them in a sentence. Avoid using em dashes in microcopy.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -373,10 +373,10 @@
 
     {% header "h3", "Question marks" %}
     
        Avoid using question marks wherever possible. Reword into affirmative statements wherever you can. It’s okay to use question marks if you don’t know the result of the question (“Did you forget your email?”).
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -388,10 +388,10 @@
 
     {% header "h3", "Quotation marks" %}
     
        Use quotation marks to define words (“Accepted answer”) or to quote text. Always use smart, curly quotes (“), not vertical, straight quotes ("). Single curly quotes (’) can be used when nested within a set of double quotes. Place punctuation marks inside quotation marks.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -403,10 +403,10 @@
 
     {% header "h3", "Commas" %}
     
        Use the oxford comma in sentences. Don’t use a comma to separate two distinct phrases (comma splicing). Use two sentences instead.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -422,10 +422,10 @@
 
     {% header "h3", "Periods" %}
     
        Don’t use periods in interface copy unless it’s a full sentence or description.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -445,10 +445,10 @@
 
     {% header "h3", "Semicolons" %}
     
        Avoid using semicolons. When connecting two closely related ideas, use a comma or write two sentences.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t use periods in:{% icon "Checkmark", "mtn1 mbn1" %} Do use periods in:{% icon "Clear", "mtn1 mbn1" %} Don’t use periods in:{% icon "Checkmark", "mtn1 mbn1" %} Do use periods in:
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -465,10 +465,10 @@
     {% header "h3", "General" %}
     
        In most cases, use relative dates and times (eg. 3 minutes ago) with the exact date and time in the title attribute (eg. September 2, 2019 at 4:35 pm). When possible, use the longhand time (eg. 7 years ago). If there are space constraints, use the abbreviations below.
        
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -505,10 +505,10 @@
     
        Don’t write dates numerically since differing international standards can lead to confusion (eg. 08-12-19 vs. 12-08-19).
        There is no need to add st, nd, th, or rd to dates.
        
 
-    
        
         
        LonghandAbbreviationLonghandAbbreviation
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -532,10 +532,10 @@
     
        If indicating both the date and time, separate them with the word “at”, rather than with a comma (eg. September 2, 2019 at 4:35 pm) or “@” symbol (eg. September 2, 2019 @ 4:35 pm).
        Include a time zone only if it’s necessary, such as for an event listing (eg. 7 pm Eastern).
        
 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
+    
        
-            
-            
+            
+            
@@ -557,10 +557,10 @@
     {% header "h2", "Components" %}
     {% header "h3", "Buttons and links" %}
     
        Buttons and links should be clear and predictable. People should be able to anticipate what will happen when they click or tap. Button and link text should be sentence case and action led (starting with a verb). To provide enough context, use a verb+noun format except for common actions like Save or Close.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -576,10 +576,10 @@
 
     {% header "h3", "Headings and subheadings" %}
     
        All headings or subheadings should be concise, scannable, and sentence case. Don’t use periods at the end of headings. If a subheading is a full sentence, you may use a period. 
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -597,10 +597,10 @@
         
      18. If any list item contains two or more sentences, punctuate all list items.
      19. If all list items are one sentence or fragments, don’t punctuate.
        20. 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
         
     
        
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/guidelines/principles.html b/packages/stacks-docs/content/guidelines/principles.html
index b9dc4e1b62..c38930de2f 100644
--- a/packages/stacks-docs/content/guidelines/principles.html
+++ b/packages/stacks-docs/content/guidelines/principles.html
@@ -10,10 +10,10 @@
     
        
     {% header "h3", "Simple words" %}
     
        If there’s a simpler word to say what you mean, use it. Always choose the short, simple word over the long, complicated one. Don’t complicate your ideas with business or insider jargon. Only use jargon when you have reason to believe it will improve user understanding.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -44,10 +44,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Short, simple sentences" %}
     
        Trim word bloat. Don’t make people read more than they need to.
        
-    
+    
        
-            
-            
+            
+            
@@ -62,10 +62,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Jokes & cultural references" %}
     
        Be careful with jokes and cultural references. Jokes, idioms, slang, and regional or cultural references don’t always translate well for our global audience. The next time you’re making a reference, ask yourself if there’s a more universal way to make your point.
        
-    
+    
        
-            
-            
+            
+            
@@ -80,10 +80,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Naming" %}
     
        Pick names early and implement them consistently. Consistent language reduces the number of things your users have to learn or remember. If multiple names already exist, identify and eliminate them.
        
-    
+    
        
-            
-            
+            
+            
@@ -100,10 +100,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Exaggeration" %}
     
        Avoid exaggerated statements. When possible, back up your claims with facts and data. Be careful with adjectives and modifiers.
        
-    
+    
        
-            
-            
+            
+            
@@ -135,10 +135,10 @@
     
        Think about what people need to know right away, and move that information to the top.
        
     {% header "h3", "Use active voice" %}
     
        Use the active voice, particularly in product content. Start every CTA with a strong verb.
        
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
-            
-            
+            
+            
@@ -153,10 +153,10 @@
     
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Negative language" %}
     
        Be careful with negative language. It is usually longer, less friendly, and less active than positive language.
        
-    
+    
        
-            
-            
+            
+            
diff --git a/packages/stacks-docs/content/guidelines/voice-and-tone.html b/packages/stacks-docs/content/guidelines/voice-and-tone.html
index 33ae7742aa..c1dae8ad08 100644
--- a/packages/stacks-docs/content/guidelines/voice-and-tone.html
+++ b/packages/stacks-docs/content/guidelines/voice-and-tone.html
@@ -31,10 +31,10 @@
         
      20. Be straightforward about our mission to be a welcoming, inclusive community.
      21. Avoid us vs. them binaries (eg. newbies vs. power users)
        22. 
-    
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
         
     
        
+    
        
-            
-            
+            
+            
@@ -55,6 +55,7 @@
         
        
         
        {% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     
        
 
        
+
 
        
     {% header "h2", "Tone" %}
     
        
@@ -62,11 +63,11 @@
     
        
     {% header "h3", "Positive" %}
     
        In positive situations, a user may feel interest, curiosity, and/or delight. You can match those emotions by adopting an encouraging and friendly tone. If you’re writing good news like an announcement or confirmation, it’s ok to be more casual. 
        
-    
+    
        
-            
-            
-            
+            
+            
+            
@@ -83,11 +84,11 @@
     
        
         
        Context{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} DoContext{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Neutral" %}
     
        In neutral situations, the user may feel interest, curiosity, and/or stress. You can match these emotions by adopting a straightforward and helpful tone. If you’re providing instructions, provide enough detail to give the user confidence. Avoid telling the user how they should think or feel.
        
-    
+    
        
-            
-            
-            
+            
+            
+            
@@ -104,11 +105,11 @@
     
        
         
        Context{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} DoContext{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
     {% header "h3", "Negative" %}
     
        In negative situations, the user might be feeling confusion, stress, annoyance, and even anger. Match their emotions by adopting a gentle, calm, and serious tone. These are important moments to show readers that you care about their feelings. Write calmly so people can focus on your message. Avoid scary, technical terms and words like “alert,” “immediately,” or “urgent” unless they’re absolutely necessary. Let people know what went wrong, and tell them what they should do next
        
-    
+    
        
-            
-            
-            
+            
+            
+            
diff --git a/packages/stacks-docs/email/base/border-radius.html b/packages/stacks-docs/email/base/border-radius.html
index f6474b9dfd..703c3cd8a2 100644
--- a/packages/stacks-docs/email/base/border-radius.html
+++ b/packages/stacks-docs/email/base/border-radius.html
@@ -6,7 +6,7 @@
 
 
        
     {% header "h2", "Classes" %}
-    
        
         
        Context{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} DoContext{% icon "Clear", "mtn1 mbn1" %} Don’t{% icon "Checkmark", "mtn1 mbn1" %} Do
         
        
         
             
        
+    
        
@@ -16,17 +16,17 @@
         
-                
+                
-                
+                
-                
+                
diff --git a/packages/stacks-docs/email/base/mso.html b/packages/stacks-docs/email/base/mso.html
index 973b9125c4..b1bc3f56ea 100644
--- a/packages/stacks-docs/email/base/mso.html
+++ b/packages/stacks-docs/email/base/mso.html
@@ -40,6 +40,7 @@
         It’s the same thing we used to do to target old versions of Internet Explorer, except it targets Microsoft Office.
     
        
+
 
        
     {% header "h2", "Ghost tables" %}
     
        
@@ -68,6 +69,7 @@
         Without the ghost table above, Outlook would display the <div> at 100% width. Learn how we use ghost tables to make our emails responsive.
     
        
 
        
+
 
        
     {% header "h2", "Targeting specific Outlook versions" %}
     
        
@@ -78,19 +80,21 @@
         Using Microsoft Office version numbers allows you to target a specific Outlook version.
     
        
     
        
-        
        
         
             
        
                 Class
        
         
             
        .bar.bar
                 border-radius: 5px;
                 Rounding all four corners of a simple email.
             
        
             
        .btr.btr
                 border-top-left-radius: 5px;
        border-top-right-radius: 5px;        		
                 Rounding the top corners of a complex promotional email in one location…
             
        
             
        .bbr.bbr
                 border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;        		
                 …and rounding the bottom corners in another location.
             
        
 
        
+        
        
-                    
+                    
@@ -126,6 +130,7 @@
         
        
             
                 
        Outlook version(s)Outlook version(s)
                     Code
                
        
                     
             
                 
        
                     
-                        
        
-                            All Windows Outlook
-                            Most common
+                        
        
+                            
+                                All Windows Outlook
+                                Most common
+                            
                         
        		
                     <!--[if mso]>  your code  <![endif]-->
                 
        
     
 
        
+
 
        
     {% header "h3", "Conditional logic" %}
     
        
@@ -135,7 +140,7 @@
         Note: We tend to keep our designs simple and don’t use these very often. They’re here if you need them every once in a while, but if you find yourself reaching for these often, please open an issue or ask us about it.
     {% endtip %}
     
        
-        
+        
        
diff --git a/packages/stacks-docs/email/base/responsiveness.html b/packages/stacks-docs/email/base/responsiveness.html
index d48974c3aa..3627fa80c2 100644
--- a/packages/stacks-docs/email/base/responsiveness.html
+++ b/packages/stacks-docs/email/base/responsiveness.html
@@ -48,98 +48,99 @@
     
        
          Once a hybrid baseline is set, media queries can be used to fine-tune a responsive email layout. Since columns are (hopefully) already stacked, media queries can be used to change the width and text alignment in small viewports.
     
        
-    
        
             
                 
        
                     Code
        
+    
        
-                
+                
-                
+                
-                
+                
        
         
             
        ClassClass
                 Description
            
        
                 
         
             
        stack-columnstack-column
                 Makes table columns 100% wide and stacks them in source order.
             
        
             
        stack-column-centerstack-column-center
                 Makes table columns 100% wide, stacks them in source order, and centers everything inside.
             
        
                 
     
        
     {% include 'notice-email-head-support.html' %}
 
        
+
 
        
     {% header "h2", "Responsive spacing" %}
     
        
         Default desktop padding for email templates is 30px. Utility classes can be used to reduce spacing to 20px or remove padding on smaller viewports. Useful for tightening up email layouts on mobile.
     
        
-    
+    
        
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
-                
+                
diff --git a/packages/stacks-docs/email/components/footers.html b/packages/stacks-docs/email/components/footers.html
index 90bae3cfd8..4121ab35ba 100644
--- a/packages/stacks-docs/email/components/footers.html
+++ b/packages/stacks-docs/email/components/footers.html
@@ -13,7 +13,7 @@
         Depending on the type of email being sent and where it comes from, different footer options can be included or excluded.
     
        
-        
        
         
             
        ClassClass
                 Output
            
        
                 
         
             
        .sm-p-none.sm-p-none
                 padding: 0;
             
        
             
        .sm-pt-none.sm-pt-none
                 padding-top: 0;
             
        
             
        .sm-pb-none.sm-pb-none
                 padding-bottom: 0;
             
        
             
        .sm-pr-none.sm-pr-none
                 padding-right: 0;
             
        
             
        .sm-pl-none.sm-pl-none
                 padding-left: 0;
             
        
             
        .sm-py-none.sm-py-none
                 padding-top: 0; padding-bottom: 0;
             
        
             
        .sm-px-none.sm-px-none
                 padding-right: 0; padding-left: 0;
             
        
 
             
        .sm-p.sm-p
                 padding: 20px;
             
        
             
        .sm-pt.sm-pt
                 padding-top: 20px;
             
        
             
        .sm-pb.sm-pb
                 padding-bottom: 20px;
             
        
             
        .sm-pr.sm-pr
                 padding-right: 20px;
             
        
             
        .sm-pl.sm-pl
                 padding-left: 20px;
             
        
             
        .sm-py.sm-py
                 padding-top: 20px; padding-bottom: 20px;
             
        
             
        .sm-px.sm-px
                 padding-right: 20px; padding-left: 20px;
             
        
             
        .sm-mb.sm-mb
                 margin-bottom: 20px;
             
        
                 
     
        
+        
        
@@ -60,6 +60,9 @@
             
        
             
                 
        
                     Name
         
        
     
+
        
+
+
        
     {% header "h3", "Example" %}
     
        
 {% highlight html %}
diff --git a/packages/stacks-docs/email/components/spacers.html b/packages/stacks-docs/email/components/spacers.html
index 17d75fc655..19b665a9ad 100644
--- a/packages/stacks-docs/email/components/spacers.html
+++ b/packages/stacks-docs/email/components/spacers.html
@@ -21,9 +21,12 @@
             
        
         
     
+
        
+
+
        
     {% header "h3", "Syntax" %}
     
        
-        
+        
        
@@ -54,6 +57,9 @@
             
        
             
                 
        
                     Name
         
        
     
        
+
        
+
+
        
     {% header "h2", "Examples" %}
     {% header "h3", "Spacer between two table rows" %}
     
        Create separation between two table rows in the same section.
        
diff --git a/packages/stacks-docs/email/templates/long-transactional.html b/packages/stacks-docs/email/templates/long-transactional.html
index ed2751da1b..f476c17beb 100644
--- a/packages/stacks-docs/email/templates/long-transactional.html
+++ b/packages/stacks-docs/email/templates/long-transactional.html
@@ -4,11 +4,11 @@
 description: A starter template for more complex transactional emails that could contain multiple messages. This template is meant to be adapted and built upon.
 hide-menu: true
 ---
-
        
-    
+
        
+    
        
-            
-            
+            
+            
@@ -33,7 +33,13 @@
             
        
         
        {% icon "Checkmark" %} Good For:{% icon "Clear" %} Not So Good For:{% icon "Checkmark" %} Good For:{% icon "Clear" %} Not So Good For:
         
        
         
             
        
                 
     
        
+
        
+
+
        
     {% include 'notice-email-main-templates.html' %}
+
        
+
+