Merge pull request #209 from rei/pr/expose-source-tokens

Expose source tokens and Remove alpha property

style-dictionary/build.mjs

@@ -12,10 +12,7 @@ import { stripPx } from './transforms/size/strip-px.mjs'
 import { stripAllPx } from './transforms/size/strip-all-px.mjs'
 import { stripAllPxJs } from './transforms/size/strip-all-px-js.mjs'
 import { float } from './transforms/size/float.mjs'
-import { alpha } from './transforms/color/alpha.mjs'
 import { colorCssTransitive } from './transforms/color/color-css-transitive.mjs'
-import { hex8AndroidTransitive } from './transforms/color/hex8-android-transitive.mjs'
-import { uiColorTransitive } from './transforms/color/uicolor-transitive.mjs'
 import { shadow } from './transforms/value/shadow.mjs'
 
 // ==== Include custom formats ====
@@ -35,7 +32,6 @@ import { includeMediaQueriesScss } from './actions/include-media-queries-scss.mj
 
 // ==== Include custom filters ====
 import { removeSourceTokens } from './filters/remove-source-tokens.mjs'
-import { iosSize } from './filters/ios-size.mjs'
 
 // ==== Register style dictionary ====
 register(StyleDictionary)
@@ -50,10 +46,7 @@ stripPx(StyleDictionary)
 stripAllPx(StyleDictionary)
 stripAllPxJs(StyleDictionary)
 float(StyleDictionary)
-alpha(StyleDictionary)
 colorCssTransitive(StyleDictionary)
-hex8AndroidTransitive(StyleDictionary)
-uiColorTransitive(StyleDictionary)
 shadow(StyleDictionary)
 
 // ==== Register custom formats ====
@@ -73,7 +66,6 @@ includeMediaQueriesScss(StyleDictionary)
 
 // ==== Register custom filters ====
 removeSourceTokens(StyleDictionary)
-iosSize(StyleDictionary)
 
 const themes = [
   'rei-dot-com',

style-dictionary/configs/android.mjs

@@ -1,4 +1,4 @@
-import { commonConfig } from '../utils.mjs'
+import { commonConfig, filterSourceTokensAndType } from '../utils.mjs'
 
 export const android = (theme) => ({
   android: {
@@ -8,29 +8,22 @@ export const android = (theme) => ({
       'size/space',
       'size/dp-transitive',
       'size/sp',
-      'color/alpha',
-      'color/hex8android-transitive'
+      'color/hex8android'
     ],
     files: [
       {
         destination: 'colors.xml',
-        filter: {
-          $type: 'color'
-        },
+        filter: (token) => filterSourceTokensAndType(token, 'color'),
         format: 'android/resources'
       },
       {
         destination: 'font_dimens.xml',
-        filter: {
-          $type: 'fontSize'
-        },
+        filter: (token) => filterSourceTokensAndType(token, 'fontSize'),
         format: 'android/fontDimens'
       },
       {
         destination: 'dimens.xml',
-        filter: {
-          $type: 'dimension'
-        },
+        filter: (token) => filterSourceTokensAndType(token, 'dimension'),
         format: 'android/dimens'
       }
     ]

style-dictionary/configs/css.mjs

@@ -9,13 +9,13 @@ export const css = (theme) => ({
       'name/kebab',
       'size/space',
       'size/px-to-rem-transitive',
-      'color/alpha',
       'color/css-transitive'
     ],
     files: [
       {
         destination: 'cdr-tokens.css',
-        format: 'css/variables'
+        format: 'css/variables',
+        filter: 'remove-source-tokens'
       }
     ]
   }

style-dictionary/configs/figma.mjs

@@ -9,14 +9,12 @@ export const figma = (theme) => ({
       'name/kebab',
       'size/space',
       'size/px-to-rem-transitive',
-      'color/alpha',
       'color/css-transitive'
     ],
     files: [
       {
         destination: 'figma.json',
-        format: 'figma',
-        filter: 'remove-source-tokens'
+        format: 'figma'
       }
     ]
   }

style-dictionary/configs/ios.mjs

@@ -1,13 +1,12 @@
-import { commonConfig } from '../utils.mjs'
+import { commonConfig, filterSourceTokensAndType } from '../utils.mjs'
 
 export const ios = (theme) => ({
   ios: {
     ...commonConfig(theme, 'ios'),
     transforms: [
       'attribute/deprecated',
       'name/pascal',
-      'color/alpha',
-      'color/UIColor-transitive',
+      'color/UIColor',
       'size/strip-px',
       'size/space',
       'size/float'
@@ -16,7 +15,7 @@ export const ios = (theme) => ({
       {
         destination: 'CdrSize.h',
         format: 'ios/static.h',
-        filter: 'ios-size',
+        filter: (token) => filterSourceTokensAndType(token, ['dimension', 'fontSize']),
         options: {
           type: 'float',
           className: 'CdrSize'
@@ -25,7 +24,7 @@ export const ios = (theme) => ({
       {
         destination: 'CdrSize.m',
         format: 'ios/static.m',
-        filter: 'ios-size',
+        filter: (token) => filterSourceTokensAndType(token, ['dimension', 'fontSize']),
         options: {
           type: 'float',
           className: 'CdrSize'
@@ -34,9 +33,7 @@ export const ios = (theme) => ({
       {
         destination: 'CdrColor.h',
         format: 'ios/colors.h',
-        filter: {
-          $type: 'color'
-        },
+        filter: (token) => filterSourceTokensAndType(token, 'color'),
         options: {
           type: 'CdrColorName',
           className: 'CdrColor'
@@ -45,9 +42,7 @@ export const ios = (theme) => ({
       {
         destination: 'CdrColor.m',
         format: 'ios/colors.m',
-        filter: {
-          $type: 'color'
-        },
+        filter: (token) => filterSourceTokensAndType(token, 'color'),
         options: {
           type: 'CdrColorName',
           className: 'CdrColor'

style-dictionary/configs/js.mjs

@@ -8,14 +8,14 @@ export const js = (theme) => ({
       'name/pascal',
       'size/strip-all-px-js',
       'size/space-js',
-      'color/alpha',
       'color/css-transitive',
       'value/shadow'
     ],
     files: [
       {
         destination: 'cdr-tokens.cjs',
-        format: 'javascript/module-flat'
+        format: 'javascript/module-flat',
+        filter: 'remove-source-tokens'
       },
       {
         destination: 'cdr-tokens.mjs',
@@ -24,7 +24,8 @@ export const js = (theme) => ({
       },
       {
         format: 'typescript/es6-declarations',
-        destination: 'cdr-tokens.d.mts'
+        destination: 'cdr-tokens.d.mts',
+        filter: 'remove-source-tokens'
       }
     ]
   }

style-dictionary/configs/less.mjs

@@ -9,17 +9,18 @@ export const less = (theme) => ({
       'name/kebab',
       'size/space',
       'size/px-to-rem-transitive',
-      'color/alpha',
       'color/css-transitive'
     ],
     files: [
       {
         destination: 'cdr-variable.less',
-        format: 'less/variables'
+        format: 'less/variables',
+        filter: 'remove-source-tokens'
       },
       {
         destination: 'cdr-mixins.less',
-        format: 'less/mixin'
+        format: 'less/mixin',
+        filter: 'remove-source-tokens'
       }
     ],
     actions: ['include-media-queries-less', 'include-display-less', 'concat-files']

style-dictionary/configs/scss.mjs

@@ -9,13 +9,13 @@ export const scss = (theme) => ({
       'name/kebab',
       'size/space',
       'size/px-to-rem-transitive',
-      'color/alpha',
       'color/css-transitive'
     ],
     files: [
       {
         destination: 'cdr-variable.scss',
-        format: 'scss/variables'
+        format: 'scss/variables',
+        filter: 'remove-source-tokens'
       },
       {
         destination: 'cdr-mixins.scss',

style-dictionary/configs/site.android.mjs

@@ -9,8 +9,7 @@ export const siteAndroid = (theme) => ({
       'size/space',
       'size/dp-transitive',
       'size/sp',
-      'color/alpha',
-      'color/hex8android-transitive'
+      'color/hex8android'
     ],
     files: [
       {

style-dictionary/configs/site.global.mjs

@@ -8,7 +8,6 @@ export const siteGlobal = (theme) => ({
       'name/kebab',
       'size/strip-all-px-js',
       'size/space-js',
-      'color/alpha',
       'color/css-transitive',
       'size/px-to-rem-transitive',
       'time/seconds'

style-dictionary/configs/site.ios.mjs

@@ -6,8 +6,7 @@ export const siteIos = (theme) => ({
     transforms: [
       'attribute/deprecated',
       'name/pascal',
-      'color/alpha',
-      'color/UIColor-transitive',
+      'color/UIColor',
       'size/strip-px',
       'size/space',
       'size/float'

style-dictionary/configs/site.web.mjs

@@ -9,7 +9,6 @@ export const siteWeb = (theme) => ({
       'name/kebab',
       'size/strip-px',
       'size/space-js',
-      'color/alpha',
       'color/css-transitive',
       'size/px-to-rem-transitive',
       'time/seconds'

style-dictionary/formats/figma.mjs

@@ -9,7 +9,7 @@ export const figma = (StyleDictionary) => {
   StyleDictionary.registerFormat({
     name: 'figma',
     format: ({ dictionary }) => {
-      const propsToRemove = ['isSource', 'attributes', 'path', 'docs', 'newToken', 'name', 'alpha']
+      const propsToRemove = ['isSource', 'attributes', 'path', 'docs', 'newToken', 'name', 'docCategory', 'docExample']
       const transformedTokens = cleanMeta(dictionary.tokens, { cleanMeta: propsToRemove })
 
       return JSON.stringify(transformedTokens, null, 2)

style-dictionary/utils.mjs

@@ -12,3 +12,8 @@ export const commonConfig = (theme, platform) => ({
     showFileHeader: false
   }
 })
+
+export const filterSourceTokensAndType = (token, type) => {
+  const types = Array.isArray(type) ? type : [type]
+  return token.path[0] !== 'options' && token.path[0] !== 'theme' && types.includes(token.$type)
+}