Remove usage of mix (#1115)

* removing mix

* f

* updates

* f

* f

Author: lukasoppermann

README.md

@@ -80,27 +80,6 @@ You can create color tokens that inherit a color but have a different alpha valu
 }
 ```
 
-#### Mix
-
-In rare cases, you may need to create a color between two steps in the color scale, e.g. between `gray.4` and `gray.5`. A common example are interactive states, like `hover` where a full step on the color scale would be to much. For those cases you can use the `mix` property.
-
-The `mix` proeprty mixes the color it gets into the main color from the `$value` attribute. The amount added is controlled by the `weight`. A weight of `0.1` adds 10% of the color, and a weight of `0.75` adds 75%.
-
-A `mix` proprty must always have a `color` and a `weight` child. `color` can be a `hex` value or a reference to a valid color. The `weight` property must receive a value between `0.0` and `1`.
-
-```json5
-{
-  control: {
-    $value: '{base.color.gray.4}', // main color
-    $type: 'color',
-    mix: {
-      color: '{base.color.gray.5}', // color to mix into the main color
-      weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
-    },
-  },
-}
-```
-
 #### Extensions property
 
 According to the [w3c design token specs](https://design-tokens.github.io/community-group/format/#design-token), the [`$extensions`](https://design-tokens.github.io/community-group/format/#extensions) property is used for additional meta data.

integration/integration.test.ts

@@ -15,7 +15,6 @@ describe('PrimerStyleDictionary', async () => {
           transforms: [
             'name/pathToKebabCase',
             'color/hex',
-            'color/hexMix',
             'dimension/rem',
             'duration/css',
             'shadow/css',
@@ -40,7 +39,6 @@ describe('PrimerStyleDictionary', async () => {
           usesDtcg: true,
           transforms: [
             'color/hex',
-            'color/hexMix',
             'dimension/rem',
             'shadow/css',
             'border/css',
@@ -65,7 +63,6 @@ describe('PrimerStyleDictionary', async () => {
           buildPath: `${buildPath}/js/`,
           transforms: [
             'color/hex',
-            'color/hexMix',
             'dimension/rem',
             'shadow/css',
             'border/css',
@@ -112,7 +109,6 @@ describe('PrimerStyleDictionary', async () => {
           buildPath: `${buildPath}/json/`,
           transforms: [
             'color/hex',
-            'color/hexMix',
             'dimension/rem',
             'shadow/css',
             'border/css',

scripts/diffTokenProps.ts

@@ -11,7 +11,7 @@ type DiffItem = {
 
 const isToken = (obj: Record<string, unknown>): boolean => Object.prototype.hasOwnProperty.call(obj, '$value')
 
-const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => {
+const diffProps = (diffArray: DiffItem[], propsToCheck = ['alpha']) => {
   const diff = []
   // iterate over each theme
   for (const {mainThemeName, mainThemeDir, mainFiles, overridesDir} of diffArray) {

src/filters/index.ts

@@ -1,7 +1,6 @@
 export {isBorder} from './isBorder.js'
 export {isColor} from './isColor.js'
 export {isColorWithAlpha} from './isColorWithAlpha.js'
-export {isColorWithMix} from './isColorWithMix.js'
 export {isDimension} from './isDimension.js'
 export {isDeprecated} from './isDeprecated.js'
 export {isDuration} from './isDuration.js'

src/filters/isColorWithMix.test.ts

@@ -82,7 +82,7 @@ export const jsonFigma: FormatFn = async ({dictionary, file: _file, platform}: F
   // loop through tokens sorted by reference
   for (const token of sortedTokens) {
     // deconstruct token
-    const {attributes, $value: value, $type, $description: description, original, alpha, mix} = token
+    const {attributes, $value: value, $type, $description: description, original, alpha} = token
     const {mode, collection, scopes, group, codeSyntax} = attributes || {}
     // early escape if no type is present
     if (!$type) return
@@ -115,7 +115,6 @@ export const jsonFigma: FormatFn = async ({dictionary, file: _file, platform}: F
         value,
         type: getFigmaType($type),
         alpha,
-        isMix: mix ? true : undefined,
         description,
         refId: [collection, token.name].filter(Boolean).join('/'),
         reference: getReference(dictionary, original.$value, platform),

src/filters/isColorWithMix.ts

@@ -28,7 +28,6 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     transforms: [
       'name/pathToKebabCase',
       'color/hex',
-      'color/hexMix',
       'cubicBezier/css',
       'dimension/rem',
       'duration/css',

src/formats/jsonFigma.ts

@@ -9,7 +9,6 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath, opti
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
-    'color/hexMix',
     'dimension/rem',
     'shadow/css',
     'border/css',

src/platforms/css.ts

@@ -8,7 +8,6 @@ export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): P
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
-    'color/hexMix',
     'dimension/rem',
     'shadow/css',
     'border/css',

src/platforms/docJson.ts

@@ -8,7 +8,6 @@ export const javascript: PlatformInitializer = (outputFile, prefix, buildPath, o
   preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
-    'color/hexMix',
     'dimension/rem',
     'shadow/css',
     'border/css',

src/platforms/fallbacks.ts

@@ -8,7 +8,6 @@ export const json: PlatformInitializer = (outputFile, prefix, buildPath, options
   preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
-    'color/hexMix',
     'dimension/rem',
     'shadow/css',
     'border/css',

src/platforms/javascript.ts

@@ -9,7 +9,6 @@ export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath, op
   transforms: [
     'name/pathToKebabCase',
     'color/hex',
-    'color/hexMix',
     'dimension/remPxArray',
     'shadow/css',
     'border/css',

src/platforms/json.ts

@@ -8,7 +8,6 @@ export const typescript: PlatformInitializer = (outputFile, prefix, buildPath, o
   preprocessors: ['themeOverrides'],
   transforms: [
     'color/hex',
-    'color/hexMix',
     'dimension/rem',
     'shadow/css',
     'border/css',

src/platforms/styleLint.ts

@@ -3,7 +3,6 @@ import {
   borderToCss,
   colorToRgbAlpha,
   colorToHex,
-  colorToHexMix,
   colorToRgbaFloat,
   cubicBezierToCss,
   dimensionToRem,
@@ -109,8 +108,6 @@ PrimerStyleDictionary.registerTransform(colorToRgbAlpha)
 
 PrimerStyleDictionary.registerTransform(colorToRgbaFloat)
 
-PrimerStyleDictionary.registerTransform(colorToHexMix)
-
 PrimerStyleDictionary.registerTransform(colorToHex)
 
 PrimerStyleDictionary.registerTransform(cubicBezierToCss)

src/platforms/typescript.ts

@@ -12,13 +12,6 @@ export const colorToken = baseToken
     $value: z.union([colorHexValue, referenceValue]),
     $type: tokenType('color'),
     alpha: alphaValue.optional().nullable(),
-    mix: z
-      .object({
-        color: z.string(),
-        weight: z.number().min(0).max(1),
-      })
-      .nullable()
-      .optional(),
     $extensions: z
       .object({
         alpha: z.number().min(0).max(1).optional().nullable(),

src/primerStyleDictionary.ts

@@ -72,7 +72,6 @@
           },
         },
         alpha: 0.15,
-        mix: null,
       },
     },
     additionWord: {
@@ -153,7 +152,6 @@
             scopes: ['bgColor'],
           },
         },
-        mix: null,
       },
     },
     deletionWord: {