Certain styles not working on Ionic ion-button

Super simple example of the problem:

Ionic 7.8.

<ion-button
  [ngClass]="classes"
  [disabled]="disabled"
  (click)="onClick()">
  {{ text }}
  <ion-icon *ngIf="iconName" slot="end" src="svg/{{iconName}}.svg"></ion-icon>
</ion-button>

And the styles:

ion-button {
  // Rounded Corners
  --border-radius: var(--button-radius);
  --border-width: 1 px;

  // Defaults
  display: inline-flex;             // Make sure button doesn't take full width by default
  align-items: center;
  justify-content: center;
  text-transform: none !important;  // Disable uppercase globally for ion-buttons (need to force it!)
  padding: 0;                       // Ionic adds 5px padding top & bottom
  margin: 0;                        // remove outer margin (beyond the border-box)
  box-sizing: border-box !important;
  --box-shadow: 0;                  // Wanda no likey the shadows!

  // All except for links use this font
  @extend .text-button-label;            // from typography global styles

  &.monkey-theme-secondary {
    --color: var(--text-lines, #00272E);
    --background: transparent;
    --border-style: solid;
    --border-color: var(--text-lines, #00272E);
    --border-width: 2 px;
  }

  ... 

For rapid testing, I'm using Storybook. Here's the issue. The border width is always 3 px. Everything else is fine. The other CSS variables seem to be behaving - it's just theborder width.

I'm not after a hacky workaround. What I'm really after is to understand why this is the case. Perhaps a better understanding of the stencil workings...

Here's a view of the Storybook comparison with the expected outcome. Above actual. Below expected.

In CSS, numbers and units cannot be separated by a space. CSS uses space as a separator, so the browser thinks they are separate values.

So this is invalid syntax and will do nothing:

border-width: 2 px;

Remove the space and it should work:

border-width: 2px;

In normal CSS declaration (not custom properties), the browser dev tools would help you out by showing that the value is invalid. But with custom properties, the browser doesn't know what type the custom property should be (i.e. it could be a list of values).