@madgex/design-system 9.3.0 → 10.0.0

package/src/tokens/_config.js

@@ -1,181 +0,0 @@
-const path = require('path');
-
-const config = {
-  // This source path needs to be in posix because combineJSON util inside style dictionary only accepts that
-  source: [path.resolve(__dirname, '../tokens/*.json').split(path.sep).join(path.posix.sep)],
-  platforms: {
-    'css-variables': {
-      // transformGroup: 'css',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'css/rawData'],
-      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/css/')}/`,
-      prefix: 'mds',
-      files: [
-        {
-          destination: '_tokens.css',
-          format: 'css/variables',
-          filter: 'removePrivate',
-        },
-      ],
-    },
-    'scss-variables': {
-      transforms: ['attribute/cti', 'name/cti/kebab'],
-      buildPath: `${path.resolve(__dirname, '../scss/constants/')}/`,
-      prefix: 'constant',
-      files: [
-        {
-          destination: '_sd-tokens.scss',
-          format: 'scss/map-deep',
-          options: {
-            themeable: false,
-          },
-          filter(token) {
-            // only keep "private" tokens aka constants
-            return !!(token && token.private);
-          },
-        },
-      ],
-    },
-    // sketch: {
-    //   transformGroup: 'web',
-    //   buildPath: `${path.resolve(__dirname, '../../dist/_tokens/sketch/')}/`,
-    //   prefix: 'mds',
-    //   files: [
-    //     {
-    //       destination: '_tokens.sketchpalette',
-    //       format: 'sketch/palette',
-    //     },
-    //   ],
-    // },
-    'json-flat': {
-      transformGroup: 'js',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
-      buildPath: 'dist/_tokens/json/',
-      files: [
-        {
-          destination: '_tokens-flat.json',
-          format: 'json/flat',
-        },
-      ],
-    },
-    'json-nested': {
-      transformGroup: 'js',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
-      buildPath: 'dist/_tokens/json/',
-      files: [
-        {
-          destination: '_tokens-nested.json',
-          format: 'json',
-        },
-      ],
-    },
-    // 'js-es6': {
-    //   transformGroup: 'js',
-    //   buildPath: 'dist/js/',
-    //   prefix: 'mds',
-    //   files: [
-    //     {
-    //       format: 'javascript/es6',
-    //       destination: '_variables-es6.js',
-    //       filter: {
-    //         attributes: {
-    //           category: 'color',
-    //         },
-    //       },
-    //     },
-    //   ],
-    // },
-    'js-module': {
-      transforms: ['attribute/cti', 'name/cti/pascal'],
-      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/js/')}/`,
-      prefix: 'mds',
-      files: [
-        {
-          destination: '_tokens-module.js',
-          format: 'javascript/module',
-        },
-      ],
-    },
-    // 'js-object': {
-    //   transformGroup: 'js',
-    //   buildPath: 'build/js/',
-    //   files: [
-    //     {
-    //       destination: '_variables-object.js',
-    //       format: 'javascript/object',
-    //     },
-    //   ],
-    // },
-
-    // android: {
-    //   transformGroup: 'android',
-    //   buildPath: 'build/android/',
-    //   files: [
-    //     {
-    //       destination: 'font_dimens.xml',
-    //       format: 'android/fontDimens',
-    //     },
-    //     {
-    //       destination: 'colors.xml',
-    //       format: 'android/colors',
-    //       filter: {
-    //         attributes: {
-    //           category: 'color',
-    //         },
-    //       },
-    //     },
-    //   ],
-    // },
-    // ios: {
-    //   transformGroup: 'ios',
-    //   buildPath: 'build/ios/',
-    //   files: [
-    //     {
-    //       destination: 'StyleDictionaryColor.h',
-    //       format: 'ios/colors.h',
-    //       className: 'StyleDictionaryColor',
-    //       type: 'StyleDictionaryColorName',
-    //       filter: {
-    //         attributes: {
-    //           category: 'color',
-    //         },
-    //       },
-    //     },
-    //     {
-    //       destination: 'StyleDictionaryColor.m',
-    //       format: 'ios/colors.m',
-    //       className: 'StyleDictionaryColor',
-    //       type: 'StyleDictionaryColorName',
-    //       filter: {
-    //         attributes: {
-    //           category: 'color',
-    //         },
-    //       },
-    //     },
-    //     {
-    //       destination: 'StyleDictionarySize.h',
-    //       format: 'ios/static.h',
-    //       className: 'StyleDictionarySize',
-    //       type: 'float',
-    //       filter: {
-    //         attributes: {
-    //           category: 'size',
-    //         },
-    //       },
-    //     },
-    //     {
-    //       destination: 'StyleDictionarySize.m',
-    //       format: 'ios/static.m',
-    //       className: 'StyleDictionarySize',
-    //       type: 'float',
-    //       filter: {
-    //         attributes: {
-    //           category: 'size',
-    //         },
-    //       },
-    //     },
-    //   ],
-    // },
-  },
-};
-
-module.exports = config;

package/tasks/colorTransforms.js

@@ -1,65 +0,0 @@
-const { TinyColor } = require('@ctrl/tinycolor');
-
-const TRANSFORM_AMOUNTS = {
-  LIGHT: 10,
-  LIGHTEST: 95,
-  DARK: 10,
-  DARKEST: 12,
-};
-
-// Replicates Sass lightness($color) function
-function lightness(color) {
-  const { l } = color.toHsl();
-
-  return l * 100;
-}
-
-function createColorsFromBase({ value: baseColor }) {
-  const asTinyColor = new TinyColor(baseColor);
-
-  return {
-    light: {
-      value: asTinyColor.lighten(TRANSFORM_AMOUNTS.LIGHT).toHexString(),
-    },
-    lightest: {
-      value: asTinyColor.lighten(TRANSFORM_AMOUNTS.LIGHTEST - lightness(asTinyColor)).toHexString(),
-    },
-    dark: {
-      value: asTinyColor.darken(TRANSFORM_AMOUNTS.DARK).toHexString(),
-    },
-    darkest: {
-      value: asTinyColor.darken(lightness(asTinyColor) - TRANSFORM_AMOUNTS.DARKEST).toHexString(),
-    },
-  };
-}
-
-function transformAllColors(colors) {
-  return colors.reduce((builtBrand, [name, color]) => {
-    if (!builtBrand[name]) {
-      // eslint-disable-next-line no-param-reassign
-      builtBrand[name] = { ...createColorsFromBase(color.base), ...color };
-    }
-
-    return builtBrand;
-  }, {});
-}
-
-function generateBrandAndStatus({ brand, status }) {
-  if (status) {
-    return { brand: transformAllColors(Object.entries(brand)), status: transformAllColors(Object.entries(status)) };
-  }
-
-  return { brand: transformAllColors(Object.entries(brand)) };
-}
-
-function transformTokens(tokensObject) {
-  return {
-    ...tokensObject,
-    color: {
-      ...tokensObject.color,
-      ...generateBrandAndStatus(tokensObject.color),
-    },
-  };
-}
-
-module.exports = transformTokens;

package/tasks/registerTransforms.js

@@ -1,17 +0,0 @@
-function registerTransforms(StyleDictionary) {
-  return new Promise((resolve) => {
-    StyleDictionary.registerTransform({
-      name: 'css/rawData',
-      type: 'value',
-      matcher(prop) {
-        return prop.rawData;
-      },
-      transformer(prop) {
-        return prop.rawData;
-      },
-    });
-    resolve('Transform registered');
-  });
-}
-
-exports.registerTransforms = registerTransforms;