API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 25th, 2020
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.55 KB | None | 0 0
raw download clone embed print report
  1. const colorMapping = [
  2. {
  3. "github": "background",
  4. "figma": "Background/Default"
  5. },
  6. {
  7. "github": "surface",
  8. "figma": "Surface/Default"
  9. },
  10. {
  11. "github": "surface-subdued",
  12. "figma": "Surface/Subdued"
  13. },
  14. {
  15. "github": "surface-neutral",
  16. "figma": "Surface Neutral/Default"
  17. },
  18. {
  19. "github": "surface-neutral-subdued",
  20. "figma": "Surface Neutral/Subdued"
  21. },
  22. {
  23. "github": "surface-hovered",
  24. "figma": "Surface/Hovered"
  25. },
  26. {
  27. "github": "surface-pressed",
  28. "figma": "Surface/Pressed"
  29. },
  30. {
  31. "github": "surface-disabled",
  32. "figma": "Surface/Disabled"
  33. },
  34. {
  35. "github": "backdrop",
  36. "figma": ""
  37. },
  38. {
  39. "github": "overlay",
  40. "figma": ""
  41. },
  42. {
  43. "github": "shadow-from-ambient-light",
  44. "figma": ""
  45. },
  46. {
  47. "github": "shadow-from-direct-light",
  48. "figma": ""
  49. },
  50. {
  51. "github": "hint-from-direct-light",
  52. "figma": ""
  53. },
  54. {
  55. "github": "on-surface",
  56. "figma": ""
  57. },
  58. {
  59. "github": "border",
  60. "figma": "Border/Default"
  61. },
  62. {
  63. "github": "border-disabled",
  64. "figma": "Border/Disabled"
  65. },
  66. {
  67. "github": "border-subdued",
  68. "figma": "Border/Subdued"
  69. },
  70. {
  71. "github": "icon",
  72. "figma": "Icon/Default"
  73. },
  74. {
  75. "github": "icon-disabled",
  76. "figma": "Icon/Disabled"
  77. },
  78. {
  79. "github": "icon-subdued",
  80. "figma": "Icon/Subdued"
  81. },
  82. {
  83. "github": "text",
  84. "figma": "Text/Default"
  85. },
  86. {
  87. "github": "text-disabled",
  88. "figma": "Text/Disabled"
  89. },
  90. {
  91. "github": "text-subdued",
  92. "figma": "Text/Subdued"
  93. },
  94. {
  95. "github": "interactive",
  96. "figma": ""
  97. },
  98. {
  99. "github": "interactive",
  100. "figma": "Interactive/Default"
  101. },
  102. {
  103. "github": "interactive-disabled",
  104. "figma": "Interactive/Disabled"
  105. },
  106. {
  107. "github": "interactive-hovered",
  108. "figma": "Interactive/Hovered"
  109. },
  110. {
  111. "github": "interactive-pressed",
  112. "figma": "Interactive/Pressed"
  113. },
  114. {
  115. "github": "focused",
  116. "figma": "Focused/Default"
  117. },
  118. {
  119. "github": "surface-selected",
  120. "figma": "Surface Selected/Default"
  121. },
  122. {
  123. "github": "surface-selected-hovered",
  124. "figma": "Surface Selected/Hovered"
  125. },
  126. {
  127. "github": "surface-selected-pressed",
  128. "figma": "Surface Selected/Pressed"
  129. },
  130. {
  131. "github": "icon-on-interactive",
  132. "figma": "Icon On/Interactive"
  133. },
  134. {
  135. "github": "text-on-interactive",
  136. "figma": "Text On/Interactive"
  137. },
  138. {
  139. "github": "secondary",
  140. "figma": ""
  141. },
  142. {
  143. "github": "action-secondary",
  144. "figma": "Action Secondary/Default"
  145. },
  146. {
  147. "github": "action-secondary-disabled",
  148. "figma": "Action Secondary/Disabled"
  149. },
  150. {
  151. "github": "action-secondary-hovered",
  152. "figma": "Action Secondary/Hovered"
  153. },
  154. {
  155. "github": "action-secondary-pressed",
  156. "figma": "Action Secondary/Pressed"
  157. },
  158. {
  159. "github": "border-secondary",
  160. "figma": "Border Secondary/Default"
  161. },
  162. {
  163. "github": "border-secondary-hovered",
  164. "figma": "Border Secondary/Hovered"
  165. },
  166. {
  167. "github": "border-secondary-disabled",
  168. "figma": "Border Secondary/Disabled"
  169. },
  170. {
  171. "github": "primary",
  172. "figma": ""
  173. },
  174. {
  175. "github": "action-primary",
  176. "figma": "Action Primary/Default"
  177. },
  178. {
  179. "github": "action-primary-disabled",
  180. "figma": "Action Primary/Disabled"
  181. },
  182. {
  183. "github": "action-primary-hovered",
  184. "figma": "Action Primary/Hovered"
  185. },
  186. {
  187. "github": "action-primary-pressed",
  188. "figma": "Action Primary/Pressed"
  189. },
  190. {
  191. "github": "icon-on-primary",
  192. "figma": "Icon On/Primary"
  193. },
  194. {
  195. "github": "text-on-primary",
  196. "figma": "Text On/Primary"
  197. },
  198. {
  199. "github": "surface-primary-selected",
  200. "figma": "Surface Primary/Selected"
  201. },
  202. {
  203. "github": "surface-primary-selected-hovered",
  204. "figma": "Surface Primary/Selected Hovered"
  205. },
  206. {
  207. "github": "surface-primary-selected-pressed",
  208. "figma": "Surface Primary/Selected Pressed"
  209. },
  210. {
  211. "github": "critical",
  212. "figma": ""
  213. },
  214. {
  215. "github": "border-critical",
  216. "figma": "Border Critical/Default"
  217. },
  218. {
  219. "github": "border-critical-disabled",
  220. "figma": "Border Critical/Disabled"
  221. },
  222. {
  223. "github": "border-critical-subdued",
  224. "figma": "Border Critical/Subdued"
  225. },
  226. {
  227. "github": "icon-critical",
  228. "figma": "Icon/Critical"
  229. },
  230. {
  231. "github": "icon-negative",
  232. "figma": ""
  233. },
  234. {
  235. "github": "surface-critical",
  236. "figma": "Surface Critical/Default"
  237. },
  238. {
  239. "github": "surface-critical-subdued",
  240. "figma": "Surface Critical/Subdued"
  241. },
  242. {
  243. "github": "surface-critical-subdued-hovered",
  244. "figma": "Surface Critical/Subdued Hovered"
  245. },
  246. {
  247. "github": "surface-critical-subdued-pressed",
  248. "figma": "Surface Critical/Subdued Pressed"
  249. },
  250. {
  251. "github": "text-critical",
  252. "figma": "Text/Critical"
  253. },
  254. {
  255. "github": "text-data-negative",
  256. "figma": ""
  257. },
  258. {
  259. "github": "action-critical",
  260. "figma": "Action Critical/Default"
  261. },
  262. {
  263. "github": "action-critical-disabled",
  264. "figma": "Action Critical/Disabled"
  265. },
  266. {
  267. "github": "action-critical-hovered",
  268. "figma": "Action Critical/Hovered"
  269. },
  270. {
  271. "github": "action-critical-pressed",
  272. "figma": "Action Critical/Pressed"
  273. },
  274. {
  275. "github": "icon-on-critical",
  276. "figma": "Icon On/Critical"
  277. },
  278. {
  279. "github": "text-on-critical",
  280. "figma": "Text On/Critical"
  281. },
  282. {
  283. "github": "interactive-critical",
  284. "figma": "Interactive/Critical"
  285. },
  286. {
  287. "github": "interactive-critical-disabled",
  288. "figma": "Interactive/Critical Disabled"
  289. },
  290. {
  291. "github": "interactive-critical-hovered",
  292. "figma": "Interactive/Critical Hover"
  293. },
  294. {
  295. "github": "interactive-critical-pressed",
  296. "figma": "Interactive/Critical Pressed"
  297. },
  298. {
  299. "github": "warning",
  300. "figma": ""
  301. },
  302. {
  303. "github": "border-warning",
  304. "figma": "Border Warning/Default"
  305. },
  306. {
  307. "github": "border-warning-subdued",
  308. "figma": "Border Warning/Subdued"
  309. },
  310. {
  311. "github": "icon-warning",
  312. "figma": "Icon/Warning"
  313. },
  314. {
  315. "github": "surface-warning",
  316. "figma": "Surface Warning/Default"
  317. },
  318. {
  319. "github": "surface-warning-subdued",
  320. "figma": "Surface Warning/Subdued"
  321. },
  322. {
  323. "github": "text-warning",
  324. "figma": "Text/Warning"
  325. },
  326. {
  327. "github": "highlight",
  328. "figma": ""
  329. },
  330. {
  331. "github": "border-highlight",
  332. "figma": "Border Highlight/Default"
  333. },
  334. {
  335. "github": "border-highlight-subdued",
  336. "figma": "Border Highlight/Subdued"
  337. },
  338. {
  339. "github": "icon-highlight",
  340. "figma": "Icon/Highlight"
  341. },
  342. {
  343. "github": "surface-highlight",
  344. "figma": "Surface Highlight/Default"
  345. },
  346. {
  347. "github": "surface-highlight-subdued",
  348. "figma": "Surface Highlight/Subdued"
  349. },
  350. {
  351. "github": "text-highlight",
  352. "figma": "Text/Highlight"
  353. },
  354. {
  355. "github": "success",
  356. "figma": ""
  357. },
  358. {
  359. "github": "border-success",
  360. "figma": "Border Success/Default"
  361. },
  362. {
  363. "github": "border-success-subdued",
  364. "figma": "Border Success/Subdued"
  365. },
  366. {
  367. "github": "icon-success",
  368. "figma": "Icon/Success"
  369. },
  370. {
  371. "github": "surface-success",
  372. "figma": "Surface Success/Default"
  373. },
  374. {
  375. "github": "surface-success-subdued",
  376. "figma": "Surface Success/Subdued"
  377. },
  378. {
  379. "github": "text-success",
  380. "figma": "Text/Success"
  381. },
  382. {
  383. "github": "decorative",
  384. "figma": ""
  385. },
  386. {
  387. "github": "decorative-one-surface",
  388. "figma": "Decorative/Surface/One"
  389. },
  390. {
  391. "github": "decorative-two-surface",
  392. "figma": "Decorative/Surface/Two"
  393. },
  394. {
  395. "github": "decorative-three-surface",
  396. "figma": "Decorative/Surface/Three"
  397. },
  398. {
  399. "github": "decorative-four-surface",
  400. "figma": "Decorative/Surface/Four"
  401. },
  402. {
  403. "github": "decorative-five-surface",
  404. "figma": "Decorative/Surface/Five"
  405. },
  406. {
  407. "github": "decorative-one-text",
  408. "figma": "Decorative/Text/One"
  409. },
  410. {
  411. "github": "decorative-two-text",
  412. "figma": "Decorative/Text/Two"
  413. },
  414. {
  415. "github": "decorative-three-text",
  416. "figma": "Decorative/Text/Three"
  417. },
  418. {
  419. "github": "decorative-four-text",
  420. "figma": "Decorative/Text/Four"
  421. },
  422. {
  423. "github": "decorative-five-text",
  424. "figma": "Decorative/Text/Five"
  425. },
  426. {
  427. "github": "decorative-one-icon",
  428. "figma": "Decorative/Icon/One"
  429. },
  430. {
  431. "github": "decorative-two-icon",
  432. "figma": "Decorative/Icon/Two"
  433. },
  434. {
  435. "github": "decorative-three-icon",
  436. "figma": "Decorative/Icon/Three"
  437. },
  438. {
  439. "github": "decorative-four-icon",
  440. "figma": "Decorative/Icon/Four"
  441. },
  442. {
  443. "github": "decorative-five-icon",
  444. "figma": "Decorative/Icon/Five"
  445. }
  446. ].map(mapping => ({
  447. ...mapping,
  448. github: transformGithubName(mapping.github)
  449. }))
  450.  
  451. interface ColorTokensFile {
  452. [x: string]: string;
  453. }
  454.  
  455. function transformGithubName(s: string) : string {
  456. return s.split('-').map((p, i) => i > 0 ? capitalizeFirstLetter(p) : p).join('');
  457. }
  458.  
  459. function capitalizeFirstLetter(string) {
  460. return string.charAt(0).toUpperCase() + string.slice(1);
  461. }
  462.  
  463. function createColors(colorTokens: ColorTokensFile) {
  464. let createdCount = 0;
  465. let updatedCount = 0;
  466. let unmatchedCount = 0;
  467. Object.entries(colorTokens).forEach(([key, colorAsRgbString]) => {
  468. // Get all styles
  469. // @ts-ignore
  470. let mappedName = colorMapping.find(color => transformGithubName(color.github) === key && color.figma !== "");
  471. if (!mappedName) {
  472. print(`🚨 Could not find mapping for ${key}`)
  473. unmatchedCount++
  474. } else {
  475. let figmaNameForStyle = `_${mappedName.figma}`;
  476. let styles = figma.getLocalPaintStyles();
  477. let existingStyle = styles.find((style) => style.name === figmaNameForStyle);
  478. let colorParts = colorAsRgbString.split(',');
  479. let color = {
  480. red: parseInt(colorParts[0].replace(/[^0-9]+/gi, '')),
  481. green: parseInt(colorParts[1].replace(/[^0-9]+/gi, '')),
  482. blue: parseInt(colorParts[2].replace(/[^0-9]+/gi, '')),
  483. };
  484. let paints = [
  485. {
  486. type: 'SOLID',
  487. color: {
  488. r: color.red / 255,
  489. g: color.green / 255,
  490. b: color.blue / 255,
  491. },
  492. },
  493. ]
  494. if (existingStyle) {
  495. existingStyle.paints = paints
  496. updatedCount++;
  497. } else {
  498. let newStyle = figma.createPaintStyle();
  499. newStyle.name = figmaNameForStyle;
  500. newStyle.paints = paints;
  501. createdCount++;
  502. }
  503. }
  504. });
  505. alert(`Sync complete\n\n${createdCount} styles created\n${updatedCount} styles updated\n${unmatchedCount} tokens from Github have no mappings to Figma styles`)
  506. }
  507.  
  508. createColors({
  509. "background": "rgb(250, 250, 250)",
  510. "surface": "rgb(255, 255, 255)",
  511. "surfaceSubdued": "rgb(250, 250, 250)",
  512. "surfaceHovered": "rgb(243, 244, 244)",
  513. "surfacePressed": "rgb(225, 227, 229)",
  514. "backdrop": "rgba(0, 0, 0, 0.5)",
  515. "overlay": "rgba(255, 255, 255, 0.5)",
  516. "shadowFromAmbientLight": "rgba(23, 24, 24, 0.05)",
  517. "shadowFromDirectLight": "rgba(0, 0, 0, 0.15)",
  518. "hintFromDirectLight": "rgba(0, 0, 0, 0.15)",
  519. "border": "rgb(180, 185, 190)",
  520. "borderSubdued": "rgb(210, 213, 216)",
  521. "icon": "rgb(92, 95, 98)",
  522. "iconHovered": "rgb(26, 28, 29)",
  523. "iconPressed": "rgb(68, 71, 74)",
  524. "iconDisabled": "rgb(186, 190, 195)",
  525. "iconSubdued": "rgb(140, 145, 150)",
  526. "text": "rgb(32, 34, 35)",
  527. "textDisabled": "rgb(144, 149, 154)",
  528. "textSubdued": "rgb(109, 113, 117)",
  529. "interactive": "rgb(46, 114, 210)",
  530. "interactiveDisabled": "rgb(73, 138, 242)",
  531. "interactiveHovered": "rgb(33, 86, 161)",
  532. "interactivePressed": "rgb(26, 72, 137)",
  533. "focused": "rgb(73, 138, 242)",
  534. "surfaceSelected": "rgb(240, 243, 254)",
  535. "surfaceSelectedHovered": "rgb(214, 223, 252)",
  536. "surfaceSelectedPressed": "rgb(187, 203, 249)",
  537. "iconOnInteractive": "rgb(255, 255, 255)",
  538. "textOnInteractive": "rgb(255, 255, 255)",
  539. "actionSecondary": "rgb(234, 235, 236)",
  540. "actionSecondaryDisabled": "rgb(237, 238, 239)",
  541. "actionSecondaryHovered": "rgb(225, 227, 229)",
  542. "actionSecondaryPressed": "rgb(216, 218, 221)",
  543. "borderSecondary": "rgb(180, 185, 190)",
  544. "borderSecondaryHovered": "rgb(153, 158, 164)",
  545. "borderSecondaryDisabled": "rgb(210, 213, 216)",
  546. "actionPrimary": "rgb(0, 128, 96)",
  547. "actionPrimaryDisabled": "rgb(0, 86, 64)",
  548. "actionPrimaryHovered": "rgb(0, 114, 85)",
  549. "actionPrimaryPressed": "rgb(0, 100, 75)",
  550. "iconOnPrimary": "rgb(230, 255, 244)",
  551. "textOnPrimary": "rgb(255, 255, 255)",
  552. "surfacePrimarySelected": "rgb(226, 245, 237)",
  553. "surfacePrimarySelectedHovered": "rgb(179, 208, 195)",
  554. "surfacePrimarySelectedPressed": "rgb(162, 188, 176)",
  555. "borderCritical": "rgb(227, 47, 14)",
  556. "borderCriticalDisabled": "rgb(254, 188, 185)",
  557. "iconCritical": "rgb(236, 49, 15)",
  558. "surfaceCritical": "rgb(255, 250, 250)",
  559. "surfaceCriticalSubdued": "rgb(255, 248, 247)",
  560. "surfaceCriticalSubduedHovered": "rgb(255, 240, 240)",
  561. "surfaceCriticalSubduedPressed": "rgb(254, 211, 209)",
  562. "textCritical": "rgb(215, 44, 13)",
  563. "actionCritical": "rgb(216, 44, 13)",
  564. "actionCriticalDisabled": "rgb(253, 80, 64)",
  565. "actionCriticalHovered": "rgb(193, 38, 10)",
  566. "actionCriticalPressed": "rgb(172, 33, 8)",
  567. "iconOnCritical": "rgb(255, 248, 247)",
  568. "textOnCritical": "rgb(255, 255, 255)",
  569. "interactiveCritical": "rgb(220, 45, 14)",
  570. "interactiveCriticalDisabled": "rgb(253, 147, 141)",
  571. "interactiveCriticalHovered": "rgb(205, 41, 12)",
  572. "interactiveCriticalPressed": "rgb(103, 15, 3)",
  573. "borderWarning": "rgb(241, 179, 0)",
  574. "iconWarning": "rgb(205, 152, 0)",
  575. "surfaceWarning": "rgb(255, 203, 116)",
  576. "surfaceWarningSubdued": "rgb(255, 242, 226)",
  577. "textWarning": "rgb(145, 106, 0)",
  578. "borderHighlight": "rgb(68, 157, 167)",
  579. "iconHighlight": "rgb(65, 151, 161)",
  580. "surfaceHighlight": "rgb(142, 224, 235)",
  581. "surfaceHighlightSubdued": "rgb(244, 253, 254)",
  582. "textHighlight": "rgb(8, 31, 33)",
  583. "borderSuccess": "rgb(0, 135, 102)",
  584. "iconSuccess": "rgb(0, 68, 50)",
  585. "surfaceSuccess": "rgb(137, 229, 194)",
  586. "surfaceSuccessSubdued": "rgb(247, 254, 251)",
  587. "textSuccess": "rgb(0, 128, 96)",
  588. "decorativeOneIcon": "rgb(126, 87, 0)",
  589. "decorativeOneSurface": "rgb(255, 201, 107)",
  590. "decorativeOneText": "rgb(61, 40, 0)",
  591. "decorativeTwoIcon": "rgb(175, 41, 78)",
  592. "decorativeTwoSurface": "rgb(255, 196, 176)",
  593. "decorativeTwoText": "rgb(73, 11, 28)",
  594. "decorativeThreeIcon": "rgb(0, 109, 65)",
  595. "decorativeThreeSurface": "rgb(144, 227, 179)",
  596. "decorativeThreeText": "rgb(0, 47, 25)",
  597. "decorativeFourIcon": "rgb(0, 106, 104)",
  598. "decorativeFourSurface": "rgb(145, 224, 214)",
  599. "decorativeFourText": "rgb(0, 45, 45)",
  600. "decorativeFiveIcon": "rgb(174, 43, 76)",
  601. "decorativeFiveSurface": "rgb(253, 201, 208)",
  602. "decorativeFiveText": "rgb(79, 14, 31)"
  603. })
  604.  
  605. function rgbFromHueAndChroma(hue: number, chroma: number) {
  606. const huePrime = hue / 60;
  607. const hueDelta = 1 - Math.abs((huePrime % 2) - 1);
  608. const intermediateValue = chroma * hueDelta;
  609.  
  610. let red = 0;
  611. let green = 0;
  612. let blue = 0;
  613. if (huePrime >= 0 && huePrime <= 1) {
  614. red = chroma;
  615. green = intermediateValue;
  616. blue = 0;
  617. }
  618.  
  619. if (huePrime >= 1 && huePrime <= 2) {
  620. red = intermediateValue;
  621. green = chroma;
  622. blue = 0;
  623. }
  624.  
  625. if (huePrime >= 2 && huePrime <= 3) {
  626. red = 0;
  627. green = chroma;
  628. blue = intermediateValue;
  629. }
  630.  
  631. if (huePrime >= 3 && huePrime <= 4) {
  632. red = 0;
  633. green = intermediateValue;
  634. blue = chroma;
  635. }
  636.  
  637. if (huePrime >= 4 && huePrime <= 5) {
  638. red = intermediateValue;
  639. green = 0;
  640. blue = chroma;
  641. }
  642.  
  643. if (huePrime >= 5 && huePrime <= 6) {
  644. red = chroma;
  645. green = 0;
  646. blue = intermediateValue;
  647. }
  648.  
  649. return {red, green, blue};
  650. }
  651.  
  652. interface RGBColor {
  653. red: number;
  654. green: number;
  655. blue: number;
  656. }
  657.  
  658. function hslToRgb(color): RGBColor {
  659. const {hue, saturation, lightness, alpha = 1} = color;
  660. const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
  661.  
  662. let {red, green, blue} = rgbFromHueAndChroma(hue, chroma);
  663.  
  664. const lightnessVal = lightness / 100 - chroma / 2;
  665. red += lightnessVal;
  666. green += lightnessVal;
  667. blue += lightnessVal;
  668.  
  669. return {
  670. red: Math.round(red * 255),
  671. green: Math.round(green * 255),
  672. blue: Math.round(blue * 255),
  673. };
  674. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!