fix(spacing): use base 20 fallback spacing logic

use 20 instead of 16 - 20 is the default described in the docs allow for 16 to be set using --cds-global-base, even if the global css doesn't load fixes vmware-clarity/ng-clarity#138
ashleyryan · Jun 16, 2022 · b29a19b · b29a19b
1 parent a727b22
commit b29a19b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/projects/core/.storybook/preview.js b/projects/core/.storybook/preview.js
@@ -275,5 +275,4 @@ const dataThemeDecorator = (story, { globals }) => {
 export const decorators = [themeDecorator, dataThemeDecorator];
 
 // We have this here since storybook does not have a easy way to set the <html> element in demos
-// The token system generates a base 16px set of variables for apps that may not be able to easily set the base font to 125%
 document.body.setAttribute('cds-text', 'body');
diff --git a/projects/core/build/build.tokens.ts b/projects/core/build/build.tokens.ts
@@ -143,7 +143,10 @@ function tokenToSass(token: Token, fallback = false) {
   let fallbackValue = convertCSSValue(token);
 
   if (typeof token.value === 'number') {
-    fallbackValue = `${token.value / 16}rem`; // worst case scenario, fallback to base 16 if base 20 not set at root
+    // fallback to using the global base as a divisor,
+    //   which can be set even if global CSS isn't loaded
+    // worse case scenario, use base 20, Clarity's default
+    fallbackValue = `calc(${token.value} * (1rem / var(--cds-global-base, 20)))`;
   }
 
   if (token.config.raw) {

diff --git a/projects/core/src/index.performance.ts b/projects/core/src/index.performance.ts
@@ -13,7 +13,7 @@ describe('performance', () => {
     expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.5);
 
     // contained in @cds/core/global.min.css
-    expect((await testBundleSize('@cds/core/styles/module.layout.min.css')).kb).toBeLessThan(4.5);
+    expect((await testBundleSize('@cds/core/styles/module.layout.min.css')).kb).toBeLessThan(4.6);
     expect((await testBundleSize('@cds/core/styles/module.reset.min.css')).kb).toBeLessThan(0.5);
     expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(2.5);
     expect((await testBundleSize('@cds/core/styles/module.typography.min.css')).kb).toBeLessThan(1.6);