From bc732f0c6adcf5007a84c6eebc4f14f9dc972720 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:19:36 +0100
Subject: [PATCH 01/12] adjust p-nudge

Adjusted the p-nudge for default text to align better to the baseline grid. Also other small fixes to align components that depend on p-nudge better to the baseline grid.
---
 scss/_base_button.scss                         |  2 +-
 scss/_base_details.scss                        |  1 -
 scss/_base_forms.scss                          |  9 +++++++--
 scss/_settings_spacing.scss                    | 10 +++++-----
 templates/docs/examples/base/forms/labels.html |  2 +-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index bc8f966510..1e015e5bbd 100644
--- a/scss/_base_button.scss
+++ b/scss/_base_button.scss
@@ -26,7 +26,7 @@
     justify-content: center;
     line-height: map-get($line-heights, default-text);
     margin: 0 $sph--large $input-margin-bottom 0;
-    padding: $input-vertical-padding $sph--large;
+    padding: calc($input-vertical-padding - $input-border-thickness) $sph--large; //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
     text-align: center;
     text-decoration: none;
 
diff --git a/scss/_base_details.scss b/scss/_base_details.scss
index 75b7228809..0d210ffe01 100644
--- a/scss/_base_details.scss
+++ b/scss/_base_details.scss
@@ -9,7 +9,6 @@
     @extend %common-default-text-properties;
     @include vf-focus;
 
-    margin-bottom: $spv-nudge; //push subsequent text onto baseline
     max-width: $text-max-width;
     padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
   }
diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index cca4deb666..3c30e9a703 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -30,7 +30,9 @@
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: $input-margin-bottom;
+    margin-bottom: calc(
+      $input-margin-bottom - 1px
+    ); //need to account for border, I set 1px directly cause suppixel rendering will ceil border to 1px and margin/padding are left on decimals
     min-width: 8em;
     padding-left: $sph--small;
     padding-right: $sph--small;
@@ -122,6 +124,7 @@
     max-width: $text-max-width;
     padding-top: map-get($nudges, p);
     width: fit-content;
+    line-height: map-get($line-heights, default-text); // on larger screens the label would have the wrong line height?
 
     &.is-required::before {
       content: '* ';
@@ -231,7 +234,9 @@
   textarea {
     @extend %vf-input-elements;
 
-    margin-bottom: $input-margin-bottom;
+    margin-bottom: calc(
+      $input-margin-bottom - 1px
+    ); //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
     overflow: auto;
     vertical-align: top;
   }
diff --git a/scss/_settings_spacing.scss b/scss/_settings_spacing.scss
index f1d6a73f0d..b2d44ff55e 100644
--- a/scss/_settings_spacing.scss
+++ b/scss/_settings_spacing.scss
@@ -52,10 +52,10 @@ $nudges: (
   h4-large: 0.45rem,
   h4: 0.45rem,
   h4-mobile: 0.45rem,
-  h5: 0.4rem,
-  h6: 0.4rem,
-  h6-large: 0.4rem,
-  p: 0.4rem,
+  h5: 0.375rem,
+  h6: 0.375em,
+  h6-large: 0.375rem,
+  p: 0.375rem,
   p-ubuntumono: 0.45rem,
   small: 0.05rem,
   x-small: 0.25rem,
@@ -117,7 +117,7 @@ $sp-after: (
 $spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
-$input-vertical-padding: calc($spv-nudge - 1px);
+$input-vertical-padding: $spv-nudge; //moved the -1px to the components themselfs since its different for button / input field
 
 // tick element variables
 $form-tick-box-size: 1rem;
diff --git a/templates/docs/examples/base/forms/labels.html b/templates/docs/examples/base/forms/labels.html
index 5d3b3c466f..526fdd3aea 100644
--- a/templates/docs/examples/base/forms/labels.html
+++ b/templates/docs/examples/base/forms/labels.html
@@ -9,7 +9,7 @@
   <input type="email" id="exampleTextInput" name="exampleTextInput" placeholder="example@canonical.com" autocomplete="email"/>
   <label for="textarea">Tell us about your project or interest</label>
   <textarea id="textarea" name="textarea" rows="3" name="textareaExample1">Ubuntu</textarea>
-  <label for="textarea2">Data privay</label>
+  <label for="textarea2">Data privacy</label>
   <textarea id="textarea2" name="textarea2" rows="3" readonly="readonly" name="textareaExample2">Read-only</textarea>
 </form>
 {% endblock %}

From b69c49687da76cb1ee27b4159b0b372eac44496b Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:21:27 +0100
Subject: [PATCH 02/12] Update _base_forms.scss

---
 scss/_base_forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 3c30e9a703..4fd76d875b 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -31,7 +31,7 @@
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
     margin-bottom: calc(
-      $input-margin-bottom - 1px
+      $input-margin-bottom - $input-border-thickness
     ); //need to account for border, I set 1px directly cause suppixel rendering will ceil border to 1px and margin/padding are left on decimals
     min-width: 8em;
     padding-left: $sph--small;

From 381888faed8e9735b934099235a011258e57c6bd Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:55:47 +0100
Subject: [PATCH 03/12] moved accounting of border to padding

---
 scss/_base_forms.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 4fd76d875b..158e86b243 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -6,7 +6,9 @@
   @include vf-b-range;
   // Used in buttons, inputs
   %bordered-text-vertical-padding {
-    padding-bottom: $input-vertical-padding;
+    padding-bottom: calc(
+      $input-vertical-padding - $input-border-thickness
+    ); //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
     padding-top: $input-vertical-padding;
   }
 
@@ -30,9 +32,7 @@
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: calc(
-      $input-margin-bottom - $input-border-thickness
-    ); //need to account for border, I set 1px directly cause suppixel rendering will ceil border to 1px and margin/padding are left on decimals
+    margin-bottom: $input-margin-bottom;
     min-width: 8em;
     padding-left: $sph--small;
     padding-right: $sph--small;

From 2acf13ae1a52d2acdccedd2e87c88d63cfb93301 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:05:34 +0100
Subject: [PATCH 04/12] fix hardcoded value

---
 scss/_base_forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 158e86b243..32bf7b69e9 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -235,7 +235,7 @@
     @extend %vf-input-elements;
 
     margin-bottom: calc(
-      $input-margin-bottom - 1px
+      $input-margin-bottom - $input-border-thickness
     ); //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
     overflow: auto;
     vertical-align: top;

From df3853c0c67f79a5410d643d5ec78eb6257dc14e Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:47:12 +0100
Subject: [PATCH 05/12] fixed property ordering

---
 scss/_base_forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 32bf7b69e9..d30a54ff91 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -119,12 +119,12 @@
   label {
     cursor: pointer;
     display: inline-block;
+    line-height: map-get($line-heights, default-text); // on larger screens the label would have the wrong line height?
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $text-max-width;
     padding-top: map-get($nudges, p);
     width: fit-content;
-    line-height: map-get($line-heights, default-text); // on larger screens the label would have the wrong line height?
 
     &.is-required::before {
       content: '* ';

From 97922d60f3c1e98c0762668aceac627065a6febb Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 24 Jan 2024 18:42:40 +0100
Subject: [PATCH 06/12] Update _base_forms.scss

---
 scss/_base_forms.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index d30a54ff91..402b56dc41 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -234,9 +234,7 @@
   textarea {
     @extend %vf-input-elements;
 
-    margin-bottom: calc(
-      $input-margin-bottom - $input-border-thickness
-    ); //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
+    margin-bottom: $input-margin-bottom;
     overflow: auto;
     vertical-align: top;
   }

From fb6ff2cc3a4c76da9550a64adbcc09e78cbeac31 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Thu, 25 Jan 2024 17:33:33 +0100
Subject: [PATCH 07/12] actually it has nothing to do with subpixel rendering

---
 scss/_base_button.scss | 2 +-
 scss/_base_forms.scss  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index 1e015e5bbd..251a7323b4 100644
--- a/scss/_base_button.scss
+++ b/scss/_base_button.scss
@@ -26,7 +26,7 @@
     justify-content: center;
     line-height: map-get($line-heights, default-text);
     margin: 0 $sph--large $input-margin-bottom 0;
-    padding: calc($input-vertical-padding - $input-border-thickness) $sph--large; //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
+    padding: calc($input-vertical-padding - $input-border-thickness) $sph--large; //need to account for border, however due to how browsers render decimal pixels, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
     text-align: center;
     text-decoration: none;
 
diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 402b56dc41..d5dd78337d 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -6,9 +6,12 @@
   @include vf-b-range;
   // Used in buttons, inputs
   %bordered-text-vertical-padding {
-    padding-bottom: calc(
-      $input-vertical-padding - $input-border-thickness
-    ); //need to account for border, however suppixel rendering will, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
+    padding-bottom: calc($input-vertical-padding - $input-border-thickness);
+
+    @media only screen and (max-resolution: 1.99dppx) {
+      padding-bottom: calc($input-vertical-padding - 1px);
+    }
+
     padding-top: $input-vertical-padding;
   }
 

From 65846d2430a9b359b19cdce4b3f126a1ab05ad19 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Thu, 2 May 2024 09:32:03 +0200
Subject: [PATCH 08/12] use CSS variable

---
 scss/_base_button.scss                 | 14 +++++++-------
 scss/_base_code.scss                   |  2 +-
 scss/_base_forms-range.scss            |  2 +-
 scss/_base_forms.scss                  | 17 ++++++-----------
 scss/_patterns_contextual-menu.scss    |  4 ++--
 scss/_patterns_form-tick-elements.scss |  4 ++--
 scss/_patterns_search-and-filter.scss  |  4 ++--
 scss/_patterns_segmented-control.scss  |  2 +-
 scss/_patterns_switch.scss             |  4 ++--
 scss/_settings_placeholders.scss       | 14 ++++++++++++--
 10 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index d0090d1285..86888a2ba4 100644
--- a/scss/_base_button.scss
+++ b/scss/_base_button.scss
@@ -9,8 +9,8 @@
   }
 
   %vf-button-dense-vertical-padding {
-    padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
-    padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+    padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
+    padding-top: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
   }
 
   %vf-button-base {
@@ -18,7 +18,7 @@
     @include vf-focus;
 
     border-style: solid;
-    border-width: $input-border-thickness;
+    border-width: var(--input-border-thickness);
     cursor: pointer;
     display: inline-block;
     font-size: 1rem;
@@ -26,7 +26,7 @@
     justify-content: center;
     line-height: map-get($line-heights, default-text);
     margin: 0 $sph--large $input-margin-bottom 0;
-    padding: calc($input-vertical-padding - $input-border-thickness) $sph--large; //need to account for border, however due to how browsers render decimal pixels, on certain screens, ceil the border to 1px but there would still be 1.5px removed from the margin which would drift the baseline
+    padding: calc($input-vertical-padding - var(--input-border-thickness)) $sph--large;
     text-align: center;
     text-decoration: none;
 
@@ -56,13 +56,13 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(map-get($nudges, small) - $input-border-thickness) $sph--small;
+      padding: calc(map-get($nudges, small) - var(--input-border-thickness)) $sph--small;
     }
 
     &.is-small.is-dense {
       margin-bottom: $spv-nudge-compensation;
-      padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
-      padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+      padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
+      padding-top: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
     }
 
     // The following rules address buttons nested in <p>'s;
diff --git a/scss/_base_code.scss b/scss/_base_code.scss
index 2a844f28eb..b3af255bb1 100644
--- a/scss/_base_code.scss
+++ b/scss/_base_code.scss
@@ -28,7 +28,7 @@ $code-inline-padding: 0.25rem;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
-    padding: calc($code-inline-padding - $input-border-thickness) $code-inline-padding;
+    padding: calc($code-inline-padding - var(--input-border-thickness)) $code-inline-padding;
   }
 
   code,
diff --git a/scss/_base_forms-range.scss b/scss/_base_forms-range.scss
index e282f0f2ea..70be11cbfd 100644
--- a/scss/_base_forms-range.scss
+++ b/scss/_base_forms-range.scss
@@ -2,7 +2,7 @@
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
   $thumb-size: 1rem;
   $thumb-radius: 50%;
-  $thumb-border: $input-border-thickness solid $colors--theme--border-high-contrast;
+  $thumb-border: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
   $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 
diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index d63b890692..1438b4c899 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -6,12 +6,7 @@
   @include vf-b-range;
   // Used in buttons, inputs
   %bordered-text-vertical-padding {
-    padding-bottom: calc($input-vertical-padding - $input-border-thickness);
-
-    @media only screen and (max-resolution: 1.99dppx) {
-      padding-bottom: calc($input-vertical-padding - 1px);
-    }
-
+    padding-bottom: calc($input-vertical-padding - var(--input-border-thickness));
     padding-top: $input-vertical-padding;
   }
 
@@ -28,7 +23,7 @@
     // stylelint-enable property-no-vendor-prefix
     background-color: $colors--theme--background-inputs;
     border: 0 solid transparent;
-    border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
+    border-bottom: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
     border-radius: 0;
     color: $colors--theme--text-default;
     font-family: unquote($font-base-family);
@@ -69,8 +64,8 @@
 
     &.is-dense {
       margin: 0 0 $spv-nudge-compensation 0;
-      padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
-      padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);
+      padding-bottom: calc($spv-nudge - $spv--x-small - var(--input-border-thickness));
+      padding-top: calc($spv-nudge - $spv--x-small - var(--input-border-thickness));
     }
 
     &[disabled],
@@ -85,7 +80,7 @@
 
     @each $state, $color in $states {
       &.has-#{$state} {
-        border: $input-border-thickness solid $color;
+        border: var(--input-border-thickness) solid $color;
       }
     }
   }
@@ -233,7 +228,7 @@
 
     margin-left: 0;
     margin-right: 0;
-    padding: calc($spv--large - $input-border-thickness);
+    padding: calc($spv--large - var(--input-border-thickness));
   }
   // stylelint-enable selector-max-type
 }
diff --git a/scss/_patterns_contextual-menu.scss b/scss/_patterns_contextual-menu.scss
index 9a37dc8574..39bcee0089 100644
--- a/scss/_patterns_contextual-menu.scss
+++ b/scss/_patterns_contextual-menu.scss
@@ -60,8 +60,8 @@
     + .p-contextual-menu__group {
       border-top-color: $colors--theme--border-default;
       border-top-style: solid;
-      border-top-width: $input-border-thickness;
-      margin: -$input-border-thickness 0 0 0;
+      border-top-width: var(--input-border-thickness);
+      margin: -var(--input-border-thickness) 0 0 0;
     }
   }
 
diff --git a/scss/_patterns_form-tick-elements.scss b/scss/_patterns_form-tick-elements.scss
index 9e5bd5fd68..a6765d4370 100644
--- a/scss/_patterns_form-tick-elements.scss
+++ b/scss/_patterns_form-tick-elements.scss
@@ -28,11 +28,11 @@
     // container
     &::before {
       background: $colors--theme--background-default;
-      border: $input-border-thickness solid $colors--theme--border-high-contrast;
+      border: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
       content: '';
       height: $form-tick-box-size;
       left: 0;
-      outline-offset: $input-border-thickness;
+      outline-offset: var(--input-border-thickness);
       top: calc($baseline-position - $form-tick-box-size + $form-tick-box-nudge);
       width: $form-tick-box-size;
     }
diff --git a/scss/_patterns_search-and-filter.scss b/scss/_patterns_search-and-filter.scss
index 3372dd5ffe..3f91abf5e1 100644
--- a/scss/_patterns_search-and-filter.scss
+++ b/scss/_patterns_search-and-filter.scss
@@ -19,10 +19,10 @@
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
   // of an input's line-height, its vertical padding, and a nudge.
-  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);
+  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - var(--input-border-thickness));
 
   .p-search-and-filter {
-    border-bottom: $input-border-thickness solid $colors--light-theme--border-high-contrast;
+    border-bottom: var(--input-border-thickness) solid $colors--light-theme--border-high-contrast;
     position: relative;
 
     .p-search-and-filter__search-container {
diff --git a/scss/_patterns_segmented-control.scss b/scss/_patterns_segmented-control.scss
index eee646ab61..f232165c3a 100644
--- a/scss/_patterns_segmented-control.scss
+++ b/scss/_patterns_segmented-control.scss
@@ -33,7 +33,7 @@
           position: absolute;
           right: 0;
           top: 0;
-          width: $input-border-thickness;
+          width: var(--input-border-thickness);
         }
       }
     }
diff --git a/scss/_patterns_switch.scss b/scss/_patterns_switch.scss
index 43af6d2770..e88de8d9e9 100644
--- a/scss/_patterns_switch.scss
+++ b/scss/_patterns_switch.scss
@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
-      border: $input-border-thickness solid $color-link;
+      border: var(--input-border-thickness) solid $color-link;
       left: 50%;
     }
 
@@ -49,7 +49,7 @@ $knob-size: $sp-unit * 2;
       @include vf-transition($duration: slow);
 
       background: $color-x-light;
-      border: $input-border-thickness solid $color-mid-dark;
+      border: var(--input-border-thickness) solid $color-mid-dark;
       border-radius: 50%;
       content: '';
       height: $knob-size;
diff --git a/scss/_settings_placeholders.scss b/scss/_settings_placeholders.scss
index 93e700aa73..1f13e1ecf5 100644
--- a/scss/_settings_placeholders.scss
+++ b/scss/_settings_placeholders.scss
@@ -2,10 +2,20 @@
 @import 'settings_colors';
 
 // Global placeholder settings
-$input-border-thickness: 1.5px;
+:root {
+  // On low pixel density devices a 1.5px border would computed as 1px.
+  // If we use $input-border-thickness = 1.5px in the calculation and the user is on a low pixel density screen
+  // then the border is rendered as 1px, but we still eg. subtract 1.5px from the padding which will throw off the baseline grid alignment.
+  // So we have to check if the users screen is capable of displaying 0.5px steps at runtime. This is only possible with CSS variables.
+  --input-border-thickness: 1.5px;
+
+  @media only screen and (max-resolution: 1.99dppx) {
+    --input-border-thickness: 1px;
+  }
+}
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
-$border: $input-border-thickness solid $color-mid-light !default;
+$border: var(--input-border-thickness) solid $color-mid-light !default;
 $box-shadow:
   0 1px 1px 0 transparentize($color-x-dark, 0.85),
   0 2px 2px -1px transparentize($color-x-dark, 0.85),

From a4862d0b9380b0485b7ebd6b276d2cdba9dc0977 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Thu, 2 May 2024 09:32:20 +0200
Subject: [PATCH 09/12] revert details change

---
 scss/_base_details.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_base_details.scss b/scss/_base_details.scss
index 0d210ffe01..75b7228809 100644
--- a/scss/_base_details.scss
+++ b/scss/_base_details.scss
@@ -9,6 +9,7 @@
     @extend %common-default-text-properties;
     @include vf-focus;
 
+    margin-bottom: $spv-nudge; //push subsequent text onto baseline
     max-width: $text-max-width;
     padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
   }

From 544ba7bcd7fef44c57352ea59bb263dac6e4ebc1 Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Thu, 2 May 2024 09:39:12 +0200
Subject: [PATCH 10/12] removed the label fix from this branch

---
 scss/_base_forms.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 1438b4c899..5c0233d474 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -101,7 +101,6 @@
   label {
     cursor: pointer;
     display: inline-block;
-    line-height: map-get($line-heights, default-text); // on larger screens the label would have the wrong line height?
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $text-max-width;

From fcfded5f623d6c4c1f225b05076d246a7516bfcb Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Thu, 2 May 2024 09:41:22 +0200
Subject: [PATCH 11/12] removed unnecessary comment

---
 scss/_settings_spacing.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_settings_spacing.scss b/scss/_settings_spacing.scss
index b2d44ff55e..0a1bafb63c 100644
--- a/scss/_settings_spacing.scss
+++ b/scss/_settings_spacing.scss
@@ -117,7 +117,7 @@ $sp-after: (
 $spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
-$input-vertical-padding: $spv-nudge; //moved the -1px to the components themselfs since its different for button / input field
+$input-vertical-padding: $spv-nudge;
 
 // tick element variables
 $form-tick-box-size: 1rem;

From 5b33e97d51a20289e00c3ee073a6c73e3f2bd0bf Mon Sep 17 00:00:00 2001
From: Maximilian Blazek <68336485+dgtlntv@users.noreply.github.com>
Date: Wed, 8 May 2024 15:13:51 +0200
Subject: [PATCH 12/12] revert CSS var to SCSS var

---
 scss/_base_button.scss                 | 14 +++++++-------
 scss/_base_code.scss                   |  2 +-
 scss/_base_forms-range.scss            |  2 +-
 scss/_base_forms.scss                  | 12 ++++++------
 scss/_patterns_contextual-menu.scss    |  4 ++--
 scss/_patterns_form-tick-elements.scss |  4 ++--
 scss/_patterns_search-and-filter.scss  |  4 ++--
 scss/_patterns_segmented-control.scss  |  2 +-
 scss/_patterns_switch.scss             |  4 ++--
 scss/_settings_placeholders.scss       |  8 +++++---
 10 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index 86888a2ba4..68e6d56ce0 100644
--- a/scss/_base_button.scss
+++ b/scss/_base_button.scss
@@ -9,8 +9,8 @@
   }
 
   %vf-button-dense-vertical-padding {
-    padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
-    padding-top: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
+    padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+    padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
   }
 
   %vf-button-base {
@@ -18,7 +18,7 @@
     @include vf-focus;
 
     border-style: solid;
-    border-width: var(--input-border-thickness);
+    border-width: $input-border-thickness;
     cursor: pointer;
     display: inline-block;
     font-size: 1rem;
@@ -26,7 +26,7 @@
     justify-content: center;
     line-height: map-get($line-heights, default-text);
     margin: 0 $sph--large $input-margin-bottom 0;
-    padding: calc($input-vertical-padding - var(--input-border-thickness)) $sph--large;
+    padding: calc($input-vertical-padding - $input-border-thickness) $sph--large;
     text-align: center;
     text-decoration: none;
 
@@ -56,13 +56,13 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(map-get($nudges, small) - var(--input-border-thickness)) $sph--small;
+      padding: calc(map-get($nudges, small) - $input-border-thickness) $sph--small;
     }
 
     &.is-small.is-dense {
       margin-bottom: $spv-nudge-compensation;
-      padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
-      padding-top: calc($spv-nudge - $sp-unit * 0.5 - var(--input-border-thickness));
+      padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+      padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
     }
 
     // The following rules address buttons nested in <p>'s;
diff --git a/scss/_base_code.scss b/scss/_base_code.scss
index b3af255bb1..2a844f28eb 100644
--- a/scss/_base_code.scss
+++ b/scss/_base_code.scss
@@ -28,7 +28,7 @@ $code-inline-padding: 0.25rem;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
-    padding: calc($code-inline-padding - var(--input-border-thickness)) $code-inline-padding;
+    padding: calc($code-inline-padding - $input-border-thickness) $code-inline-padding;
   }
 
   code,
diff --git a/scss/_base_forms-range.scss b/scss/_base_forms-range.scss
index 70be11cbfd..e282f0f2ea 100644
--- a/scss/_base_forms-range.scss
+++ b/scss/_base_forms-range.scss
@@ -2,7 +2,7 @@
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
   $thumb-size: 1rem;
   $thumb-radius: 50%;
-  $thumb-border: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
+  $thumb-border: $input-border-thickness solid $colors--theme--border-high-contrast;
   $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 
diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index 5c0233d474..bf82753d1c 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -6,7 +6,7 @@
   @include vf-b-range;
   // Used in buttons, inputs
   %bordered-text-vertical-padding {
-    padding-bottom: calc($input-vertical-padding - var(--input-border-thickness));
+    padding-bottom: calc($input-vertical-padding - $input-border-thickness);
     padding-top: $input-vertical-padding;
   }
 
@@ -23,7 +23,7 @@
     // stylelint-enable property-no-vendor-prefix
     background-color: $colors--theme--background-inputs;
     border: 0 solid transparent;
-    border-bottom: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
+    border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     border-radius: 0;
     color: $colors--theme--text-default;
     font-family: unquote($font-base-family);
@@ -64,8 +64,8 @@
 
     &.is-dense {
       margin: 0 0 $spv-nudge-compensation 0;
-      padding-bottom: calc($spv-nudge - $spv--x-small - var(--input-border-thickness));
-      padding-top: calc($spv-nudge - $spv--x-small - var(--input-border-thickness));
+      padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
+      padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);
     }
 
     &[disabled],
@@ -80,7 +80,7 @@
 
     @each $state, $color in $states {
       &.has-#{$state} {
-        border: var(--input-border-thickness) solid $color;
+        border: $input-border-thickness solid $color;
       }
     }
   }
@@ -227,7 +227,7 @@
 
     margin-left: 0;
     margin-right: 0;
-    padding: calc($spv--large - var(--input-border-thickness));
+    padding: calc($spv--large - $input-border-thickness);
   }
   // stylelint-enable selector-max-type
 }
diff --git a/scss/_patterns_contextual-menu.scss b/scss/_patterns_contextual-menu.scss
index 39bcee0089..9a37dc8574 100644
--- a/scss/_patterns_contextual-menu.scss
+++ b/scss/_patterns_contextual-menu.scss
@@ -60,8 +60,8 @@
     + .p-contextual-menu__group {
       border-top-color: $colors--theme--border-default;
       border-top-style: solid;
-      border-top-width: var(--input-border-thickness);
-      margin: -var(--input-border-thickness) 0 0 0;
+      border-top-width: $input-border-thickness;
+      margin: -$input-border-thickness 0 0 0;
     }
   }
 
diff --git a/scss/_patterns_form-tick-elements.scss b/scss/_patterns_form-tick-elements.scss
index a6765d4370..9e5bd5fd68 100644
--- a/scss/_patterns_form-tick-elements.scss
+++ b/scss/_patterns_form-tick-elements.scss
@@ -28,11 +28,11 @@
     // container
     &::before {
       background: $colors--theme--background-default;
-      border: var(--input-border-thickness) solid $colors--theme--border-high-contrast;
+      border: $input-border-thickness solid $colors--theme--border-high-contrast;
       content: '';
       height: $form-tick-box-size;
       left: 0;
-      outline-offset: var(--input-border-thickness);
+      outline-offset: $input-border-thickness;
       top: calc($baseline-position - $form-tick-box-size + $form-tick-box-nudge);
       width: $form-tick-box-size;
     }
diff --git a/scss/_patterns_search-and-filter.scss b/scss/_patterns_search-and-filter.scss
index 3f91abf5e1..3372dd5ffe 100644
--- a/scss/_patterns_search-and-filter.scss
+++ b/scss/_patterns_search-and-filter.scss
@@ -19,10 +19,10 @@
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
   // of an input's line-height, its vertical padding, and a nudge.
-  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - var(--input-border-thickness));
+  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);
 
   .p-search-and-filter {
-    border-bottom: var(--input-border-thickness) solid $colors--light-theme--border-high-contrast;
+    border-bottom: $input-border-thickness solid $colors--light-theme--border-high-contrast;
     position: relative;
 
     .p-search-and-filter__search-container {
diff --git a/scss/_patterns_segmented-control.scss b/scss/_patterns_segmented-control.scss
index f232165c3a..eee646ab61 100644
--- a/scss/_patterns_segmented-control.scss
+++ b/scss/_patterns_segmented-control.scss
@@ -33,7 +33,7 @@
           position: absolute;
           right: 0;
           top: 0;
-          width: var(--input-border-thickness);
+          width: $input-border-thickness;
         }
       }
     }
diff --git a/scss/_patterns_switch.scss b/scss/_patterns_switch.scss
index e88de8d9e9..43af6d2770 100644
--- a/scss/_patterns_switch.scss
+++ b/scss/_patterns_switch.scss
@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
-      border: var(--input-border-thickness) solid $color-link;
+      border: $input-border-thickness solid $color-link;
       left: 50%;
     }
 
@@ -49,7 +49,7 @@ $knob-size: $sp-unit * 2;
       @include vf-transition($duration: slow);
 
       background: $color-x-light;
-      border: var(--input-border-thickness) solid $color-mid-dark;
+      border: $input-border-thickness solid $color-mid-dark;
       border-radius: 50%;
       content: '';
       height: $knob-size;
diff --git a/scss/_settings_placeholders.scss b/scss/_settings_placeholders.scss
index 1f13e1ecf5..443ccdfab4 100644
--- a/scss/_settings_placeholders.scss
+++ b/scss/_settings_placeholders.scss
@@ -7,15 +7,17 @@
   // If we use $input-border-thickness = 1.5px in the calculation and the user is on a low pixel density screen
   // then the border is rendered as 1px, but we still eg. subtract 1.5px from the padding which will throw off the baseline grid alignment.
   // So we have to check if the users screen is capable of displaying 0.5px steps at runtime. This is only possible with CSS variables.
-  --input-border-thickness: 1.5px;
+  --vf-input-border-thickness: 1.5px;
 
   @media only screen and (max-resolution: 1.99dppx) {
-    --input-border-thickness: 1px;
+    --vf-input-border-thickness: 1px;
   }
 }
+
+$input-border-thickness: var(--vf-input-border-thickness);
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
-$border: var(--input-border-thickness) solid $color-mid-light !default;
+$border: $input-border-thickness solid $color-mid-light !default;
 $box-shadow:
   0 1px 1px 0 transparentize($color-x-dark, 0.85),
   0 2px 2px -1px transparentize($color-x-dark, 0.85),