fix: payment modal font size var

src/assets/main.css

@@ -47,27 +47,27 @@ article>:last-child:not(footer) {
 
 /* If the last child is the header,  */
 article>:last-child:is(header) {
-  margin-bottom: calc(var(--block-spacing-vertical)* -2);
+  margin-bottom: calc(var(--pico-block-spacing-vertical)* -2);
 }
 
 /* If the .images are the first child, remove margin-top and add a margin-bottom */
 article>:first-child:is(.images) {
-  margin-top: calc(var(--block-spacing-vertical)* -1);
-  margin-bottom: var(--block-spacing-vertical);
-  margin-left: calc(var(--block-spacing-horizontal)* -1);
-  margin-right: calc(var(--block-spacing-horizontal)* -1);
+  margin-top: calc(var(--pico-block-spacing-vertical)* -1);
+  margin-bottom: var(--pico-block-spacing-vertical);
+  margin-left: calc(var(--pico-block-spacing-horizontal)* -1);
+  margin-right: calc(var(--pico-block-spacing-horizontal)* -1);
 
-  width: calc(100% + var(--block-spacing-horizontal)* 2);
+  width: calc(100% + var(--pico-block-spacing-horizontal)* 2);
 }
 
 /* If the last child is images, remove margin-bottom */
 article>:last-child:is(.images) {
-  margin-bottom: calc(var(--block-spacing-vertical)* -1);
+  margin-bottom: calc(var(--pico-block-spacing-vertical)* -1);
 }
 
 /* If the last child is the footer, remove the margin-top */
 article>:first-child:is(footer) {
-  margin-top: calc(var(--block-spacing-vertical)* -1);
+  margin-top: calc(var(--pico-block-spacing-vertical)* -1);
 }
 
 /* make a simple slider with flex */
@@ -97,13 +97,13 @@ a:has(>article):is([aria-current]) {
   display: block;
   text-decoration: none;
   color: inherit;
-  --color: var(--text-color);
+  --color: var(--pico-text-color);
 }
 
 a:has(>article):hover {
   text-decoration: none;
   color: inherit;
-  --color: var(--text-color);
+  --color: var(--pico-text-color);
 }
 
 main~footer ul {
@@ -157,6 +157,6 @@ label:has(+select:required)::after,
 label:has(>input[type="checkbox"]:required)::after,
 label:has(>input[type="radio"]:required)::after {
   content: "*";
-  color: var(--del-color);
-  margin-left: calc(var(--nav-link-spacing-vertical) / 2);
+  color: var(--pico-del-color);
+  margin-left: calc(var(--pico-nav-link-spacing-vertical) / 2);
 }

src/helpers/cssVariables.ts

@@ -1,14 +1,25 @@
 import { hsl2rgb } from "@/helpers/colors";
 
-export const getCssVarForStripe = (color: string) => {
-  const computedColor = getComputedStyle(document.documentElement)
-    .getPropertyValue(`--${color}`)
+export const getCssVarForStripe = (cssVariable: string) => {
+  const computedValue = getComputedStyle(document.documentElement)
+    .getPropertyValue(`--${cssVariable}`)
     .trim()
     .replace("deg", "");
 
+  // There's a bug with pico-css-font-size, so
+
+  // if the cssVariable is a percent, convert it to a number. If its higher than 100, we need to convert it into px units
+  if (computedValue.endsWith("%")) {
+    const percent = parseFloat(computedValue.replace("%", ""));
+    if (percent > 100) {
+      //  Just return the base size in pixels
+      return convertPercentToPixels(100) + "px";
+    }
+  }
+
   // If the computedColor starts with hsl, convert it to rgb
-  if (computedColor.startsWith("hsl")) {
-    const hsl = computedColor.replace("hsl(", "").replace(")", "").split(",");
+  if (computedValue.startsWith("hsl")) {
+    const hsl = computedValue.replace("hsl(", "").replace(")", "").split(",");
     const rgb = hsl2rgb(
       parseInt(hsl[0]),
       parseInt(hsl[1]) / 100,
@@ -18,5 +29,21 @@ export const getCssVarForStripe = (color: string) => {
     return `rgb(${rgbIn255Scale.join(",")})`;
   }
 
-  return computedColor;
+  return computedValue;
+};
+
+export const convertRemToPixels = (rem: number) => {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+
+/**
+ * Based on the base fontSize, convert a percent value to pixels
+ * @param percent - The percent value to convert to pixels
+ * @returns The pixel value
+ */
+export const convertPercentToPixels = (percent: number) => {
+  return (
+    (percent / 100) *
+    parseFloat(getComputedStyle(document.documentElement).fontSize)
+  );
 };