From e878cc471adbff1f915fc4e716b80f94af1bc707 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mmarsz@equinor.com>
Date: Wed, 25 Nov 2020 12:08:30 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20interactions=20base=20token?=
 =?UTF-8?q?=20(#915)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Added interactions base token

* ♻️ lowercasing blendmode
---
 .../figma-broker/files/design-tokens/index.js |  8 ++++----
 .../{states.js => interactions.js}            |  4 ++--
 apps/figma-broker/transformers/index.js       | 19 ++++++++++---------
 libraries/tokens/base/index.ts                |  2 ++
 libraries/tokens/base/interactions.ts         | 15 +++++++++++++++
 5 files changed, 33 insertions(+), 15 deletions(-)
 rename apps/figma-broker/files/design-tokens/{states.js => interactions.js} (85%)
 create mode 100644 libraries/tokens/base/interactions.ts

diff --git a/apps/figma-broker/files/design-tokens/index.js b/apps/figma-broker/files/design-tokens/index.js
index 60d4370857..e723df0c75 100644
--- a/apps/figma-broker/files/design-tokens/index.js
+++ b/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:
diff --git a/apps/figma-broker/files/design-tokens/states.js b/apps/figma-broker/files/design-tokens/interactions.js
similarity index 85%
rename from apps/figma-broker/files/design-tokens/states.js
rename to apps/figma-broker/files/design-tokens/interactions.js
index 1434c1f66b..1a2f81146c 100644
--- a/apps/figma-broker/files/design-tokens/states.js
+++ b/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)
diff --git a/apps/figma-broker/transformers/index.js b/apps/figma-broker/transformers/index.js
index 6384aa3dc4..55c0f67978 100644
--- a/apps/figma-broker/transformers/index.js
+++ b/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),
   }
 }
diff --git a/libraries/tokens/base/index.ts b/libraries/tokens/base/index.ts
index 803bb45b78..fe06d6bd55 100644
--- a/libraries/tokens/base/index.ts
+++ b/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,
diff --git a/libraries/tokens/base/interactions.ts b/libraries/tokens/base/interactions.ts
new file mode 100644
index 0000000000..49e3b64a9e
--- /dev/null
+++ b/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)',
+  },
+}