✨ Added interactions base token (#915)

* ✨ Added interactions base token

* ♻️ lowercasing blendmode

apps/figma-broker/files/design-tokens/index.js

@@ -4,7 +4,7 @@ import { makeElevationTokens } from './elevation'
 import { makeClickboundsTokens } from './clickbounds'
 import { makeTextTokens } from './typography'
 import { makeShapeTokens } from './shape'
-import { makeStatesTokens } from './states'
+import { makeInteractionsTokens } from './interactions'
 import { fixPageName } from '@utils'
 
 export const makeTokens = (figmaFile) => {
@@ -52,10 +52,10 @@ export const makeTokens = (figmaFile) => {
           value: makeShapeTokens(data, getStyle),
         })
         break
-      case 'interaction: states':
+      case 'interaction states':
         tokens.push({
-          name: 'states',
-          value: makeStatesTokens(data, getStyle),
+          name: 'interactions',
+          value: makeInteractionsTokens(data, getStyle),
         })
         break
       default:

apps/figma-broker/files/design-tokens/states.js → apps/figma-broker/files/design-tokens/interactions.js

@@ -2,7 +2,7 @@ import R from 'ramda'
 import { propName, withType, pickChildren, toDict } from '@utils'
 import { toFocus, toOverlay } from '@transformers'
 
-const toStatesTokens = R.pipe(
+const toInteractionsTokens = R.pipe(
   R.filter(withType('frame')),
   pickChildren,
   R.filter(withType('component')),
@@ -29,4 +29,4 @@ const toStatesTokens = R.pipe(
   }),
   toDict,
 )
-export const makeStatesTokens = (states) => toStatesTokens(states)
+export const makeInteractionsTokens = (states) => toInteractionsTokens(states)

apps/figma-broker/transformers/index.js

@@ -33,27 +33,28 @@ export const toSpacer = (name, box) => {
 export const toFocus = (figmaNode) => {
   if (R.isNil(figmaNode)) return {}
 
-  const focus = R.head(figmaNode.children)
-  const { strokeDashes, strokes, cornerRadius } = focus
+  const focus = Array.isArray(figmaNode.children)
+    ? R.head(figmaNode.children)
+    : figmaNode
+  const { strokeDashes, strokes } = focus
   const stroke = strokes.find(withType('solid')) || fallback
-  const [dashWidth, dashGap] = strokeDashes
-  const focusStyle = typeof strokeDashes === 'undefined' ? '' : 'dashed'
-  const radius = cornerRadius === 100 ? '50%' : px(cornerRadius)
+  const [dashWidth] = strokeDashes
+  const style = typeof strokeDashes === 'undefined' ? '' : 'dashed'
 
   return removeNilAndEmpty({
-    type: focusStyle,
+    style,
     color: fillToRgba(stroke),
     width: px(dashWidth),
-    gap: px(dashGap),
-    radius,
   })
 }
 
 export const toOverlay = (figmaNode) => {
   if (R.isNil(figmaNode)) return {}
 
-  const fill = figmaNode.fills.find(withType('solid')) || fallback
+  const { fills, blendMode } = figmaNode
+  const fill = fills.find(withType('solid')) || fallback
   return {
+    blendMode: R.toLower(blendMode),
     pressedColor: fillToRgba(fill),
   }
 }

libraries/tokens/base/index.ts

@@ -1,6 +1,7 @@
 import { clickbounds } from './clickbounds'
 import { colors } from './colors'
 import { elevation } from './elevation'
+import { interactions } from './interactions'
 import { shape } from './shape'
 import { spacings } from './spacings'
 import { typography } from './typography'
@@ -9,6 +10,7 @@ export const tokens = {
   clickbounds,
   colors,
   elevation,
+  interactions,
   shape,
   spacings,
   typography,

libraries/tokens/base/interactions.ts

@@ -0,0 +1,15 @@
+export const interactions = {
+  pressed_dark_overlay: {
+    blendMode: 'darken',
+    pressedColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  focused: {
+    style: 'dashed',
+    color: 'rgba(0, 112, 121, 1)',
+    width: '1px',
+  },
+  pressed_light_overlay: {
+    blendMode: 'pass_through',
+    pressedColor: 'rgba(255, 255, 255, 0.2)',
+  },
+}