Merge pull request #46 from 8845musign/update-tokens

Update Tokens

scripts/figma.js

@@ -28,6 +28,16 @@ const rgbaToHex = (r, g, b, a) => {
   return '#' + hr + hg + hb + ha;
 };
 
+const extractAttribute = (name, document) => {
+  if (name.startsWith('border')) {
+    return document.strokes[0];
+  } else if (name.startsWith('text')){
+    return document.children[0].fills[0];
+  } else {
+    return document.fills[0];
+  }
+}
+
 const main = async () => {
   // Get styles value
   const responseStyles = await fetchFigma('/styles');
@@ -48,34 +58,27 @@ const main = async () => {
   // Generate color tokens
   const primitiveColors = {};
 
-  Object.values(styleNodes)
-    .filter(({ document }) => document.name.includes('Primitive'))
-    .sort((a, b) => a.document.name.localeCompare(b.document.name))
-    .forEach(({ document }) => {
-      const { opacity, color } = document.fills[0];
-      const { r, g, b } = color;
-      const hex = rgbaToHex(r * 255, g * 255, b * 255, opacity);
-      const colorNameArr = document.name.toLowerCase().split('/').slice(1);
-      primitiveColors[colorNameArr.join('-')] = {
-        value: hex,
-      };
-    });
+  Object.values(componentNodes)
+      .filter(({ document }) => document.name.includes('PrimitiveColor'))
+      .forEach(({ document }) => {
+        const name = document.name.split('/')[1].toLowerCase();
+        const c = document.fills[0].color;
+        primitiveColors[name] = {
+            value: rgbaToHex(c.r * 255, c.g * 255, c.b * 255, c.a),
+        };
+      });
 
   const semanticColors = {};
 
-  Object.values(styleNodes)
-    .filter(({ document }) => document.name.includes('Semantic'))
-    .sort((a, b) => a.document.name.localeCompare(b.document.name))
+  Object.values(componentNodes)
+    .filter(({ document }) => document.name.includes('SemanticColor'))
     .forEach(({ document }) => {
-      const { opacity, color } = document.fills[0];
-      const { r, g, b } = color;
-      const colorName = document.name.toLowerCase().replaceAll(' ', '/').split('/').slice(1).join('-');
-      const style = styles.find((s) => s.name === document.name);
-      const reference = style.description;
-      semanticColors[colorName] = {
-        value: !reference
-          ? rgbaToHex(r * 255, g * 255, b * 255, opacity)
-          : `{color.${reference.toLowerCase().replaceAll(' ', '-')}.value}`,
+      const name = document.name.split('/')[1].toLowerCase();
+      const attribute = extractAttribute(name, document);
+      const { color } = attribute;
+      const alpha = attribute.opacity != null ? attribute.opacity : color.a;
+      semanticColors[name] = {
+        value: rgbaToHex(color.r * 255, color.g * 255, color.b * 255, alpha),
       };
     });
 

tokens/color/primitive.json

@@ -1 +1 @@
-{"color":{"ubie-black-100":{"value":"#16191f0a"},"ubie-black-200":{"value":"#16191f2e"},"ubie-black-400":{"value":"#16191f7a"},"ubie-black-500":{"value":"#16191fa3"},"ubie-black-700":{"value":"#16191fe5"},"ubie-black-900":{"value":"#16191f"},"ubie-blue-100":{"value":"#f2f6fd"},"ubie-blue-200":{"value":"#cbd3f2"},"ubie-blue-400":{"value":"#6a82d9"},"ubie-blue-500":{"value":"#3959cc"},"ubie-blue-700":{"value":"#263f94"},"ubie-pink-100":{"value":"#fdf2f9"},"ubie-pink-200":{"value":"#f8cfde"},"ubie-pink-400":{"value":"#ea77a1"},"ubie-pink-500":{"value":"#da3170"},"ubie-pink-700":{"value":"#a33961"},"ubie-red-100":{"value":"#fcf4f4"},"ubie-red-200":{"value":"#f6d0d0"},"ubie-red-400":{"value":"#ec6d6d"},"ubie-red-500":{"value":"#db3939"},"ubie-red-700":{"value":"#b02b2b"},"ubie-white":{"value":"#ffffff"}}}
+{"color":{"ubie-purple-800":{"value":"#7322a2ff"},"ubie-blue-200":{"value":"#cfd7f3ff"},"ubie-blue-400":{"value":"#8296dfff"},"ubie-orange-500":{"value":"#ffb243ff"},"ubie-red-500":{"value":"#e85474ff"},"ubie-black-700":{"value":"#55575bff"},"ubie-red-800":{"value":"#a1213cff"},"ubie-red-1000":{"value":"#661526ff"},"ubie-green-700":{"value":"#21ad7bff"},"ubie-purple-1000":{"value":"#491667ff"},"ubie-purple-200":{"value":"#e9cdf9ff"},"ubie-pink-600":{"value":"#da3170ff"},"ubie-green-600":{"value":"#27cc91ff"},"ubie-white":{"value":"#ffffffff"},"ubie-red-600":{"value":"#e32e55ff"},"ubie-pink-800":{"value":"#9b2350ff"},"ubie-pink-900":{"value":"#7c1c40ff"},"ubie-pink-500":{"value":"#e1568aff"},"ubie-purple-400":{"value":"#c47deeff"},"ubie-orange-100":{"value":"#fff9f0ff"},"ubie-purple-900":{"value":"#5c1b82ff"},"ubie-black-600":{"value":"#686a6dff"},"ubie-purple-300":{"value":"#d7a6f3ff"},"ubie-orange-700":{"value":"#d98916ff"},"ubie-red-900":{"value":"#811a30ff"},"ubie-purple-100":{"value":"#f8effcff"},"ubie-pink-1000":{"value":"#621632ff"},"ubie-red-200":{"value":"#f8cdd6ff"},"ubie-blue-100":{"value":"#f0f2fcff"},"ubie-orange-800":{"value":"#b57212ff"},"ubie-red-700":{"value":"#c12748ff"},"ubie-blue-800":{"value":"#283f91ff"},"ubie-blue-900":{"value":"#203374ff"},"ubie-orange-1000":{"value":"#73480cff"},"ubie-green-800":{"value":"#1c9167ff"},"ubie-black-500":{"value":"#96989aff"},"ubie-blue-1000":{"value":"#1a285cff"},"ubie-purple-700":{"value":"#8a29c2ff"},"ubie-orange-600":{"value":"#ffa11aff"},"ubie-orange-300":{"value":"#ffd79dff"},"ubie-blue-600":{"value":"#3959ccff"},"ubie-orange-400":{"value":"#ffc46fff"},"ubie-green-300":{"value":"#a2e9d0ff"},"ubie-green-500":{"value":"#4ed5a5ff"},"ubie-pink-700":{"value":"#b92a5fff"},"ubie-black-900":{"value":"#32353aff"},"ubie-red-300":{"value":"#f3a5b6ff"},"ubie-black-400":{"value":"#c5c6c7ff"},"ubie-black-100":{"value":"#fdfdfdff"},"ubie-green-400":{"value":"#77dfbaff"},"ubie-black-800":{"value":"#393c41ff"},"ubie-blue-700":{"value":"#304cadff"},"ubie-pink-200":{"value":"#f6ceddff"},"ubie-pink-400":{"value":"#e87da5ff"},"ubie-black-300":{"value":"#dcddddff"},"ubie-orange-200":{"value":"#ffe8c8ff"},"ubie-purple-600":{"value":"#a230e4ff"},"ubie-green-100":{"value":"#e9faf4ff"},"ubie-black-200":{"value":"#f6f6f6ff"},"ubie-green-1000":{"value":"#125c41ff"},"ubie-orange-900":{"value":"#915c0fff"},"ubie-pink-100":{"value":"#fcf0f5ff"},"ubie-red-400":{"value":"#ed7b94ff"},"ubie-blue-500":{"value":"#5d77d5ff"},"ubie-green-900":{"value":"#167453ff"},"ubie-pink-300":{"value":"#efa6c2ff"},"ubie-blue-300":{"value":"#aab8e9ff"},"ubie-black-1000":{"value":"#16191fff"},"ubie-purple-500":{"value":"#b355e9ff"},"ubie-green-200":{"value":"#cbf3e5ff"},"ubie-red-100":{"value":"#fceff2ff"}}}

tokens/color/semantics.json

@@ -1 +1 @@
-{"color":{"accent":{"value":"{color.ubie-pink-500.value}"},"accent-darken":{"value":"{color.ubie-pink-700.value}"},"alert":{"value":"{color.ubie-red-500.value}"},"alert-darken":{"value":"{color.ubie-red-700.value}"},"background-accent":{"value":"{color.ubie-pink-100.value}"},"background-accent-darken":{"value":"{color.ubie-pink-200.value}"},"background-alert":{"value":"{color.ubie-red-100.value}"},"background-gray":{"value":"{color.ubie-black-100.value}"},"background-modal":{"value":"#00000080"},"background-primary":{"value":"{color.ubie-blue-100.value}"},"background-primary-darken":{"value":"{color.ubie-blue-200.value}"},"background-white":{"value":"{color.ubie-white.value}"},"border":{"value":"{color.ubie-black-200.value}"},"overlay":{"value":"#00000033"},"primary":{"value":"{color.ubie-blue-500.value}"},"primary-darken":{"value":"{color.ubie-blue-700.value}"},"text-disabled":{"value":"{color.ubie-black-200.value}"},"text-link":{"value":"{color.ubie-blue-500.value}"},"text-link-sub":{"value":"{color.ubie-black-500.value}"},"text-main":{"value":"{color.ubie-black-700.value}"},"text-placeholder":{"value":"{color.ubie-black-400.value}"},"text-sub":{"value":"{color.ubie-black-500.value}"},"text-white":{"value":"{color.ubie-white.value}"}}}
+{"color":{"background-red-inverse":{"value":"#e32e55ff"},"background-red-inverse-darken":{"value":"#a1213cff"},"background-pink-inverse-darken":{"value":"#9b2350ff"},"background-pink-inverse":{"value":"#da3170ff"},"background-blue-inverse-darken":{"value":"#283f91ff"},"background-blue-inverse":{"value":"#3959ccff"},"background-orange-inverse-darken":{"value":"#b57212ff"},"background-orange-inverse":{"value":"#ffa11aff"},"background-purple-inverse":{"value":"#a230e4ff"},"background-green-inverse":{"value":"#27cc91ff"},"background-purple-inverse-darken":{"value":"#7322a2ff"},"background-green-inverse-darken":{"value":"#1c9167ff"},"background-white":{"value":"#ffffffff"},"border-green":{"value":"#77dfbaff"},"background-blue-darken":{"value":"#cfd7f3ff"},"border-green-darken":{"value":"#4ed5a5ff"},"border-pink-darken":{"value":"#e1568aff"},"background-purple-darken":{"value":"#e9cdf9ff"},"text-red":{"value":"#a1213cff"},"background-orange-darken":{"value":"#ffe8c8ff"},"border-purple-darken":{"value":"#b355e9ff"},"text-disabled":{"value":"#dcddddff"},"background-orange":{"value":"#fff9f0ff"},"border-orange":{"value":"#ffc46fff"},"text-black":{"value":"#393c41ff"},"border-blue":{"value":"#8296dfff"},"background-black-darken":{"value":"#f6f6f6ff"},"background-pink-darken":{"value":"#f6ceddff"},"background-modal":{"value":"#00000080"},"border-red":{"value":"#ed7b94ff"},"border-orange-darken":{"value":"#ffb243ff"},"background-green-darken":{"value":"#cbf3e5ff"},"background-blue":{"value":"#f0f2fcff"},"text-black-darken":{"value":"#32353aff"},"background-purple":{"value":"#f8effcff"},"text-green-darken":{"value":"#167453ff"},"text-white":{"value":"#ffffffff"},"text-orange":{"value":"#b57212ff"},"text-orange-darken":{"value":"#915c0fff"},"text-link-sub":{"value":"#686a6dff"},"border-red-darken":{"value":"#e85474ff"},"text-purple":{"value":"#7322a2ff"},"border-black-darken":{"value":"#96989aff"},"border-black":{"value":"#c5c6c7ff"},"text-sub":{"value":"#686a6dff"},"text-blue":{"value":"#283f91ff"},"text-blue-darken":{"value":"#203374ff"},"background-black":{"value":"#fdfdfdff"},"text-placeholder":{"value":"#96989aff"},"text-pink-darken":{"value":"#7c1c40ff"},"text-purple-darken":{"value":"#5c1b82ff"},"text-red-darken":{"value":"#811a30ff"},"text-green":{"value":"#1c9167ff"},"text-main":{"value":"#32353aff"},"text-link":{"value":"#3959ccff"},"background-green":{"value":"#e9faf4ff"},"background-pink":{"value":"#fcf0f5ff"},"background-red-darken":{"value":"#f8cdd6ff"},"border-purple":{"value":"#c47deeff"},"background-red":{"value":"#fceff2ff"},"text-pink":{"value":"#9b2350ff"},"border-blue-darken":{"value":"#5d77d5ff"},"border-pink":{"value":"#e87da5ff"}}}

tokens/size/icon.json

@@ -1 +1 @@
-{"icon":{"sm":{"value":1.25,"attributes":{"note":"20px"}},"xs":{"value":1,"attributes":{"note":"16px"}},"3xl":{"value":5,"attributes":{"note":"80px"}},"lg":{"value":1.75,"attributes":{"note":"28px"}},"2xl":{"value":4,"attributes":{"note":"64px"}},"4xl":{"value":6.5,"attributes":{"note":"104px"}},"xl":{"value":2,"attributes":{"note":"32px"}},"md":{"value":1.5,"attributes":{"note":"24px"}}}}
+{"icon":{"sm":{"value":1.25,"attributes":{"note":"20px"}},"xs":{"value":1,"attributes":{"note":"16px"}},"3xl":{"value":5,"attributes":{"note":"80px"}},"lg":{"value":1.75,"attributes":{"note":"28px"}},"2xl":{"value":4,"attributes":{"note":"64px"}},"xl":{"value":2,"attributes":{"note":"32px"}},"md":{"value":1.5,"attributes":{"note":"24px"}},"4xl":{"value":6.5,"attributes":{"note":"104px"}}}}