From 436131317f9d76e695e34692d877c051da540ed1 Mon Sep 17 00:00:00 2001 From: Andi Oneto Date: Thu, 16 Jun 2022 14:43:51 -0700 Subject: [PATCH] fix(design-tokens): fix broken type declaration template (#2474) --- .changeset/small-fishes-sing.md | 2 +- .../__snapshots__/gatsby.d.ts.spec.ts.snap | 739 ------------------ .../__snapshots__/generic.d.ts.spec.ts.snap | 737 +++++++++++++++++ ...s.spec.ts.snap => generic.js.spec.ts.snap} | 2 +- ...tsby.d.ts.spec.ts => generic.d.ts.spec.ts} | 8 +- .../{gatsby.js.spec.ts => generic.js.spec.ts} | 14 +- .../{gatsby.d.ts.ts => generic.d.ts.ts} | 8 +- .../formatters/{gatsby.ts => generic.ts} | 2 +- packages/paste-design-tokens/gulpfile.ts | 20 +- 9 files changed, 765 insertions(+), 767 deletions(-) delete mode 100644 packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.d.ts.spec.ts.snap create mode 100644 packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.d.ts.spec.ts.snap rename packages/paste-design-tokens/formatters/__tests__/__snapshots__/{gatsby.js.spec.ts.snap => generic.js.spec.ts.snap} (99%) rename packages/paste-design-tokens/formatters/__tests__/{gatsby.d.ts.spec.ts => generic.d.ts.spec.ts} (77%) rename packages/paste-design-tokens/formatters/__tests__/{gatsby.js.spec.ts => generic.js.spec.ts} (60%) rename packages/paste-design-tokens/formatters/{gatsby.d.ts.ts => generic.d.ts.ts} (89%) rename packages/paste-design-tokens/formatters/{gatsby.ts => generic.ts} (89%) diff --git a/.changeset/small-fishes-sing.md b/.changeset/small-fishes-sing.md index 522d45c22f..f93473857c 100644 --- a/.changeset/small-fishes-sing.md +++ b/.changeset/small-fishes-sing.md @@ -3,7 +3,7 @@ '@twilio-paste/core': minor --- -[Design tokens] Add new build of design tokens formatted for compatibility with our documentation website. +[Design tokens] Add a new generic export featuring additional metadata. This can be used in documentation or software tooling. - CommonJS export `tokens.gatsby.js` - complimentary declaration file included `tokens.gatsby.d.ts` diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.d.ts.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.d.ts.spec.ts.snap deleted file mode 100644 index ab34f672e1..0000000000 --- a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.d.ts.spec.ts.snap +++ /dev/null @@ -1,739 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`gatsby declaration file formatter should return typescript definitions formatted tokens 1`] = ` -"declare const Tokens: { -\\"tokens\\":{{ -readonly \\"background-colors\\": readonly [ - { - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(255, 255, 255)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!white}\\"; - readonly name: \\"color_background_body\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(242, 47, 70)\\"; - readonly comment: \\"Primary brand background, accessible with black text\\"; - readonly originalValue: \\"{!amaranth}\\"; - readonly name: \\"color_background_brand_highlight\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(235, 15, 41)\\"; - readonly comment: \\"Dark Primary brand background, accessible with black and white text\\"; - readonly originalValue: \\"{!red_ribbon}\\"; - readonly name: \\"color_background_brand_highlight_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(194, 37, 55)\\"; - readonly comment: \\"Darker Primary brand background, accessible with black and white text\\"; - readonly originalValue: \\"{!palette_red_50}\\"; - readonly name: \\"color_background_brand_highlight_darker\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(13, 18, 43)\\"; - readonly comment: \\"Primary brand background, accessible with black text\\"; - readonly originalValue: \\"{!haiti}\\"; - readonly name: \\"color_background_brand_primary\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(246, 246, 246)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_20}\\"; - readonly name: \\"color_background_default\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(236, 187, 193)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_red_20}\\"; - readonly name: \\"color_background_element_selection\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(206, 80, 95)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_red_40}\\"; - readonly name: \\"color_background_error\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(174, 33, 49)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_red_60}\\"; - readonly name: \\"color_background_error_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(194, 37, 55)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_red_50}\\"; - readonly name: \\"color_background_error_light\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(230, 230, 230)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_40}\\"; - readonly name: \\"color_background_row_active\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(214, 214, 214)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_50}\\"; - readonly name: \\"color_background_row_focus\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(214, 214, 214)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_50}\\"; - readonly name: \\"color_background_row_hover\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(230, 230, 230)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_40}\\"; - readonly name: \\"color_background_row_selected\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(235, 235, 235)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_gray_30}\\"; - readonly name: \\"color_background_row_striped\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(100, 209, 138)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_green_50}\\"; - readonly name: \\"color_background_success\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(80, 167, 110)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_green_70}\\"; - readonly name: \\"color_background_success_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(162, 227, 184)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_green_30}\\"; - readonly name: \\"color_background_success_light\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(251, 208, 144)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_orange_30}\\"; - readonly name: \\"color_background_warning\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(199, 141, 56)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_orange_70}\\"; - readonly name: \\"color_background_warning_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"background-color\\"; - readonly value: \\"rgb(249, 177, 71)\\"; - readonly comment: \\"Some background\\"; - readonly originalValue: \\"{!palette_orange_50}\\"; - readonly name: \\"color_background_warning_light\\"; -} -], -readonly \\"colors\\": readonly [ - { - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(242, 47, 70)\\"; - readonly comment: \\"Twilio brand red\\"; - readonly originalValue: \\"{!amaranth}\\"; - readonly name: \\"color_brand_highlight\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(235, 15, 41)\\"; - readonly comment: \\"Twilio accessible brand red\\"; - readonly originalValue: \\"{!red_ribbon}\\"; - readonly name: \\"color_brand_highlight_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(13, 18, 43)\\"; - readonly comment: \\"Primary branding color\\"; - readonly originalValue: \\"{!haiti}\\"; - readonly name: \\"color_brand_primary\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(255, 255, 255)\\"; - readonly comment: \\"Gray Color 1\\"; - readonly originalValue: \\"{!palette_gray_10}\\"; - readonly name: \\"color_gray_1\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(34, 34, 34)\\"; - readonly comment: \\"Gray Color 10\\"; - readonly originalValue: \\"{!palette_gray_100}\\"; - readonly name: \\"color_gray_10\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(246, 246, 246)\\"; - readonly comment: \\"Gray Color 2\\"; - readonly originalValue: \\"{!palette_gray_20}\\"; - readonly name: \\"color_gray_2\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(235, 235, 235)\\"; - readonly comment: \\"Gray Color 3\\"; - readonly originalValue: \\"{!palette_gray_30}\\"; - readonly name: \\"color_gray_3\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(230, 230, 230)\\"; - readonly comment: \\"Gray Color 4\\"; - readonly originalValue: \\"{!palette_gray_40}\\"; - readonly name: \\"color_gray_4\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(214, 214, 214)\\"; - readonly comment: \\"Gray Color 5\\"; - readonly originalValue: \\"{!palette_gray_50}\\"; - readonly name: \\"color_gray_5\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(204, 204, 204)\\"; - readonly comment: \\"Gray Color 6\\"; - readonly originalValue: \\"{!palette_gray_60}\\"; - readonly name: \\"color_gray_6\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(153, 153, 153)\\"; - readonly comment: \\"Gray Color 7\\"; - readonly originalValue: \\"{!palette_gray_70}\\"; - readonly name: \\"color_gray_7\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(102, 102, 102)\\"; - readonly comment: \\"Gray Color 8\\"; - readonly originalValue: \\"{!palette_gray_80}\\"; - readonly name: \\"color_gray_8\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"color\\"; - readonly value: \\"rgb(68, 68, 68)\\"; - readonly comment: \\"Gray Color 9\\"; - readonly originalValue: \\"{!palette_gray_90}\\"; - readonly name: \\"color_gray_9\\"; -} -], -readonly \\"font-sizes\\": readonly [ - { - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"0.6875rem\\"; - readonly comment: \\"Constant typography token for font size 0\\"; - readonly originalValue: \\"{!font_size_0}\\"; - readonly name: \\"font_size_0\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"0.75rem\\"; - readonly comment: \\"Constant typography token for font size 1\\"; - readonly originalValue: \\"{!font_size_1}\\"; - readonly name: \\"font_size_1\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"0.8125rem\\"; - readonly comment: \\"Constant typography token for font size 2\\"; - readonly originalValue: \\"{!font_size_2}\\"; - readonly name: \\"font_size_2\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"0.875rem\\"; - readonly comment: \\"Constant typography token for font size 3\\"; - readonly originalValue: \\"{!font_size_3}\\"; - readonly name: \\"font_size_3\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"0.9375rem\\"; - readonly comment: \\"Constant typography token for font size 4\\"; - readonly originalValue: \\"{!font_size_4}\\"; - readonly name: \\"font_size_4\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"1rem\\"; - readonly comment: \\"Constant typography token for font size 5\\"; - readonly originalValue: \\"{!font_size_5}\\"; - readonly name: \\"font_size_5\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"1.125rem\\"; - readonly comment: \\"Constant typography token for font size 6\\"; - readonly originalValue: \\"{!font_size_6}\\"; - readonly name: \\"font_size_6\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"1.25rem\\"; - readonly comment: \\"Constant typography token for font size 7\\"; - readonly originalValue: \\"{!font_size_7}\\"; - readonly name: \\"font_size_7\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"1.875rem\\"; - readonly comment: \\"Constant typography token for font size 8\\"; - readonly originalValue: \\"{!font_size_8}\\"; - readonly name: \\"font_size_8\\"; -}, -{ - readonly category: \\"font-size\\"; - readonly type: \\"font-size\\"; - readonly value: \\"2.25rem\\"; - readonly comment: \\"Constant typography token for font size 9\\"; - readonly originalValue: \\"{!font_size_9}\\"; - readonly name: \\"font_size_9\\"; -} -], -readonly \\"spacings\\": readonly [ - { - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"0.25rem\\"; - readonly originalValue: \\"{!space_0}\\"; - readonly name: \\"space_0\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"0.5rem\\"; - readonly originalValue: \\"{!space_1}\\"; - readonly name: \\"space_1\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"2.75rem\\"; - readonly originalValue: \\"{!space_10}\\"; - readonly name: \\"space_10\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"3rem\\"; - readonly originalValue: \\"{!space_11}\\"; - readonly name: \\"space_11\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"3.25rem\\"; - readonly originalValue: \\"{!space_12}\\"; - readonly name: \\"space_12\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"3.5rem\\"; - readonly originalValue: \\"{!space_13}\\"; - readonly name: \\"space_13\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"3.75rem\\"; - readonly originalValue: \\"{!space_14}\\"; - readonly name: \\"space_14\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"4rem\\"; - readonly originalValue: \\"{!space_15}\\"; - readonly name: \\"space_15\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"0.75rem\\"; - readonly originalValue: \\"{!space_2}\\"; - readonly name: \\"space_2\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"1rem\\"; - readonly originalValue: \\"{!space_3}\\"; - readonly name: \\"space_3\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"1.25rem\\"; - readonly originalValue: \\"{!space_4}\\"; - readonly name: \\"space_4\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"1.5rem\\"; - readonly originalValue: \\"{!space_5}\\"; - readonly name: \\"space_5\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"1.75rem\\"; - readonly originalValue: \\"{!space_6}\\"; - readonly name: \\"space_6\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"2rem\\"; - readonly originalValue: \\"{!space_7}\\"; - readonly name: \\"space_7\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"2.25rem\\"; - readonly originalValue: \\"{!space_8}\\"; - readonly name: \\"space_8\\"; -}, -{ - readonly category: \\"spacing\\"; - readonly type: \\"size\\"; - readonly value: \\"2.5rem\\"; - readonly originalValue: \\"{!space_9}\\"; - readonly name: \\"space_9\\"; -} -], -readonly \\"text-colors\\": readonly [ - { - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(242, 47, 70)\\"; - readonly comment: \\"Twilio brand red, accessible on large text only.\\"; - readonly originalValue: \\"{!amaranth}\\"; - readonly name: \\"color_text_brand_highlight\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(235, 15, 41)\\"; - readonly comment: \\"Accessible Twilio brand red.\\"; - readonly originalValue: \\"{!red_ribbon}\\"; - readonly name: \\"color_text_brand_highlight_dark\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(255, 255, 255)\\"; - readonly comment: \\"Text color used on any brand color\\"; - readonly originalValue: \\"{!white}\\"; - readonly name: \\"color_text_brand_primary\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(68, 68, 68)\\"; - readonly comment: \\"Body text color\\"; - readonly originalValue: \\"{!palette_gray_90}\\"; - readonly name: \\"color_text_default\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(194, 37, 55)\\"; - readonly comment: \\"Error text for inputs and error misc\\"; - readonly originalValue: \\"{!palette_red_50}\\"; - readonly name: \\"color_text_error\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(68, 68, 68)\\"; - readonly comment: \\"Default icon color.\\"; - readonly originalValue: \\"{!palette_gray_90}\\"; - readonly name: \\"color_text_icon_default\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(255, 255, 255)\\"; - readonly comment: \\"Inverse text color for dark backgrounds\\"; - readonly originalValue: \\"{!white}\\"; - readonly name: \\"color_text_inverse\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(235, 235, 235)\\"; - readonly comment: \\"Weak inverse text color for dark backgrounds\\"; - readonly originalValue: \\"{!palette_gray_30}\\"; - readonly name: \\"color_text_inverse_weak\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(68, 68, 68)\\"; - readonly comment: \\"Text color for field labels.\\"; - readonly originalValue: \\"{!palette_gray_90}\\"; - readonly name: \\"color_text_label\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(0, 112, 204)\\"; - readonly comment: \\"Link text\\"; - readonly originalValue: \\"{!palette_blue_50}\\"; - readonly name: \\"color_text_link\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(0, 89, 163)\\"; - readonly comment: \\"Active link text\\"; - readonly originalValue: \\"{!palette_blue_70}\\"; - readonly name: \\"color_text_link_active\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(194, 37, 55)\\"; - readonly comment: \\"Destructive link text\\"; - readonly originalValue: \\"{!palette_red_50}\\"; - readonly name: \\"color_text_link_destructive\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(155, 29, 44)\\"; - readonly comment: \\"Active destructive link text\\"; - readonly originalValue: \\"{!palette_red_70}\\"; - readonly name: \\"color_text_link_destructive_active\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(236, 187, 193)\\"; - readonly comment: \\"Disabled destructive link text\\"; - readonly originalValue: \\"{!palette_red_20}\\"; - readonly name: \\"color_text_link_destructive_disabled\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(174, 33, 49)\\"; - readonly comment: \\"Focus destructive link text\\"; - readonly originalValue: \\"{!palette_red_60}\\"; - readonly name: \\"color_text_link_destructive_focus\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(174, 33, 49)\\"; - readonly comment: \\"Hover destructive link text\\"; - readonly originalValue: \\"{!palette_red_60}\\"; - readonly name: \\"color_text_link_destructive_hover\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(102, 169, 224)\\"; - readonly comment: \\"Disabled link text\\"; - readonly originalValue: \\"{!palette_blue_30}\\"; - readonly name: \\"color_text_link_disabled\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(0, 97, 192)\\"; - readonly comment: \\"Focus link text\\"; - readonly originalValue: \\"{!palette_blue_60}\\"; - readonly name: \\"color_text_link_focus\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(0, 97, 192)\\"; - readonly comment: \\"Hover link text\\"; - readonly originalValue: \\"{!palette_blue_60}\\"; - readonly name: \\"color_text_link_hover\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(102, 102, 102)\\"; - readonly comment: \\"Input placeholder text.\\"; - readonly originalValue: \\"{!palette_gray_80}\\"; - readonly name: \\"color_text_placeholder\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(100, 209, 138)\\"; - readonly comment: \\"Text color for success text.\\"; - readonly originalValue: \\"{!palette_green_50}\\"; - readonly name: \\"color_text_success\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(249, 177, 71)\\"; - readonly comment: \\"Color for texts or icons that are related to warnings on a dark background.\\"; - readonly originalValue: \\"{!palette_orange_50}\\"; - readonly name: \\"color_text_warning\\"; -}, -{ - readonly type: \\"color\\"; - readonly category: \\"text-color\\"; - readonly value: \\"rgb(230, 230, 230)\\"; - readonly comment: \\"Weak body text for visual hierarchy.\\"; - readonly originalValue: \\"{!palette_gray_40}\\"; - readonly name: \\"color_text_weak\\"; -} -], -readonly \\"z-indices\\": readonly [ - { - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 0; - readonly originalValue: \\"{!z-index-0}\\"; - readonly name: \\"z-index-0\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 10; - readonly originalValue: \\"{!z-index-10}\\"; - readonly name: \\"z-index-10\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 20; - readonly originalValue: \\"{!z-index-20}\\"; - readonly name: \\"z-index-20\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 30; - readonly originalValue: \\"{!z-index-30}\\"; - readonly name: \\"z-index-30\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 40; - readonly originalValue: \\"{!z-index-40}\\"; - readonly name: \\"z-index-40\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 50; - readonly originalValue: \\"{!z-index-50}\\"; - readonly name: \\"z-index-50\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 60; - readonly originalValue: \\"{!z-index-60}\\"; - readonly name: \\"z-index-60\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 70; - readonly originalValue: \\"{!z-index-70}\\"; - readonly name: \\"z-index-70\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 80; - readonly originalValue: \\"{!z-index-80}\\"; - readonly name: \\"z-index-80\\"; -}, -{ - readonly type: \\"z-index\\"; - readonly category: \\"z-index\\"; - readonly value: 90; - readonly originalValue: \\"{!z-index-90}\\"; - readonly name: \\"z-index-90\\"; -} -] -};} -} -export default Tokens;" -`; diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.d.ts.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.d.ts.spec.ts.snap new file mode 100644 index 0000000000..df7275109e --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.d.ts.spec.ts.snap @@ -0,0 +1,737 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`generic declaration file formatter should return typescript definitions formatted tokens 1`] = ` +"declare const Tokens: { +\\"tokens\\":{\\"background-colors\\": [ + { + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(255, 255, 255)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!white}\\"; + name: \\"color_background_body\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(242, 47, 70)\\"; + comment: \\"Primary brand background, accessible with black text\\"; + originalValue: \\"{!amaranth}\\"; + name: \\"color_background_brand_highlight\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(235, 15, 41)\\"; + comment: \\"Dark Primary brand background, accessible with black and white text\\"; + originalValue: \\"{!red_ribbon}\\"; + name: \\"color_background_brand_highlight_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(194, 37, 55)\\"; + comment: \\"Darker Primary brand background, accessible with black and white text\\"; + originalValue: \\"{!palette_red_50}\\"; + name: \\"color_background_brand_highlight_darker\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(13, 18, 43)\\"; + comment: \\"Primary brand background, accessible with black text\\"; + originalValue: \\"{!haiti}\\"; + name: \\"color_background_brand_primary\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(246, 246, 246)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_20}\\"; + name: \\"color_background_default\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(236, 187, 193)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_red_20}\\"; + name: \\"color_background_element_selection\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(206, 80, 95)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_red_40}\\"; + name: \\"color_background_error\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(174, 33, 49)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_red_60}\\"; + name: \\"color_background_error_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(194, 37, 55)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_red_50}\\"; + name: \\"color_background_error_light\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(230, 230, 230)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_40}\\"; + name: \\"color_background_row_active\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(214, 214, 214)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_50}\\"; + name: \\"color_background_row_focus\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(214, 214, 214)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_50}\\"; + name: \\"color_background_row_hover\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(230, 230, 230)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_40}\\"; + name: \\"color_background_row_selected\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(235, 235, 235)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_gray_30}\\"; + name: \\"color_background_row_striped\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(100, 209, 138)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_green_50}\\"; + name: \\"color_background_success\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(80, 167, 110)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_green_70}\\"; + name: \\"color_background_success_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(162, 227, 184)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_green_30}\\"; + name: \\"color_background_success_light\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(251, 208, 144)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_orange_30}\\"; + name: \\"color_background_warning\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(199, 141, 56)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_orange_70}\\"; + name: \\"color_background_warning_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"background-color\\"; + value: \\"rgb(249, 177, 71)\\"; + comment: \\"Some background\\"; + originalValue: \\"{!palette_orange_50}\\"; + name: \\"color_background_warning_light\\"; +} +], +\\"colors\\": [ + { + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(242, 47, 70)\\"; + comment: \\"Twilio brand red\\"; + originalValue: \\"{!amaranth}\\"; + name: \\"color_brand_highlight\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(235, 15, 41)\\"; + comment: \\"Twilio accessible brand red\\"; + originalValue: \\"{!red_ribbon}\\"; + name: \\"color_brand_highlight_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(13, 18, 43)\\"; + comment: \\"Primary branding color\\"; + originalValue: \\"{!haiti}\\"; + name: \\"color_brand_primary\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(255, 255, 255)\\"; + comment: \\"Gray Color 1\\"; + originalValue: \\"{!palette_gray_10}\\"; + name: \\"color_gray_1\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(34, 34, 34)\\"; + comment: \\"Gray Color 10\\"; + originalValue: \\"{!palette_gray_100}\\"; + name: \\"color_gray_10\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(246, 246, 246)\\"; + comment: \\"Gray Color 2\\"; + originalValue: \\"{!palette_gray_20}\\"; + name: \\"color_gray_2\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(235, 235, 235)\\"; + comment: \\"Gray Color 3\\"; + originalValue: \\"{!palette_gray_30}\\"; + name: \\"color_gray_3\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(230, 230, 230)\\"; + comment: \\"Gray Color 4\\"; + originalValue: \\"{!palette_gray_40}\\"; + name: \\"color_gray_4\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(214, 214, 214)\\"; + comment: \\"Gray Color 5\\"; + originalValue: \\"{!palette_gray_50}\\"; + name: \\"color_gray_5\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(204, 204, 204)\\"; + comment: \\"Gray Color 6\\"; + originalValue: \\"{!palette_gray_60}\\"; + name: \\"color_gray_6\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(153, 153, 153)\\"; + comment: \\"Gray Color 7\\"; + originalValue: \\"{!palette_gray_70}\\"; + name: \\"color_gray_7\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(102, 102, 102)\\"; + comment: \\"Gray Color 8\\"; + originalValue: \\"{!palette_gray_80}\\"; + name: \\"color_gray_8\\"; +}, +{ + type: \\"color\\"; + category: \\"color\\"; + value: \\"rgb(68, 68, 68)\\"; + comment: \\"Gray Color 9\\"; + originalValue: \\"{!palette_gray_90}\\"; + name: \\"color_gray_9\\"; +} +], +\\"font-sizes\\": [ + { + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"0.6875rem\\"; + comment: \\"Constant typography token for font size 0\\"; + originalValue: \\"{!font_size_0}\\"; + name: \\"font_size_0\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"0.75rem\\"; + comment: \\"Constant typography token for font size 1\\"; + originalValue: \\"{!font_size_1}\\"; + name: \\"font_size_1\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"0.8125rem\\"; + comment: \\"Constant typography token for font size 2\\"; + originalValue: \\"{!font_size_2}\\"; + name: \\"font_size_2\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"0.875rem\\"; + comment: \\"Constant typography token for font size 3\\"; + originalValue: \\"{!font_size_3}\\"; + name: \\"font_size_3\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"0.9375rem\\"; + comment: \\"Constant typography token for font size 4\\"; + originalValue: \\"{!font_size_4}\\"; + name: \\"font_size_4\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"1rem\\"; + comment: \\"Constant typography token for font size 5\\"; + originalValue: \\"{!font_size_5}\\"; + name: \\"font_size_5\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"1.125rem\\"; + comment: \\"Constant typography token for font size 6\\"; + originalValue: \\"{!font_size_6}\\"; + name: \\"font_size_6\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"1.25rem\\"; + comment: \\"Constant typography token for font size 7\\"; + originalValue: \\"{!font_size_7}\\"; + name: \\"font_size_7\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"1.875rem\\"; + comment: \\"Constant typography token for font size 8\\"; + originalValue: \\"{!font_size_8}\\"; + name: \\"font_size_8\\"; +}, +{ + category: \\"font-size\\"; + type: \\"font-size\\"; + value: \\"2.25rem\\"; + comment: \\"Constant typography token for font size 9\\"; + originalValue: \\"{!font_size_9}\\"; + name: \\"font_size_9\\"; +} +], +\\"spacings\\": [ + { + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"0.25rem\\"; + originalValue: \\"{!space_0}\\"; + name: \\"space_0\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"0.5rem\\"; + originalValue: \\"{!space_1}\\"; + name: \\"space_1\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"2.75rem\\"; + originalValue: \\"{!space_10}\\"; + name: \\"space_10\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"3rem\\"; + originalValue: \\"{!space_11}\\"; + name: \\"space_11\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"3.25rem\\"; + originalValue: \\"{!space_12}\\"; + name: \\"space_12\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"3.5rem\\"; + originalValue: \\"{!space_13}\\"; + name: \\"space_13\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"3.75rem\\"; + originalValue: \\"{!space_14}\\"; + name: \\"space_14\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"4rem\\"; + originalValue: \\"{!space_15}\\"; + name: \\"space_15\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"0.75rem\\"; + originalValue: \\"{!space_2}\\"; + name: \\"space_2\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"1rem\\"; + originalValue: \\"{!space_3}\\"; + name: \\"space_3\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"1.25rem\\"; + originalValue: \\"{!space_4}\\"; + name: \\"space_4\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"1.5rem\\"; + originalValue: \\"{!space_5}\\"; + name: \\"space_5\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"1.75rem\\"; + originalValue: \\"{!space_6}\\"; + name: \\"space_6\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"2rem\\"; + originalValue: \\"{!space_7}\\"; + name: \\"space_7\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"2.25rem\\"; + originalValue: \\"{!space_8}\\"; + name: \\"space_8\\"; +}, +{ + category: \\"spacing\\"; + type: \\"size\\"; + value: \\"2.5rem\\"; + originalValue: \\"{!space_9}\\"; + name: \\"space_9\\"; +} +], +\\"text-colors\\": [ + { + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(242, 47, 70)\\"; + comment: \\"Twilio brand red, accessible on large text only.\\"; + originalValue: \\"{!amaranth}\\"; + name: \\"color_text_brand_highlight\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(235, 15, 41)\\"; + comment: \\"Accessible Twilio brand red.\\"; + originalValue: \\"{!red_ribbon}\\"; + name: \\"color_text_brand_highlight_dark\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(255, 255, 255)\\"; + comment: \\"Text color used on any brand color\\"; + originalValue: \\"{!white}\\"; + name: \\"color_text_brand_primary\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(68, 68, 68)\\"; + comment: \\"Body text color\\"; + originalValue: \\"{!palette_gray_90}\\"; + name: \\"color_text_default\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(194, 37, 55)\\"; + comment: \\"Error text for inputs and error misc\\"; + originalValue: \\"{!palette_red_50}\\"; + name: \\"color_text_error\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(68, 68, 68)\\"; + comment: \\"Default icon color.\\"; + originalValue: \\"{!palette_gray_90}\\"; + name: \\"color_text_icon_default\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(255, 255, 255)\\"; + comment: \\"Inverse text color for dark backgrounds\\"; + originalValue: \\"{!white}\\"; + name: \\"color_text_inverse\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(235, 235, 235)\\"; + comment: \\"Weak inverse text color for dark backgrounds\\"; + originalValue: \\"{!palette_gray_30}\\"; + name: \\"color_text_inverse_weak\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(68, 68, 68)\\"; + comment: \\"Text color for field labels.\\"; + originalValue: \\"{!palette_gray_90}\\"; + name: \\"color_text_label\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(0, 112, 204)\\"; + comment: \\"Link text\\"; + originalValue: \\"{!palette_blue_50}\\"; + name: \\"color_text_link\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(0, 89, 163)\\"; + comment: \\"Active link text\\"; + originalValue: \\"{!palette_blue_70}\\"; + name: \\"color_text_link_active\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(194, 37, 55)\\"; + comment: \\"Destructive link text\\"; + originalValue: \\"{!palette_red_50}\\"; + name: \\"color_text_link_destructive\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(155, 29, 44)\\"; + comment: \\"Active destructive link text\\"; + originalValue: \\"{!palette_red_70}\\"; + name: \\"color_text_link_destructive_active\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(236, 187, 193)\\"; + comment: \\"Disabled destructive link text\\"; + originalValue: \\"{!palette_red_20}\\"; + name: \\"color_text_link_destructive_disabled\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(174, 33, 49)\\"; + comment: \\"Focus destructive link text\\"; + originalValue: \\"{!palette_red_60}\\"; + name: \\"color_text_link_destructive_focus\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(174, 33, 49)\\"; + comment: \\"Hover destructive link text\\"; + originalValue: \\"{!palette_red_60}\\"; + name: \\"color_text_link_destructive_hover\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(102, 169, 224)\\"; + comment: \\"Disabled link text\\"; + originalValue: \\"{!palette_blue_30}\\"; + name: \\"color_text_link_disabled\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(0, 97, 192)\\"; + comment: \\"Focus link text\\"; + originalValue: \\"{!palette_blue_60}\\"; + name: \\"color_text_link_focus\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(0, 97, 192)\\"; + comment: \\"Hover link text\\"; + originalValue: \\"{!palette_blue_60}\\"; + name: \\"color_text_link_hover\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(102, 102, 102)\\"; + comment: \\"Input placeholder text.\\"; + originalValue: \\"{!palette_gray_80}\\"; + name: \\"color_text_placeholder\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(100, 209, 138)\\"; + comment: \\"Text color for success text.\\"; + originalValue: \\"{!palette_green_50}\\"; + name: \\"color_text_success\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(249, 177, 71)\\"; + comment: \\"Color for texts or icons that are related to warnings on a dark background.\\"; + originalValue: \\"{!palette_orange_50}\\"; + name: \\"color_text_warning\\"; +}, +{ + type: \\"color\\"; + category: \\"text-color\\"; + value: \\"rgb(230, 230, 230)\\"; + comment: \\"Weak body text for visual hierarchy.\\"; + originalValue: \\"{!palette_gray_40}\\"; + name: \\"color_text_weak\\"; +} +], +\\"z-indices\\": [ + { + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 0; + originalValue: \\"{!z-index-0}\\"; + name: \\"z-index-0\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 10; + originalValue: \\"{!z-index-10}\\"; + name: \\"z-index-10\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 20; + originalValue: \\"{!z-index-20}\\"; + name: \\"z-index-20\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 30; + originalValue: \\"{!z-index-30}\\"; + name: \\"z-index-30\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 40; + originalValue: \\"{!z-index-40}\\"; + name: \\"z-index-40\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 50; + originalValue: \\"{!z-index-50}\\"; + name: \\"z-index-50\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 60; + originalValue: \\"{!z-index-60}\\"; + name: \\"z-index-60\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 70; + originalValue: \\"{!z-index-70}\\"; + name: \\"z-index-70\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 80; + originalValue: \\"{!z-index-80}\\"; + name: \\"z-index-80\\"; +}, +{ + type: \\"z-index\\"; + category: \\"z-index\\"; + value: 90; + originalValue: \\"{!z-index-90}\\"; + name: \\"z-index-90\\"; +} +]} +} +export default Tokens;" +`; diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.js.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.js.spec.ts.snap similarity index 99% rename from packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.js.spec.ts.snap rename to packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.js.spec.ts.snap index e1cea2a50c..dd7f917653 100644 --- a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/gatsby.js.spec.ts.snap +++ b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/generic.js.spec.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gatsby JS formatter should return commonjs formatted tokens for gatsby 1`] = ` +exports[`generic JS formatter should return commonjs formatted tokens 1`] = ` "module.exports = { \\"tokens\\":{ \\"background-colors\\": [{\\"type\\":\\"color\\",\\"value\\":\\"rgb(255, 255, 255)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!white}\\",\\"name\\":\\"color_background_body\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(242, 47, 70)\\",\\"comment\\":\\"Primary brand background, accessible with black text\\",\\"originalValue\\":\\"{!amaranth}\\",\\"name\\":\\"color_background_brand_highlight\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(235, 15, 41)\\",\\"comment\\":\\"Dark Primary brand background, accessible with black and white text\\",\\"originalValue\\":\\"{!red_ribbon}\\",\\"name\\":\\"color_background_brand_highlight_dark\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(194, 37, 55)\\",\\"comment\\":\\"Darker Primary brand background, accessible with black and white text\\",\\"originalValue\\":\\"{!palette_red_50}\\",\\"name\\":\\"color_background_brand_highlight_darker\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(13, 18, 43)\\",\\"comment\\":\\"Primary brand background, accessible with black text\\",\\"originalValue\\":\\"{!haiti}\\",\\"name\\":\\"color_background_brand_primary\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(246, 246, 246)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_20}\\",\\"name\\":\\"color_background_default\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(236, 187, 193)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_red_20}\\",\\"name\\":\\"color_background_element_selection\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(206, 80, 95)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_red_40}\\",\\"name\\":\\"color_background_error\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(174, 33, 49)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_red_60}\\",\\"name\\":\\"color_background_error_dark\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(194, 37, 55)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_red_50}\\",\\"name\\":\\"color_background_error_light\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(230, 230, 230)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_40}\\",\\"name\\":\\"color_background_row_active\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(214, 214, 214)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_50}\\",\\"name\\":\\"color_background_row_focus\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(214, 214, 214)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_50}\\",\\"name\\":\\"color_background_row_hover\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(230, 230, 230)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_40}\\",\\"name\\":\\"color_background_row_selected\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(235, 235, 235)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_gray_30}\\",\\"name\\":\\"color_background_row_striped\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(100, 209, 138)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_green_50}\\",\\"name\\":\\"color_background_success\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(80, 167, 110)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_green_70}\\",\\"name\\":\\"color_background_success_dark\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(162, 227, 184)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_green_30}\\",\\"name\\":\\"color_background_success_light\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(251, 208, 144)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_orange_30}\\",\\"name\\":\\"color_background_warning\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(199, 141, 56)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_orange_70}\\",\\"name\\":\\"color_background_warning_dark\\"},{\\"type\\":\\"color\\",\\"value\\":\\"rgb(249, 177, 71)\\",\\"comment\\":\\"Some background\\",\\"originalValue\\":\\"{!palette_orange_50}\\",\\"name\\":\\"color_background_warning_light\\"}], diff --git a/packages/paste-design-tokens/formatters/__tests__/gatsby.d.ts.spec.ts b/packages/paste-design-tokens/formatters/__tests__/generic.d.ts.spec.ts similarity index 77% rename from packages/paste-design-tokens/formatters/__tests__/gatsby.d.ts.spec.ts rename to packages/paste-design-tokens/formatters/__tests__/generic.d.ts.spec.ts index 780704f20c..f1bd270713 100644 --- a/packages/paste-design-tokens/formatters/__tests__/gatsby.d.ts.spec.ts +++ b/packages/paste-design-tokens/formatters/__tests__/generic.d.ts.spec.ts @@ -1,10 +1,10 @@ import * as theo from 'theo'; import {resolve} from 'path'; -import {gatsbyDTSTemplate} from '../gatsby.d.ts'; +import {genericDTsTemplate} from '../generic.d.ts'; -theo.registerFormat('gatsby.d.ts', gatsbyDTSTemplate); +theo.registerFormat('generic.d.ts', genericDTsTemplate); -describe('gatsby declaration file formatter', () => { +describe('generic declaration file formatter', () => { it('should return typescript definitions formatted tokens', () => { return theo .convert({ @@ -14,7 +14,7 @@ describe('gatsby declaration file formatter', () => { }, format: { // @ts-ignore Theo isn't typed for custom format types - type: 'gatsby.d.ts', + type: 'generic.d.ts', }, }) .then((dTS: string) => { diff --git a/packages/paste-design-tokens/formatters/__tests__/gatsby.js.spec.ts b/packages/paste-design-tokens/formatters/__tests__/generic.js.spec.ts similarity index 60% rename from packages/paste-design-tokens/formatters/__tests__/gatsby.js.spec.ts rename to packages/paste-design-tokens/formatters/__tests__/generic.js.spec.ts index 0ae1192ab9..bebb5e5675 100644 --- a/packages/paste-design-tokens/formatters/__tests__/gatsby.js.spec.ts +++ b/packages/paste-design-tokens/formatters/__tests__/generic.js.spec.ts @@ -1,11 +1,11 @@ import * as theo from 'theo'; import {resolve} from 'path'; -import {newGatsbyJsonTokenFormat} from '../gatsby'; +import {genericCommonJsTokenFormat} from '../generic'; -theo.registerFormat('gatsby.js', newGatsbyJsonTokenFormat); +theo.registerFormat('generic.js', genericCommonJsTokenFormat); -describe('gatsby JS formatter', () => { - it('should return commonjs formatted tokens for gatsby', () => { +describe('generic JS formatter', () => { + it('should return commonjs formatted tokens', () => { return theo .convert({ transform: { @@ -14,11 +14,11 @@ describe('gatsby JS formatter', () => { }, format: { // @ts-ignore Theo isn't typed for custom format types - type: 'gatsby.js', + type: 'generic.js', }, }) - .then((gatsbyJs: string) => { - return expect(gatsbyJs).toMatchSnapshot(); + .then((genericJS: string) => { + return expect(genericJS).toMatchSnapshot(); }) .catch((error: string) => { console.log(`Something went wrong: ${error}`); diff --git a/packages/paste-design-tokens/formatters/gatsby.d.ts.ts b/packages/paste-design-tokens/formatters/generic.d.ts.ts similarity index 89% rename from packages/paste-design-tokens/formatters/gatsby.d.ts.ts rename to packages/paste-design-tokens/formatters/generic.d.ts.ts index de6b14ecc0..cf913d6fc8 100644 --- a/packages/paste-design-tokens/formatters/gatsby.d.ts.ts +++ b/packages/paste-design-tokens/formatters/generic.d.ts.ts @@ -5,9 +5,9 @@ import {getTokenCategories} from '../utils/getTokenCategories'; import {isNumeric, pluralCategoryMap} from './utils'; const tokenLineTemplate = (key: string, value: string): string => - ` readonly ${key}: ${isNumeric(value) ? value : `${JSON.stringify(value)}`};`; + ` ${key}: ${isNumeric(value) ? value : `${JSON.stringify(value)}`};`; const categoryTemplate = (categoryName: string, props: DesignToken[]): string => { - return `readonly "${categoryName}": readonly [ + return `"${categoryName}": [ ${props .map((prop) => { const results = []; @@ -59,10 +59,10 @@ export const formatGroupTokensWithTemplate = ( }) .join(',\n'); - return `{\n${content}\n};`; + return content; }; -export const gatsbyDTSTemplate = (result: ImmutableStyleMap): string => { +export const genericDTsTemplate = (result: ImmutableStyleMap): string => { const categories = getTokenCategories(result); const groupedTokens = `{\n"tokens":{${formatGroupTokensWithTemplate(result, categories, categoryTemplate)}}\n}`; diff --git a/packages/paste-design-tokens/formatters/gatsby.ts b/packages/paste-design-tokens/formatters/generic.ts similarity index 89% rename from packages/paste-design-tokens/formatters/gatsby.ts rename to packages/paste-design-tokens/formatters/generic.ts index af8b23af82..08c7ea2719 100644 --- a/packages/paste-design-tokens/formatters/gatsby.ts +++ b/packages/paste-design-tokens/formatters/generic.ts @@ -11,7 +11,7 @@ export const categoryTemplate = (categoryName: string, props: DesignToken[]): st `; }; -export const newGatsbyJsonTokenFormat = (result: ImmutableStyleMap): string => { +export const genericCommonJsTokenFormat = (result: ImmutableStyleMap): string => { const categories = getTokenCategories(result); const groupedTokens = `"tokens":{${formatGroupTokensWithTemplate(result, categories, categoryTemplate)}}`; diff --git a/packages/paste-design-tokens/gulpfile.ts b/packages/paste-design-tokens/gulpfile.ts index f05eededcf..79281a7f98 100644 --- a/packages/paste-design-tokens/gulpfile.ts +++ b/packages/paste-design-tokens/gulpfile.ts @@ -5,8 +5,8 @@ import gulpif from 'gulp-if'; import terser from 'gulp-terser'; import {sketchpaletteTokenFormat} from './formatters/sketchpalette'; import {gatsbyJsonTokenFormat} from './formatters/gatsby.json'; -import {gatsbyDTSTemplate} from './formatters/gatsby.d.ts'; -import {newGatsbyJsonTokenFormat} from './formatters/gatsby'; +import {genericDTsTemplate} from './formatters/generic.d.ts'; +import {genericCommonJsTokenFormat} from './formatters/generic'; import {es6TokenFormat} from './formatters/es6'; import {dTSTokenFormat} from './formatters/d.ts'; import {commonTokenFormat} from './formatters/common'; @@ -30,8 +30,8 @@ theo.registerFormat('common.d.ts', dTSTokenFormat); theo.registerFormat('es6.d.ts', dTSTokenFormat); theo.registerFormat('sketchpalette', sketchpaletteTokenFormat); theo.registerFormat('gatsby.json', gatsbyJsonTokenFormat); -theo.registerFormat('gatsby.js', newGatsbyJsonTokenFormat); -theo.registerFormat('gatsby.d.ts', gatsbyDTSTemplate); +theo.registerFormat('generic.js', genericCommonJsTokenFormat); +theo.registerFormat('generic.d.ts', genericDTsTemplate); theo.registerTransform('web', ['color/rgb']); gulp.task('tokens:less', () => @@ -246,13 +246,13 @@ gulp.task('tokens:gatsby', () => .pipe(gulp.dest(paths.dist)) ); -gulp.task('tokens:gatsby:js', () => +gulp.task('tokens:generic:js', () => gulp .src(paths.tokensEntry) .pipe( gulpTheo({ transform: {type: 'web', includeMeta: true}, - format: {type: 'gatsby.js'}, + format: {type: 'generic.js'}, }) ) .on('error', (err: string) => { @@ -261,13 +261,13 @@ gulp.task('tokens:gatsby:js', () => .pipe(gulp.dest(paths.dist)) ); -gulp.task('tokens:gatsby:d:ts', () => +gulp.task('tokens:generic:d:ts', () => gulp .src(paths.tokensEntry) .pipe( gulpTheo({ transform: {type: 'web', includeMeta: true}, - format: {type: 'gatsby.d.ts'}, + format: {type: 'generic.d.ts'}, }) ) .on('error', (err: string) => { @@ -308,8 +308,8 @@ gulp.task( 'tokens:raw', 'tokens:sketchpalette', 'tokens:gatsby', - 'tokens:gatsby:js', - 'tokens:gatsby:d:ts' + 'tokens:generic:js', + 'tokens:generic:d:ts' ) );