feat(tools/tokens): build all preset within the tokens package (#1299)

Resolves #1232 Co-authored-by: Mohamed Mokhtari <mohamed.mokhtari.pro@gmail.com>
adeo · Dec 29, 2022 · c9353dd · c9353dd
1 parent f7f03ae
commit c9353dd
Show file tree

Hide file tree

Showing 93 changed files with 30,601 additions and 11,405 deletions.
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
   },
   "scripts": {
     "tokens:build": "mozaic-tokens-build",
-    "tokens:clean": "test -d 'packages/tokens/build/' && npx style-dictionary clean --config ./packages/tokens/config.js || echo 'nothing to clean'",
+    "tokens:clean": "test -d 'packages/tokens/dist/' && rm -rf packages/tokens/dist/ || echo 'nothing to clean'",
     "tokens:clean-build": "yarn tokens:clean && yarn tokens:build",
     "assets:upload": "node ci/assets.js",
     "ci:wait": "node ci/deploy.js",

diff --git a/packages/css-dev-tools/sassConfig.js b/packages/css-dev-tools/sassConfig.js
@@ -21,8 +21,8 @@ const basePaths = [
 const tokensPath = tokensBuildPath
   ? basePaths.concat([`${tokensBuildPath}scss/`])
   : basePaths.concat([
-      './node_modules/@mozaic-ds/tokens/build/css/',
-      './node_modules/@mozaic-ds/tokens/build/scss/',
+      './node_modules/@mozaic-ds/tokens/build/lm/css/',
+      './node_modules/@mozaic-ds/tokens/build/lm/scss/',
     ])
 
 const includePaths = additionalPaths

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Container/Container.js b/packages/gatsby-theme-styleguide/src/gatsby-components/Container/Container.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 
 export default styled.div`
   padding: ${MagicUnit}rem ${MagicUnit * 2}rem;

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Highlight/Highlight.js b/packages/gatsby-theme-styleguide/src/gatsby-components/Highlight/Highlight.js
@@ -11,7 +11,7 @@ import {
   ColorGrey100,
   ColorGrey500,
   ColorGrey700,
-} from '@mozaic-ds/tokens/build/js/tokens'
+} from '@mozaic-ds/tokens/build/lm/js/tokens'
 
 const defaultTitles = {
   info: 'Information',

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/JSImplementation/JSImplementation.js b/packages/gatsby-theme-styleguide/src/gatsby-components/JSImplementation/JSImplementation.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 import StatusFlag from '../StatusFlag'
 import { DisplayExternalLink16 } from '@mozaic-ds/icons/react'
 

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/PageTabs/PageTabs.js b/packages/gatsby-theme-styleguide/src/gatsby-components/PageTabs/PageTabs.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import { Link } from 'gatsby'
 import styled from 'styled-components'
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 
 const Tabs = styled.div`
   position: sticky;

diff --git a/...es/gatsby-theme-styleguide/src/gatsby-components/PatternStatusGroup/PatternStatusGroup.js b/...es/gatsby-theme-styleguide/src/gatsby-components/PatternStatusGroup/PatternStatusGroup.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import StatusFlag from '../StatusFlag'
 import { checkPlatform, checkStatus } from '../../utils/status'
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 
 const StatusItem = styled.span`
   align-items: baseline;

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Preview/PreviewComponent.js b/packages/gatsby-theme-styleguide/src/gatsby-components/Preview/PreviewComponent.js
@@ -5,7 +5,7 @@ import PreviewCodeSample from './PreviewCodeSample'
 import PreviewToolBar from './PreviewToolBar'
 import PreviewFrame from './PreviewFrame'
 
-import tokensObject from '@mozaic-ds/tokens/build/js/tokensObject.js'
+import tokensObject from '@mozaic-ds/tokens/build/lm/js/tokensObject.js'
 
 import copyToClipboard from '../../utils/copy-to-clipboard'
 

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Preview/PreviewFrame.js b/packages/gatsby-theme-styleguide/src/gatsby-components/Preview/PreviewFrame.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import styled, { css } from 'styled-components'
 
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 
 const lineColor = `rgba(0, 100, 100, 0.1)`
 const subLineColor = `rgba(0, 100, 100, 0.03)`

diff --git a/packages/gatsby-theme-styleguide/src/gatsby-components/Swatch/Swatch.js b/packages/gatsby-theme-styleguide/src/gatsby-components/Swatch/Swatch.js
@@ -2,8 +2,8 @@ import React from 'react'
 import styled from 'styled-components'
 
 import Color from '../Color'
-import tokens from '@mozaic-ds/tokens/build/js/tokensObject.js'
-import adeoTokens from '@mozaic-ds/tokens/buildAdeo/js/tokensObject.js'
+import tokens from '@mozaic-ds/tokens/build/lm/js/tokensObject.js'
+import adeoTokens from '@mozaic-ds/tokens/build/adeo/js/tokensObject.js'
 
 const ColorWrapper = styled.div`
   flex: 0 0 32%;

diff --git a/packages/gatsby-theme-styleguide/src/templates/pattern-page.js b/packages/gatsby-theme-styleguide/src/templates/pattern-page.js
@@ -1,4 +1,4 @@
-import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
 import { graphql } from 'gatsby'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 import React from 'react'

diff --git a/packages/tokens/bin/build.js b/packages/tokens/bin/build.js
@@ -1,4 +1,4 @@
-#! /usr/bin/env node
+#!/usr/bin/env node
 
 const tokensBuild = require('../tokensBuild.js')
 

diff --git a/packages/tokens/build/adeo/css/_variables.scss b/packages/tokens/build/adeo/css/_variables.scss