diff --git a/design-tokens/src/build.js b/design-tokens/src/build.js index 0f903e52d..cf3d029df 100644 --- 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 index a06192238..67f2bfcbf 100644 --- 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 index b6f90a281..33a82edce 100644 --- 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 ( { fit="contain" /> - - + + +