Merge pull request #4860 from open-formulieren/task/3283-drop-styling…

…-backwards-compatibility

Removing old/deprecated design tokens

src/openforms/ui/static/ui/scss/components/_page-footer.scss

@@ -19,29 +19,22 @@
     var(--of-utrecht-page-footer-max-inline-size)
   );
 
-  // TODO: Open Forms 3.0 - set the property directly instead of using custom property.
-  --_padding-block-end: var(
+  padding-block-end: var(
     #{$prefix}-padding-block-end,
     var(--utrecht-page-footer-padding-block-end)
   );
-  --_padding-block-start: var(
+  padding-block-start: var(
     #{$prefix}-padding-block-start,
     var(--utrecht-page-footer-padding-block-start)
   );
-  --_padding-inline-end: var(
+  padding-inline-end: var(
     #{$prefix}-padding-inline-end,
     var(--utrecht-page-footer-padding-inline-end)
   );
-  --_padding-inline-start: var(
+  padding-inline-start: var(
     #{$prefix}-padding-inline-start,
     var(--utrecht-page-footer-padding-inline-start)
   );
-
-  // backwards compatibility - remove this in Open Forms 3.0
-  --_padding-shorthand: var(--_padding-block-start) var(--_padding-inline-end)
-    var(--_padding-block-end) var(--_padding-inline-start);
-
-  padding: var(--of-page-footer-#{$viewport}-padding, var(--_padding-shorthand));
 }
 
 // Open Forms extensions - add opt-in support for responsive spacing.
@@ -70,10 +63,6 @@
     margin-inline-end: auto;
     margin-inline-start: auto;
   }
-
-  // backwards compatibility - remove this in Open Forms 3.0
-  background-color: var(--of-page-footer-bg, var(--utrecht-page-footer-background-color));
-  color: var(--of-page-footer-fg, var(--utrecht-page-footer-color));
 }
 
 // Style overrides specific for our own theme

src/openforms/ui/static/ui/scss/components/_page-header.scss

@@ -16,29 +16,22 @@
 @mixin add-responsive-styles($viewport) {
   $prefix: --of-utrecht-page-header-#{$viewport};
 
-  // TODO: Open Forms 3.0 - set the property directly instead of using custom property.
-  --_padding-block-end: var(
+  padding-block-end: var(
     #{$prefix}-padding-block-end,
     var(--utrecht-page-header-padding-block-end)
   );
-  --_padding-block-start: var(
+  padding-block-start: var(
     #{$prefix}-padding-block-start,
     var(--utrecht-page-header-padding-block-start)
   );
-  --_padding-inline-end: var(
+  padding-inline-end: var(
     #{$prefix}-padding-inline-end,
     var(--utrecht-page-header-padding-inline-end)
   );
-  --_padding-inline-start: var(
+  padding-inline-start: var(
     #{$prefix}-padding-inline-start,
     var(--utrecht-page-header-padding-inline-start)
   );
-
-  // backwards compatibility - remove this in Open Forms 3.0
-  --_padding-shorthand: var(--_padding-block-start) var(--_padding-inline-end)
-    var(--_padding-block-end) var(--_padding-inline-start);
-
-  padding: var(--of-page-header-#{$viewport}-padding, var(--_padding-shorthand));
 }
 
 // Open Forms extensions - add opt-in support for responsive spacing.
@@ -59,9 +52,6 @@
     @include add-responsive-styles('desktop');
   }
 
-  // backwards compatibility - remove this in Open Forms 3.0
-  background-color: var(--of-page-header-bg, var(--utrecht-page-header-background-color));
-
   // Logo extensions on top of utrecht-page-header.
   @include bem.modifier('openforms-with-logo') {
     @include bem.element('openforms-return-url') {

src/openforms/ui/static/ui/scss/components/_page.scss

@@ -5,24 +5,15 @@
  */
 .openforms-theme {
   .utrecht-page {
-    // backwards compatibility
-    // TODO: remove in Open Forms 3.0
-    --utrecht-page-max-inline-size: 100%;
-
     @include desktop {
       --utrecht-page-max-inline-size: 1200px;
     }
 
-    --utrecht-page-background-color: var(
-      --of-view-background,
-      var(--of-layout-background, #e6e6e6)
-    );
+    --utrecht-page-background-color: var(--of-view-background, #e6e6e6);
 
     margin-block-end: var(--of-utrecht-page-margin-block-end, 0);
     margin-block-start: var(--of-utrecht-page-margin-block-start, 0);
-    // Backwards compatible design token
-    // TODO: remove of-layout support in Open Forms 3.0
-    background-color: var(--of-layout-background-color, var(--utrecht-page-background-color));
+    background-color: var(--utrecht-page-background-color);
 
     .utrecht-page-content {
       box-sizing: border-box;