diff --git a/.changeset/sharp-baboons-smile.md b/.changeset/sharp-baboons-smile.md
new file mode 100644
index 0000000000..79fd2cd2e9
--- /dev/null
+++ b/.changeset/sharp-baboons-smile.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Removed deprecated grid container helper classes.
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
index 0e3663a67b..25f60de05c 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
@@ -58,6 +58,21 @@ export class MigrationV89Component extends LitElement {
$line-height-huge
+
+
+ Removed grid container helper classes
+ breaking
+
+
+ .vertical-gutters
+ .row.border-gutters
+ .container-reset
+ -
+
.container-reset-left
and .container-reset-right
+
+ .container-fluid-#{$breakpoint}
+
+
diff --git a/packages/styles/src/components/grid.scss b/packages/styles/src/components/grid.scss
index 7d3a29e3c2..781d6865f8 100644
--- a/packages/styles/src/components/grid.scss
+++ b/packages/styles/src/components/grid.scss
@@ -86,85 +86,3 @@ $gutter-x-cache: 0;
}
}
}
-
-//the following classes are all deprecated and wil be removed in next major version
-
-//deprecated
-.vertical-gutters {
- margin-bottom: grid.$grid-gutter-width * -1;
-
- > .col,
- > [class*='col-'] {
- padding-bottom: grid.$grid-gutter-width;
- }
-}
-
-//deprecated
-// border-gutters class is used to manipulate border collapse
-.row.border-gutters {
- margin-right: -(commons.$border-width);
- margin-bottom: -(commons.$border-width);
- margin-left: 0;
-
- > .col,
- > [class*='col-'] {
- padding-right: commons.$border-width;
- padding-bottom: commons.$border-width;
- padding-left: 0;
- }
-}
-
-//deprecated
-$container-cache: 0;
-
-//deprecated
-@each $breakpoint in grid.$grid-breakpoints-list {
- $container-padding: map.get(grid.$grid-container-padding, $breakpoint);
-
- // Ensure this breakpoint is only overwritten when the padding differs from the last breakpoint
- @if ($container-cache != $container-padding) {
- .container-reset {
- @if $breakpoint == 'xs' {
- margin-right: -($container-padding);
- margin-left: -($container-padding);
- } @else {
- @include media-breakpoint-up($breakpoint) {
- margin-right: -($container-padding);
- margin-left: -($container-padding);
- }
- }
- }
-
- .container-reset-left {
- @if $breakpoint== 'xs' {
- margin-left: -($container-padding);
- } @else {
- @include media-breakpoint-up($breakpoint) {
- margin-left: -($container-padding);
- }
- }
- }
-
- .container-reset-right {
- @if $breakpoint== 'xs' {
- margin-right: -($container-padding);
- } @else {
- @include media-breakpoint-up($breakpoint) {
- margin-right: -($container-padding);
- }
- }
- }
- }
-
- //deprecated
- // Container fluid responsive needs to be written every time
- .container-fluid-#{$breakpoint} {
- @include media-breakpoint-only($breakpoint) {
- padding-right: spacing.$spacer;
- padding-left: spacing.$spacer;
- }
- }
-
- //deprecated
- $container-cache: $container-padding;
-}
diff --git a/packages/styles/src/layouts/portal/_grid.scss b/packages/styles/src/layouts/portal/_grid.scss
index 08cec5b241..b304774879 100644
--- a/packages/styles/src/layouts/portal/_grid.scss
+++ b/packages/styles/src/layouts/portal/_grid.scss
@@ -48,38 +48,4 @@
margin-left: 0;
}
}
-
- //deprecated
- .vertical-gutters {
- margin-bottom: -(portal-variables.$grid-gutter-width-rg);
-
- > .col,
- > [class*='col-'] {
- padding-bottom: portal-variables.$grid-gutter-width-rg;
- }
- }
-}
-
-//deprecated
-@each $breakpoint in grid.$grid-breakpoints-list {
- .container-fluid-#{$breakpoint} {
- @include media-breakpoint-only($breakpoint) {
- padding-right: 0;
- padding-left: 0;
- }
- }
-}
-
-//deprecated
-.container-reset-right-rg-up {
- @include media-breakpoint-up(rg) {
- margin-left: 0;
- }
-}
-
-//deprecated
-.container-reset-left-rg-up {
- @include media-breakpoint-up(rg) {
- margin-right: 0;
- }
}