Add warm theme and control to grommet-app

grommet · Mar 7, 2024 · b02b115 · b02b115
1 parent 22d6cc7
commit b02b115
Show file tree

Hide file tree

Showing 8 changed files with 580 additions and 261 deletions.
diff --git a/design-tokens/src/build.js b/design-tokens/src/build.js
@@ -68,6 +68,8 @@ const rawPrimitives = readFileSync('./tokens/primitives.base.json');
 const primitives = JSON.parse(rawPrimitives);
 const dimensionPrimitives = numberToDimension(primitives);
 
+// --------- COLORS ------------ //
+
 // dark colors
 const rawDark = readFileSync('./tokens/color.dark.json');
 const dark = JSON.parse(rawDark);
@@ -78,6 +80,18 @@ const rawLight = readFileSync('./tokens/color.light.json');
 const light = JSON.parse(rawLight);
 const resolvedLight = resolveTokens(light, dimensionPrimitives);
 
+// warm dark colors
+const rawWarmDark = readFileSync('./tokens/color.exploration-dark.json');
+const warmDark = JSON.parse(rawWarmDark);
+const resolvedWarmDark = resolveTokens(warmDark, dimensionPrimitives);
+
+// warm light colors
+const rawWarmLight = readFileSync('./tokens/color.exploration-light.json');
+const warmlight = JSON.parse(rawWarmLight);
+const resolvedWarmLight = resolveTokens(warmlight, dimensionPrimitives);
+
+// --------- BREAKPOINTS ------------ //
+
 // desktop dimensions
 const rawDesktop = readFileSync('./tokens/dimension.large.json');
 const desktop = JSON.parse(rawDesktop);
@@ -95,6 +109,7 @@ writeFileSync(
   `export default ${JSON.stringify(dimensionPrimitives, null, 2)}`,
 );
 
+// currently used by style-dictionary
 writeFileSync(
   './dist/primitives.base.json',
   `${JSON.stringify(dimensionPrimitives, null, 2)}`,
@@ -110,6 +125,16 @@ writeFileSync(
   `export default ${JSON.stringify(resolvedLight, null, 2)}`,
 );
 
+writeFileSync(
+  './dist/color.warm-dark.js',
+  `export default ${JSON.stringify(resolvedWarmDark, null, 2)}`,
+);
+
+writeFileSync(
+  './dist/color.warm-light.js',
+  `export default ${JSON.stringify(resolvedWarmLight, null, 2)}`,
+);
+
 writeFileSync(
   './dist/dimension.large.js',
   `export default ${JSON.stringify(resolvedDesktop, null, 2)}`,
@@ -125,6 +150,8 @@ writeFileSync(
   `export { default as primitives } from './primitives.base.js';
 export { default as dark } from './color.dark.js';
 export { default as light } from './color.light.js';
+export { default as warmLight } from './color.warm-light.js';
+export { default as warmDark } from './color.warm-dark.js';
 export { default as desktop } from './dimension.large.js';
 export { default as mobile } from './dimension.small.js';`,
 );
diff --git a/design-tokens/src/sync_figma_to_tokens.ts b/design-tokens/src/sync_figma_to_tokens.ts
@@ -1,10 +1,10 @@
-import 'dotenv/config'
-import * as fs from 'fs'
+import 'dotenv/config';
+import * as fs from 'fs';
 
-import FigmaApi from './figma_api.js'
+import FigmaApi from './figma_api.js';
 
-import { green } from './utils.js'
-import { tokenFilesFromLocalVariables } from './token_export.js'
+import { green } from './utils.js';
+import { tokenFilesFromLocalVariables } from './token_export.js';
 
 /**
  * Usage:
@@ -18,31 +18,38 @@ import { tokenFilesFromLocalVariables } from './token_export.js'
 
 async function main() {
   if (!process.env.PERSONAL_ACCESS_TOKEN || !process.env.FILE_KEY) {
-    throw new Error('PERSONAL_ACCESS_TOKEN and FILE_KEY environemnt variables are required')
+    throw new Error(
+      'PERSONAL_ACCESS_TOKEN and FILE_KEY environemnt variables are required',
+    );
   }
-  const fileKey = process.env.FILE_KEY
+  const fileKey = process.env.FILE_KEY;
 
-  const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN)
-  const localVariables = await api.getLocalVariables(fileKey)
+  const api = new FigmaApi(process.env.PERSONAL_ACCESS_TOKEN);
+  const localVariables = await api.getLocalVariables(fileKey);
 
-  const tokensFiles = tokenFilesFromLocalVariables(localVariables)
+  const tokensFiles = tokenFilesFromLocalVariables(localVariables);
 
-  let outputDir = 'tokens_new'
-  const outputArgIdx = process.argv.indexOf('--output')
+  let outputDir = 'tokens_new';
+  const outputArgIdx = process.argv.indexOf('--output');
   if (outputArgIdx !== -1) {
-    outputDir = process.argv[outputArgIdx + 1]
+    outputDir = process.argv[outputArgIdx + 1];
   }
 
   if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir)
+    fs.mkdirSync(outputDir);
   }
 
   Object.entries(tokensFiles).forEach(([fileName, fileContent]) => {
-    fs.writeFileSync(`${outputDir}/${fileName}`, JSON.stringify(fileContent, null, 2))
-    console.log(`Wrote ${fileName}`)
-  })
-
-  console.log(green(`✅ Tokens files have been written to the ${outputDir} directory`))
+    fs.writeFileSync(
+      `${outputDir}/${fileName}`,
+      `${JSON.stringify(fileContent, null, 2)}\n`,
+    );
+    console.log(`Wrote ${fileName}`);
+  });
+
+  console.log(
+    green(`✅ Tokens files have been written to the ${outputDir} directory`),
+  );
 }
 
-main()
+main();
diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
@@ -1,7 +1,15 @@
 import { createContext, useState, useEffect, useMemo } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Box, Button, Grommet, Image, CheckBox, FormField } from 'grommet';
-import { tokensTheme } from './theme';
+import {
+  Box,
+  Button,
+  Grommet,
+  Image,
+  CheckBox,
+  FormField,
+  Select,
+} from 'grommet';
+import { current, warm } from './theme';
 import { Moon, Sun } from 'grommet-icons';
 import Sustainability from './pages/sustainability/index';
 import Home from './pages/index';
@@ -22,10 +30,15 @@ const App = () => {
 
   const [backgroundBack, setBackgroundBack] = useState(false);
   const contextValue = useMemo(() => ({ backgroundBack }), [backgroundBack]);
+  const [activeTheme, setActiveTheme] = useState('Current theme');
+  const theme = useMemo(
+    () => (activeTheme === 'Current theme' ? current : warm),
+    [activeTheme],
+  );
 
   return (
     <Grommet
-      theme={tokensTheme}
+      theme={theme}
       background={backgroundBack ? 'background-back' : undefined}
       full="min"
       themeMode={darkMode ? 'dark' : 'light'}
@@ -51,8 +64,24 @@ const App = () => {
                 fit="contain"
               />
             </Box>
-            <Box align="center" direction="row" gap="small">
-              <FormField>
+            <Box align="end" direction="row" gap="small">
+              <FormField
+                // label="Theme"
+                contentProps={{
+                  margin: { bottom: 'none', top: 'none' },
+                  width: 'small',
+                }}
+              >
+                <Select
+                  options={['Current theme', 'Warm theme']}
+                  value={activeTheme}
+                  onChange={({ value }) => setActiveTheme(value)}
+                />
+              </FormField>
+              <FormField
+                // label="Background style"
+                contentProps={{ margin: { bottom: 'none', top: 'none' } }}
+              >
                 <CheckBox
                   label="background-back"
                   toggle

diff --git a/sandbox/grommet-app/src/components/ContentPane/index.jsx b/sandbox/grommet-app/src/components/ContentPane/index.jsx
@@ -21,6 +21,7 @@ const ContentPane = ({
       gap="medium"
       background={contain ? 'background-front' : undefined}
       pad={contain ? { horizontal: 'medium', vertical: 'medium' } : undefined}
+      elevation={contain ? 'small' : undefined}
       round={contain}
       {...rest}
     >