1522 when applying border tokens we always apply color as a hex inste…

…ad of style when available (#1531)
tokens-studio · Jan 10, 2023 · aa2246a · aa2246a
1 parent 231bc20
commit aa2246a
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/src/plugin/extractColorInBorderTokenForAlias.ts b/src/plugin/extractColorInBorderTokenForAlias.ts
@@ -0,0 +1,16 @@
+import { MapValuesToTokensResult } from '@/types';
+import { NodeTokenRefMap } from '@/types/NodeTokenRefMap';
+import { AnyTokenList } from '@/types/tokens';
+
+export function extractColorInBorderTokenForAlias(tokens: Map<string, AnyTokenList[number]>, values: NodeTokenRefMap, borderToken: string): MapValuesToTokensResult {
+  const resolvedToken = tokens.get(borderToken);
+  if (resolvedToken?.rawValue && typeof resolvedToken.rawValue === 'object' && 'color' in resolvedToken.rawValue && resolvedToken.rawValue.color) {
+    const { color } = resolvedToken.rawValue;
+    const { borderColor } = values;
+    let colorTokenName = color;
+    if (String(color).startsWith('$')) colorTokenName = String(color).slice(1, String(color).length);
+    if (String(color).startsWith('{')) colorTokenName = String(color).slice(1, String(color).length - 1);
+    values = { ...values, ...(borderColor ? { } : { borderColor: String(colorTokenName) }) };
+  }
+  return values;
+}
diff --git a/src/plugin/node.test.ts b/src/plugin/node.test.ts
@@ -4,6 +4,7 @@ import {
   destructureToken, mapValuesToTokens, returnValueToLookFor, saveStorageType, saveOnboardingExplainerSets, saveOnboardingExplainerInspect, saveOnboardingExplainerSyncProviders,
 } from './node';
 import getOnboardingExplainer from '@/utils/getOnboardingExplainer';
+import { TokenTypes } from '@/constants/TokenTypes';
 
 const singleShadowToken = {
   type: 'boxShadow',
@@ -49,6 +50,15 @@ const multipleShadowToken = {
   ],
 };
 
+const borderToken = {
+  type: TokenTypes.BORDER,
+  value: {
+    color: '#ff0000',
+    width: '12px',
+    type: 'solid',
+  },
+};
+
 const tokens = new Map([
   ['global.colors.blue',
     {
@@ -163,6 +173,21 @@ const mappedTokens = [
   {
     boxShadow: multipleShadowToken.value,
   },
+  {
+    border: borderToken.value,
+  },
+  {
+    borderTop: borderToken.value,
+  },
+  {
+    borderRight: borderToken.value,
+  },
+  {
+    borderLeft: borderToken.value,
+  },
+  {
+    borderBottom: borderToken.value,
+  },
 ];
 
 const applyProperties = [
@@ -173,6 +198,11 @@ const applyProperties = [
   { boxShadow: multipleShadowToken.value },
   { boxShadow: singleShadowToken.value },
   { boxShadow: multipleShadowToken.value },
+  { border: borderToken.value, borderColor: '#ff0000' },
+  { borderTop: borderToken.value, borderColor: '#ff0000' },
+  { borderRight: borderToken.value, borderColor: '#ff0000' },
+  { borderLeft: borderToken.value, borderColor: '#ff0000' },
+  { borderBottom: borderToken.value, borderColor: '#ff0000' },
 ];
 
 describe('mapValuesToTokens', () => {

diff --git a/src/plugin/node.ts b/src/plugin/node.ts
@@ -25,6 +25,7 @@ import {
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { updatePluginData } from './pluginData';
+import { extractColorInBorderTokenForAlias } from './extractColorInBorderTokenForAlias';
 
 // @TODO fix typings
 
@@ -149,6 +150,18 @@ export function destructureToken(values: MapValuesToTokensResult): MapValuesToTo
   if (values && values.border && typeof values.border === 'object' && 'color' in values.border && values.border.color) {
     values = { ...values, ...(values.borderColor ? { } : { borderColor: values.border.color }) };
   }
+  if (values && values.borderTop && typeof values.borderTop === 'object' && 'color' in values.borderTop && values.borderTop.color) {
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderTop.color }) };
+  }
+  if (values && values.borderRight && typeof values.borderRight === 'object' && 'color' in values.borderRight && values.borderRight.color) {
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderRight.color }) };
+  }
+  if (values && values.borderLeft && typeof values.borderLeft === 'object' && 'color' in values.borderLeft && values.borderLeft.color) {
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderLeft.color }) };
+  }
+  if (values && values.borderBottom && typeof values.borderBottom === 'object' && 'color' in values.borderBottom && values.borderBottom.color) {
+    values = { ...values, ...(values.borderColor ? { } : { borderColor: values.borderBottom.color }) };
+  }
   if (values && values.composition) {
     Object.entries(values.composition).forEach(([property, value]) => {
       tokensInCompositionToken[property as CompositionTokenProperty] = value;
@@ -161,15 +174,19 @@ export function destructureToken(values: MapValuesToTokensResult): MapValuesToTo
 
 export function destructureTokenForAlias(tokens: Map<string, AnyTokenList[number]>, values: NodeTokenRefMap): MapValuesToTokensResult {
   if (values && values.border) {
-    const resolvedToken = tokens.get(values.border);
-    if (resolvedToken?.rawValue && typeof resolvedToken.rawValue === 'object' && 'color' in resolvedToken.rawValue && resolvedToken.rawValue.color) {
-      const { color } = resolvedToken.rawValue;
-      const { borderColor } = values;
-      let colorTokenName = color;
-      if (String(color).startsWith('$')) colorTokenName = String(color).slice(1, String(color).length);
-      if (String(color).startsWith('{')) colorTokenName = String(color).slice(1, String(color).length - 1);
-      values = { ...values, ...(borderColor ? { } : { borderColor: String(colorTokenName) }) };
-    }
+    values = extractColorInBorderTokenForAlias(tokens, values, values.border);
+  }
+  if (values && values.borderTop) {
+    values = extractColorInBorderTokenForAlias(tokens, values, values.borderTop);
+  }
+  if (values && values.borderRight) {
+    values = extractColorInBorderTokenForAlias(tokens, values, values.borderRight);
+  }
+  if (values && values.borderLeft) {
+    values = extractColorInBorderTokenForAlias(tokens, values, values.borderLeft);
+  }
+  if (values && values.borderBottom) {
+    values = extractColorInBorderTokenForAlias(tokens, values, values.borderBottom);
   }
   if (values && values.composition) {
     const resolvedToken = tokens.get(values.composition);