feat: fluid space variables in GlobalStyles

lsst-epo · Dec 13, 2024 · 2635c5d · 2635c5d
1 parent 7c07b46
commit 2635c5d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/packages/epo-react-lib/package.json b/packages/epo-react-lib/package.json
@@ -68,7 +68,8 @@
     "react-player": "^2.14.1",
     "react-share": "^4.4.1",
     "react-slider": "^2.0.6",
-    "styled-components": "^6.1.1"
+    "styled-components": "^6.1.1",
+    "utopia-core": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",

diff --git a/packages/epo-react-lib/src/atomic/Stack/styles.ts b/packages/epo-react-lib/src/atomic/Stack/styles.ts
@@ -7,11 +7,11 @@ export const Stack = styled.div`
   justify-content: flex-start;
 
   &[data-recursive="true"] {
-    * {
+    > * {
       margin-block: 0;
     }
 
-    * + * {
+    > * + * {
       margin-block-start: var(--size-spacing-stack, 1rem);
     }
   }

diff --git a/packages/epo-react-lib/src/styles/globalStyles.ts b/packages/epo-react-lib/src/styles/globalStyles.ts
@@ -7,13 +7,9 @@ import { baseFont } from "@/styles/mixins/font";
 import { fluidScale } from "@/styles/utils";
 import base from "@/styles/base";
 import { tokens } from "@/styles/abstracts";
+import { calculateClamp, calculateSpaceScale } from "utopia-core";
 
-const {
-  BREAK_MOBILE,
-  BREAK_TABLET,
-  FONT_SIZE_BASE_DESKTOP,
-  FONT_SIZE_BASE_MOBILE,
-} = tokens;
+const { FONT_SIZE_BASE_DESKTOP, FONT_SIZE_BASE_MOBILE } = tokens;
 
 const rubinTokensAsCssVariables = Object.entries(rubinTokens).reduce<
   Record<string, string | number>
@@ -31,23 +27,40 @@ const createCSSGlobalStyles = () => {
   );
 };
 
+const createCSSGlobalSizes = () => {
+  return Object.values(
+    calculateSpaceScale({
+      minSize: parseInt(FONT_SIZE_BASE_MOBILE),
+      maxSize: parseInt(FONT_SIZE_BASE_DESKTOP),
+      minWidth: 320,
+      maxWidth: 1240,
+      positiveSteps: [1.5, 2, 3, 4, 6, 8],
+      negativeSteps: [0.75, 0.5, 0.25],
+      customSizes: ["s-l"],
+      relativeTo: "viewport-width",
+    })
+  )
+    .flat()
+    .map(({ label, clamp }) => {
+      return `--size-space-${label}: ${clamp};`;
+    });
+};
+
 const GlobalStyles = createGlobalStyle<{ includeFonts?: boolean }>`
 ${({ includeFonts = true }) => (includeFonts ? baseFont : "")}
-  html {
-    font-size: ${fluidScale(
-      FONT_SIZE_BASE_DESKTOP,
-      FONT_SIZE_BASE_MOBILE,
-      BREAK_TABLET,
-      BREAK_MOBILE
-    )}
-  }
   body {
     font-family: var(--FONT_STACK_BASE);
-    font-size: 1em;
+    font-size: ${calculateClamp({
+      minSize: parseInt(FONT_SIZE_BASE_MOBILE),
+      maxSize: parseInt(FONT_SIZE_BASE_DESKTOP),
+      minWidth: 320,
+      maxWidth: 1240,
+    })};
     line-height: var(--LINE_HEIGHT_BASE);
   }
   :root {
       ${createCSSGlobalStyles()}
+      ${createCSSGlobalSizes()}
   }
   ${base}
 `;

diff --git a/yarn.lock b/yarn.lock
@@ -16093,6 +16093,11 @@ utopia-core@^1.3.0:
   resolved "https://registry.yarnpkg.com/utopia-core/-/utopia-core-1.5.0.tgz#1e826da367bcf2d5cb6390531f8f5f7717f23ede"
   integrity sha512-iqhs4xeUrNjEBGNYM7d8pZQK6/HjYjYZaXJVYu+bsE1gWDoO7cI+5wWVF7av7YN+NKA0zhhVDjNskMMJulGpow==
 
+utopia-core@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/utopia-core/-/utopia-core-1.6.0.tgz#dbbb1906a7cb96034ac5aa213dd34aa74dff23b2"
+  integrity sha512-1t74XWRugoMxwbPufCBlBRBfp4ebwXh9dLRoEEywAroO3prOQUyGykX4G4o5kHyX5PbfB3Zly1AjP2epeq6ycA==
+
 uuid@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"