fix(ui): replaces css fn with css calc (#12520)

Author: JarrodMFlesch

packages/next/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx

@@ -59,6 +59,7 @@ export const DocumentTabLink: React.FC<{
       className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}
       disabled={isActive}
       el={!isActive || href !== pathname ? 'link' : 'div'}
+      margin={false}
       newTab={newTab}
       size="medium"
       to={!isActive || href !== pathname ? hrefWithLocale : undefined}

packages/richtext-lexical/src/features/blocks/client/component/index.tsx

@@ -437,6 +437,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
                     <Pill
                       className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}
                       pillStyle="white"
+                      size="small"
                     >
                       {blockDisplayName ?? formData?.blockType}
                     </Pill>

packages/ui/src/elements/Button/index.scss

@@ -175,7 +175,7 @@
     --btn-icon-border-color: currentColor;
     --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
     --btn-icon-content-gap: calc(var(--base) * 0.4);
-    --margin-block: base(1.2);
+    --margin-block: calc(var(--base) * 1.2);
     --btn-line-height: calc(var(--base) * 1.2);
 
     border-radius: var(--style-radius-s);
@@ -233,7 +233,7 @@
       }
 
       &.btn--size-small {
-        padding: base(0.2);
+        padding: calc(var(--base) * (0.2));
       }
     }
 

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -157,6 +157,7 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
                     <Pill
                       className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
                       pillStyle="white"
+                      size="small"
                     >
                       {getTranslation(block.labels.singular, i18n)}
                     </Pill>