Design Tokens Manager - Scale export + theme utlis for grommet-demo-app

design-tokens-manager/src/routes/Scaler/Results.jsx

@@ -112,6 +112,9 @@ export const Results = ({
           <ScaleToolbar
             direction="row-reverse"
             scale={scale}
+            settings={{ base, contentBase, factor, steps, nearest }}
+            contentSizes={tshirtContent}
+            spacingSizes={tshirtSpacing}
             open={open}
             setOpen={setOpen}
           />

design-tokens-manager/src/routes/Scaler/components/ScaleToolbar.jsx

@@ -2,7 +2,24 @@ import { Box, Button } from 'grommet';
 import { Sidebar } from 'grommet-icons';
 import { CopyButton } from '../../../components/CopyButton';
 
-export const ScaleToolbar = ({ scale, open, setOpen, ...rest }) => {
+export const ScaleToolbar = ({
+  scale: scaleProp,
+  settings,
+  contentSizes,
+  spacingSizes,
+  open,
+  setOpen,
+  ...rest
+}) => {
+  const scale = {
+    name: `${settings.base}-${settings.factor}-${settings.nearest}-${settings.steps}`,
+    description: `${settings.base}px based scale at ${settings.factor} factor. Rounded to ${settings.nearest}px grid unit with ${settings.steps} steps`,
+    settings: settings,
+    scale: scaleProp,
+    content: contentSizes,
+    spacing: spacingSizes,
+  };
+
   return (
     <Box gap="xsmall" flex={false} {...rest}>
       <Button

sandbox/grommet-app/src/App.jsx

@@ -1,7 +1,7 @@
 import { createContext, useState, useEffect, useMemo } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Grommet, Box } from 'grommet';
-import { themes } from './theme';
+import { themes } from './themes/theme';
 import Sustainability from './pages/sustainability/index';
 import Home from './pages/index';
 import NextDashboard from './pages/next/index';

sandbox/grommet-app/src/components/GlobalHeader/GlobalHeader.jsx

@@ -24,7 +24,7 @@ import {
   HelpOption,
   Menu,
 } from 'grommet-icons';
-import { themes } from '../../theme';
+import { themes } from '../../themes/theme';
 import { ToggleGroup } from '../ToggleGroup/ToggleGroup';
 
 // TO DO fix animation once motion tokens are added

sandbox/grommet-app/src/pages/sticker-sheet/index.jsx

@@ -45,7 +45,7 @@ import {
 } from 'grommet';
 import { User, Table, List, MapLocation, Previous } from 'grommet-icons';
 import { hpe } from 'grommet-theme-hpe';
-import { current as hpeCurrent } from '../../theme';
+import { current as hpeCurrent } from '../../themes/theme';
 import ContentPane from '../../components/ContentPane';
 
 const StyleInProgress = () => (

sandbox/grommet-app/src/themes/theme-utils/scale-to-theme.js

@@ -0,0 +1,81 @@
+// scale-to-theme.js
+// Utility functions to convert scale definitions and t-shirt sizes to theme objects
+// Scale definition example:
+// {
+//   name: string,
+//   description: string,
+//   settings: {
+//     base: integer,
+//     contentBase: integer,
+//     factor: number,
+//     steps: integer,
+//     nearest: integer,
+//   },
+//   scale: integer[];
+//   content: { size: string, value: integer }[];
+// }
+
+const scaleToThemeObject = ({ scale, index = 0 }) => {
+  const result = {};
+  scale.forEach((step, i) => {
+    const { size, value } = step;
+    if (index !== 0) {
+      result[size] =
+        i + index >= 0 ? `${scale[i + index].value}px` : `${scale[0].value}px`;
+    } else {
+      result[size] = `${value}px`;
+    }
+  });
+  return result;
+};
+
+const pageThemeObject = ({ scale, target }) => {
+  const max = scale.reduce(
+    (acc, { size, value }) => {
+      // Minimizing the difference between the target and the value
+      const test =
+        !acc.value || Math.abs(target - value) < Math.abs(target - acc.value);
+      acc.size = test ? size : acc.size;
+      acc.value = test ? value : acc.value;
+      return acc;
+    },
+    { size: undefined, value: undefined },
+  );
+
+  return { width: { max: max.size } };
+};
+
+export const createTheme = ({ spacing, content }) => {
+  return {
+    global: {
+      breakpoints: {
+        xsmall: {
+          edgeSize: {
+            ...scaleToThemeObject({ scale: spacing, index: -1 }),
+          },
+          size: {
+            ...scaleToThemeObject({ scale: content, index: -1 }),
+          },
+        },
+        small: {
+          edgeSize: {
+            ...scaleToThemeObject({ scale: spacing, index: -1 }),
+          },
+          size: {
+            ...scaleToThemeObject({ scale: content, index: -1 }),
+          },
+        },
+      },
+      edgeSize: {
+        ...scaleToThemeObject({ scale: spacing }),
+      },
+      size: {
+        ...scaleToThemeObject({ scale: content }),
+      },
+    },
+    page: {
+      wide: { ...pageThemeObject({ scale: content, target: 1536 }) },
+      narrow: { ...pageThemeObject({ scale: content, target: 768 }) },
+    },
+  };
+};