From 18ce8c759412e37fb4d838cec4a8d62ae62b210e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Mar 2026 19:35:44 +0000 Subject: [PATCH 1/7] Initial plan From ebc0020ad84b9fd6e7720724acf30cf6246ff91a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Mar 2026 19:38:28 +0000 Subject: [PATCH 2/7] feat(skin): add Playbook-aligned breakpoint LESS variables Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 9 +++++++++ packages/skin/src/sass/variables/variables.less | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index f9112f0e4b..16f6d2f0fd 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -13,6 +13,15 @@ @_screen-size-XL3: 1680px; @_screen-size-XL4: 1920px; +// Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) +@breakpoint-extra-small: 320px; +@breakpoint-small: 512px; +@breakpoint-medium: 600px; +@breakpoint-large: 800px; +@breakpoint-extra-large: 1100px; +@breakpoint-extra-large-2: 1400px; +@breakpoint-extra-large-3: 1920px; + @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; @_page-grid-number-cols-large: 16; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index f9112f0e4b..16f6d2f0fd 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -13,6 +13,15 @@ @_screen-size-XL3: 1680px; @_screen-size-XL4: 1920px; +// Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) +@breakpoint-extra-small: 320px; +@breakpoint-small: 512px; +@breakpoint-medium: 600px; +@breakpoint-large: 800px; +@breakpoint-extra-large: 1100px; +@breakpoint-extra-large-2: 1400px; +@breakpoint-extra-large-3: 1920px; + @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; @_page-grid-number-cols-large: 16; From 4f733e455736e1ddbbc6d560cdc52e5da4ba1992 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Mar 2026 19:45:42 +0000 Subject: [PATCH 3/7] feat(skin): use CSS variable references for breakpoint LESS variables Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 14 +++++++------- packages/skin/src/sass/variables/variables.less | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index 16f6d2f0fd..791f328648 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -14,13 +14,13 @@ @_screen-size-XL4: 1920px; // Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) -@breakpoint-extra-small: 320px; -@breakpoint-small: 512px; -@breakpoint-medium: 600px; -@breakpoint-large: 800px; -@breakpoint-extra-large: 1100px; -@breakpoint-extra-large-2: 1400px; -@breakpoint-extra-large-3: 1920px; +@breakpoint-extra-small: var(--breakpoint-extra-small); +@breakpoint-small: var(--breakpoint-small); +@breakpoint-medium: var(--breakpoint-medium); +@breakpoint-large: var(--breakpoint-large); +@breakpoint-extra-large: var(--breakpoint-extra-large); +@breakpoint-extra-large-2: var(--breakpoint-extra-large-2); +@breakpoint-extra-large-3: var(--breakpoint-extra-large-3); @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index 16f6d2f0fd..791f328648 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -14,13 +14,13 @@ @_screen-size-XL4: 1920px; // Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) -@breakpoint-extra-small: 320px; -@breakpoint-small: 512px; -@breakpoint-medium: 600px; -@breakpoint-large: 800px; -@breakpoint-extra-large: 1100px; -@breakpoint-extra-large-2: 1400px; -@breakpoint-extra-large-3: 1920px; +@breakpoint-extra-small: var(--breakpoint-extra-small); +@breakpoint-small: var(--breakpoint-small); +@breakpoint-medium: var(--breakpoint-medium); +@breakpoint-large: var(--breakpoint-large); +@breakpoint-extra-large: var(--breakpoint-extra-large); +@breakpoint-extra-large-2: var(--breakpoint-extra-large-2); +@breakpoint-extra-large-3: var(--breakpoint-extra-large-3); @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; From 5c8b68f04d7133b8025904cd47f8821004f22321 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Mar 2026 19:58:23 +0000 Subject: [PATCH 4/7] feat(skin): update @_screen-size-* LESS variables to use CSS variable references Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 24 ++++++------------- .../skin/src/sass/variables/variables.less | 24 ++++++------------- 2 files changed, 14 insertions(+), 34 deletions(-) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index 791f328648..dcd4cc3a00 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -4,23 +4,13 @@ // most mobile devices would be higher in screen width than the smallest viewport width. // The variables with underscores are to be considered constants. They can be read, but should not be modified. -@_screen-size-XS: 320px; -@_screen-size-SM: 512px; -@_screen-size-MD: 768px; -@_screen-size-LG: 1024px; -@_screen-size-XL: 1280px; -@_screen-size-XL2: 1440px; -@_screen-size-XL3: 1680px; -@_screen-size-XL4: 1920px; - -// Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) -@breakpoint-extra-small: var(--breakpoint-extra-small); -@breakpoint-small: var(--breakpoint-small); -@breakpoint-medium: var(--breakpoint-medium); -@breakpoint-large: var(--breakpoint-large); -@breakpoint-extra-large: var(--breakpoint-extra-large); -@breakpoint-extra-large-2: var(--breakpoint-extra-large-2); -@breakpoint-extra-large-3: var(--breakpoint-extra-large-3); +@_screen-size-XS: var(--breakpoint-extra-small); +@_screen-size-SM: var(--breakpoint-small); +@_screen-size-MD: var(--breakpoint-medium); +@_screen-size-LG: var(--breakpoint-large); +@_screen-size-XL: var(--breakpoint-extra-large); +@_screen-size-XL2: var(--breakpoint-extra-large-2); +@_screen-size-XL3: var(--breakpoint-extra-large-3); @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index 791f328648..dcd4cc3a00 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -4,23 +4,13 @@ // most mobile devices would be higher in screen width than the smallest viewport width. // The variables with underscores are to be considered constants. They can be read, but should not be modified. -@_screen-size-XS: 320px; -@_screen-size-SM: 512px; -@_screen-size-MD: 768px; -@_screen-size-LG: 1024px; -@_screen-size-XL: 1280px; -@_screen-size-XL2: 1440px; -@_screen-size-XL3: 1680px; -@_screen-size-XL4: 1920px; - -// Playbook breakpoints - these align with the CSS custom property values (--breakpoint-*) -@breakpoint-extra-small: var(--breakpoint-extra-small); -@breakpoint-small: var(--breakpoint-small); -@breakpoint-medium: var(--breakpoint-medium); -@breakpoint-large: var(--breakpoint-large); -@breakpoint-extra-large: var(--breakpoint-extra-large); -@breakpoint-extra-large-2: var(--breakpoint-extra-large-2); -@breakpoint-extra-large-3: var(--breakpoint-extra-large-3); +@_screen-size-XS: var(--breakpoint-extra-small); +@_screen-size-SM: var(--breakpoint-small); +@_screen-size-MD: var(--breakpoint-medium); +@_screen-size-LG: var(--breakpoint-large); +@_screen-size-XL: var(--breakpoint-extra-large); +@_screen-size-XL2: var(--breakpoint-extra-large-2); +@_screen-size-XL3: var(--breakpoint-extra-large-3); @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; From 057fb825a63e2d8dec47e8cfe49c31d778fb88ad Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 10 Mar 2026 21:35:22 +0000 Subject: [PATCH 5/7] feat(skin): restore @_screen-size-XL4 as hardcoded 1920px value Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 1 + packages/skin/src/sass/variables/variables.less | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index dcd4cc3a00..305ee923e6 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -11,6 +11,7 @@ @_screen-size-XL: var(--breakpoint-extra-large); @_screen-size-XL2: var(--breakpoint-extra-large-2); @_screen-size-XL3: var(--breakpoint-extra-large-3); +@_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index dcd4cc3a00..305ee923e6 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -11,6 +11,7 @@ @_screen-size-XL: var(--breakpoint-extra-large); @_screen-size-XL2: var(--breakpoint-extra-large-2); @_screen-size-XL3: var(--breakpoint-extra-large-3); +@_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px; @_page-grid-number-cols-small: 8; From e81042c80d6d0718af8282065b7d8db8e266468c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 16 Mar 2026 20:56:33 +0000 Subject: [PATCH 6/7] feat(skin): use hardcoded px values for @_screen-size-* to match SASS breakpoints Co-authored-by: ArtBlue <1675667+ArtBlue@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 14 +++++++------- packages/skin/src/sass/variables/variables.less | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index 305ee923e6..f9112f0e4b 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -4,13 +4,13 @@ // most mobile devices would be higher in screen width than the smallest viewport width. // The variables with underscores are to be considered constants. They can be read, but should not be modified. -@_screen-size-XS: var(--breakpoint-extra-small); -@_screen-size-SM: var(--breakpoint-small); -@_screen-size-MD: var(--breakpoint-medium); -@_screen-size-LG: var(--breakpoint-large); -@_screen-size-XL: var(--breakpoint-extra-large); -@_screen-size-XL2: var(--breakpoint-extra-large-2); -@_screen-size-XL3: var(--breakpoint-extra-large-3); +@_screen-size-XS: 320px; +@_screen-size-SM: 512px; +@_screen-size-MD: 768px; +@_screen-size-LG: 1024px; +@_screen-size-XL: 1280px; +@_screen-size-XL2: 1440px; +@_screen-size-XL3: 1680px; @_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index 305ee923e6..f9112f0e4b 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -4,13 +4,13 @@ // most mobile devices would be higher in screen width than the smallest viewport width. // The variables with underscores are to be considered constants. They can be read, but should not be modified. -@_screen-size-XS: var(--breakpoint-extra-small); -@_screen-size-SM: var(--breakpoint-small); -@_screen-size-MD: var(--breakpoint-medium); -@_screen-size-LG: var(--breakpoint-large); -@_screen-size-XL: var(--breakpoint-extra-large); -@_screen-size-XL2: var(--breakpoint-extra-large-2); -@_screen-size-XL3: var(--breakpoint-extra-large-3); +@_screen-size-XS: 320px; +@_screen-size-SM: 512px; +@_screen-size-MD: 768px; +@_screen-size-LG: 1024px; +@_screen-size-XL: 1280px; +@_screen-size-XL2: 1440px; +@_screen-size-XL3: 1680px; @_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px; From 8efb2afe43172f063a47576af329c51b61161177 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 18 Mar 2026 20:39:42 +0000 Subject: [PATCH 7/7] feat(skin): update @_screen-size-* LESS variables to Playbook-aligned values Co-authored-by: LuLaValva <26027232+LuLaValva@users.noreply.github.com> --- packages/skin/dist/variables/variables.less | 10 +++++----- packages/skin/src/sass/variables/variables.less | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/skin/dist/variables/variables.less b/packages/skin/dist/variables/variables.less index f9112f0e4b..6f94ce7940 100644 --- a/packages/skin/dist/variables/variables.less +++ b/packages/skin/dist/variables/variables.less @@ -6,11 +6,11 @@ // The variables with underscores are to be considered constants. They can be read, but should not be modified. @_screen-size-XS: 320px; @_screen-size-SM: 512px; -@_screen-size-MD: 768px; -@_screen-size-LG: 1024px; -@_screen-size-XL: 1280px; -@_screen-size-XL2: 1440px; -@_screen-size-XL3: 1680px; +@_screen-size-MD: 600px; +@_screen-size-LG: 800px; +@_screen-size-XL: 1100px; +@_screen-size-XL2: 1400px; +@_screen-size-XL3: 1920px; @_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px; diff --git a/packages/skin/src/sass/variables/variables.less b/packages/skin/src/sass/variables/variables.less index f9112f0e4b..6f94ce7940 100644 --- a/packages/skin/src/sass/variables/variables.less +++ b/packages/skin/src/sass/variables/variables.less @@ -6,11 +6,11 @@ // The variables with underscores are to be considered constants. They can be read, but should not be modified. @_screen-size-XS: 320px; @_screen-size-SM: 512px; -@_screen-size-MD: 768px; -@_screen-size-LG: 1024px; -@_screen-size-XL: 1280px; -@_screen-size-XL2: 1440px; -@_screen-size-XL3: 1680px; +@_screen-size-MD: 600px; +@_screen-size-LG: 800px; +@_screen-size-XL: 1100px; +@_screen-size-XL2: 1400px; +@_screen-size-XL3: 1920px; @_screen-size-XL4: 1920px; @_page-grid-max-width: 1584px;