From 0903b268998c2a5e461ce143ae4a5bd3c63e93cf Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Thu, 4 Jan 2024 15:11:31 +0000 Subject: [PATCH] chore: update docs chore: revert changelog updates BREAKING CHANGE: Restructure of design tokens and rewrite of build process --- docs/CHANGELOG.md | 105 ---------------------------------- docs/figma-github-workflow.md | 15 ----- docs/pretransform-phase.md | 16 ------ docs/tokens-documentation.md | 32 ----------- 4 files changed, 168 deletions(-) delete mode 100644 docs/figma-github-workflow.md delete mode 100644 docs/pretransform-phase.md delete mode 100644 docs/tokens-documentation.md diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 740bec2c..984ce18b 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,108 +1,3 @@ -# [4.35.0-beta.1](https://github.com/Sage/design-tokens/compare/v4.34.0...v4.35.0-beta.1) (2024-01-04) - - -### Features - -* add component splits and docs pages ([19e3151](https://github.com/Sage/design-tokens/commit/19e315107627fcd03070ca43acebeaba145bcbde)) -* add multi mode and multi platform config ([3bb12c9](https://github.com/Sage/design-tokens/commit/3bb12c946107d21fb518aabd78db271bc63413d6)) -* add token splits for all formats ([2b2627e](https://github.com/Sage/design-tokens/commit/2b2627e4b1c6d572ed87780ba00d9a20636cb382)) -* **data:** ? ([e92c6fe](https://github.com/Sage/design-tokens/commit/e92c6fe8912f1ebb34f1f0613d1b99bc46a58b3e)) -* **data:** add alpha to inactive bg color. ([c4e266a](https://github.com/Sage/design-tokens/commit/c4e266a661ef3e24e25a27e46e85763fcf893652)) -* **data:** Add brightStorm to origin colors. Change value of neutral.inverse in midlayer. Change the status.inverse hover from contrastMore to contrastLess mix. Reorder status tokens alphabetically. Move switch tokens into components.form and add/edit tokens within that set. Reorder switch tokens alphabetically. ([73fdcc9](https://github.com/Sage/design-tokens/commit/73fdcc95968e8fe8741309c28e305dd935f31451)) -* **data:** add disabled colour tokens to link types ([8f16fb0](https://github.com/Sage/design-tokens/commit/8f16fb0fe8dbbd47db2c1eca93df7c81d5ec5caf)) -* **data:** add faint and whisper tokens to base.color.generic.bg.inverse ([0614adc](https://github.com/Sage/design-tokens/commit/0614adc47f57f41c177a9d75f764e77fda8af0f8)) -* **data:** Add form.switch label tokens ([a2faa49](https://github.com/Sage/design-tokens/commit/a2faa49568aeeff48beb2dfe792de7499d23bafc)) -* **data:** add progress.standard.label-alt token ([8f8bb43](https://github.com/Sage/design-tokens/commit/8f8bb4395221e136a10f9a1b7da0b6eb171a19cc)) -* **data:** added claire's latest treatment approach to mid layer and component layer for majors. ([9e181db](https://github.com/Sage/design-tokens/commit/9e181dbcc878563c20f2110007198bdb0f867d4c)) -* **data:** adding badge component-specific tokens ([77184ed](https://github.com/Sage/design-tokens/commit/77184ed47b7d08c61a622c36ea0960466cc3223a)) -* **data:** adding bar tokens to validation group. ([6d8cf25](https://github.com/Sage/design-tokens/commit/6d8cf25432cb71bc477672214f8d00528d3c42f8)) -* **data:** adding border active and activated tokens ([2f46dbc](https://github.com/Sage/design-tokens/commit/2f46dbc543f8d3b2d015bcce9412cb3b0f92c063)) -* **data:** adding calendar date states ([12535e8](https://github.com/Sage/design-tokens/commit/12535e883e45a846e34330207d86017976d2c397)) -* **data:** adding component specific tab / anchor nav tokens. ([6dde47d](https://github.com/Sage/design-tokens/commit/6dde47d104e84217dc8883ddd8dc1582afb864db)) -* **data:** adding content tokens back into mid layer ([9c1daa1](https://github.com/Sage/design-tokens/commit/9c1daa1e8afc632a5db5a6743f3d50bf3608b3f8)) -* **data:** adding correct prefixes to component specific tab file. ([1f7a284](https://github.com/Sage/design-tokens/commit/1f7a2842dcf365df9cd5c814d3001c9db17c498e)) -* **data:** adding data table header tokens ([a5995c7](https://github.com/Sage/design-tokens/commit/a5995c7722774b8ad07c3821dee48afade4c3db5)) -* **data:** adding fg tokens to status mid layer tokens. Also simplified origin tokens. ([25ca42e](https://github.com/Sage/design-tokens/commit/25ca42e4fd3591204c7147f3a5763fd06acbd50b)) -* **data:** adding focus group in component layer. ([386516a](https://github.com/Sage/design-tokens/commit/386516a9daf94f8f269dce4926a764a540a20471)) -* **data:** adding focus states to mid layer ([786a5f4](https://github.com/Sage/design-tokens/commit/786a5f4ee514679b018eccdf7286f122db31a344)) -* **data:** adding input hover token ([557b933](https://github.com/Sage/design-tokens/commit/557b93320f3ec9695ba44f64bf13b1c2977ec5c6)) -* **data:** adding input mid layer and adding 50% black component layer for inputs. ([b967bcc](https://github.com/Sage/design-tokens/commit/b967bcc55ea77d14e33105af6269eb5725b3aa77)) -* **data:** adding interactive container tokens. ([99db06b](https://github.com/Sage/design-tokens/commit/99db06bd80cef133acb81c444d4a5d75cce068d8)) -* **data:** adding latest typography tokens off the back of the collab work with Phillip. ([580362d](https://github.com/Sage/design-tokens/commit/580362dbf81895f7b78e50ac188f2ead5f7b4f28)) -* **data:** adding monochrome name instead of minor ([47df035](https://github.com/Sage/design-tokens/commit/47df03541b81120048e89fe22eca6bdb90d7384f)) -* **data:** adding rest of mid layer status colors ([cf1bcee](https://github.com/Sage/design-tokens/commit/cf1bcee6d9f2048a8d775fffc2bb563982c05423)) -* **data:** adding standard prefix to badge colors. ([38602c0](https://github.com/Sage/design-tokens/commit/38602c01c9fba1d00952913d6558f9def0cb920d)) -* **data:** adding subscription tile and selectable tile tokens ([af667e8](https://github.com/Sage/design-tokens/commit/af667e84d4761206cc5537a37b5d7743cd3ef61e)) -* **data:** adding subtle button set ([1ef50a9](https://github.com/Sage/design-tokens/commit/1ef50a9ad353d0ce29d87223e4d12d9a5d0eef7b)) -* **data:** adding tab tokens. ([2250dd1](https://github.com/Sage/design-tokens/commit/2250dd1af3023167b1b744229554ac131cec4f21)) -* **data:** adding text-alt for calendar form group ([79bc491](https://github.com/Sage/design-tokens/commit/79bc491d5c41cea6bde92a0ce43c78df1fd4b9a2)) -* **data:** adding text-enabled to form standard ([70a76a3](https://github.com/Sage/design-tokens/commit/70a76a3b021f414663fa4907f86cf5c97d4bb53d)) -* **data:** Adding the monochrome button group to mid layer. ([6f99d32](https://github.com/Sage/design-tokens/commit/6f99d327cc2bb83d86f846223f06580029b3038c)) -* **data:** adding upon the dataEntry mid layer ([d866094](https://github.com/Sage/design-tokens/commit/d866094689071cd699cb3effc5515ef18a55f1c3)) -* **data:** adding with active mid layer text and icon token ([9440760](https://github.com/Sage/design-tokens/commit/9440760aaceaeafd29a619b19f6293d265a79688)) -* **data:** adjusting all the light color hover colors to use the 16% modifier instead of 12%. ([9fbca96](https://github.com/Sage/design-tokens/commit/9fbca96af8ea1087d2d9103504ca7eb8de843bf2)) -* **data:** adjusting the disabled colors as per claire's exploration. ([228e79b](https://github.com/Sage/design-tokens/commit/228e79b4e658be4c8aee2ad813fc06b3f9919703)) -* **data:** alphabetising modifiers ([df4ebe2](https://github.com/Sage/design-tokens/commit/df4ebe29fee1335241b5b5e40d4b277c5b3067f4)) -* **data:** alphebatising major mid layer tokens ([cc4b6b4](https://github.com/Sage/design-tokens/commit/cc4b6b446d1e14dd8cd23771f5c5dcd13256e166)) -* **data:** applying changes to align with latest button proposal. ([0675f83](https://github.com/Sage/design-tokens/commit/0675f83f0c3a786eb3c9f78ef6332fc3e4e8c5df)) -* **data:** beginning to adjust button tokens based on claire's work. ([67e7cdf](https://github.com/Sage/design-tokens/commit/67e7cdf63196b208dc686391a0c18ef3ce2eebae)) -* **data:** changing bg-default on forms to enabled. ([a24e7eb](https://github.com/Sage/design-tokens/commit/a24e7ebce0710135c9dd81f1dc60b2f29123bb17)) -* **data:** changing the enabled to default suffix. ([8038e77](https://github.com/Sage/design-tokens/commit/8038e773f0944d826bd1097296720dcd721126ff)) -* **data:** changing the input mid layer group to 'data entry' ([f512ed9](https://github.com/Sage/design-tokens/commit/f512ed9e6b5db7333697c104cb348a42c755cd4c)) -* **data:** continuing to add our table tokens ([e0f040c](https://github.com/Sage/design-tokens/commit/e0f040c219ceac66c9a119a9091882fc6bc3773f)) -* **data:** Correct value of progress.standard.border-default token. ([7f89d50](https://github.com/Sage/design-tokens/commit/7f89d5016c6ebfdc8d3e48bfb50d7d1ac5d7997e)) -* **data:** decoupling interactive tokens with passive tokens. ([8c06478](https://github.com/Sage/design-tokens/commit/8c064789ee795b11b199540c18be7bc020cb41da)) -* **data:** first pass of nav tokens complete ([623b9a2](https://github.com/Sage/design-tokens/commit/623b9a224e3044303404130cd0d539821d645c26)) -* **data:** fixing hover token on action popover menu. ([b14dff4](https://github.com/Sage/design-tokens/commit/b14dff4960fef3c84a08bc36d5ae46eb4c1d9617)) -* **data:** fixing issues on the hover state for accordion ([8a18ff7](https://github.com/Sage/design-tokens/commit/8a18ff78a08158f416e5ae6121698cc5de9b4ecd)) -* **data:** fixing our current component-specific tokens ([751ff7a](https://github.com/Sage/design-tokens/commit/751ff7a7dc93e2c7752a31c6c90afccbb64e9c57)) -* **data:** fixing some border issues on container ([1b76cba](https://github.com/Sage/design-tokens/commit/1b76cba965521efd521ed49963c96b89dde6c4ef)) -* **data:** fixing some breakages on the mid layer from the modifier name changes ([fa1dfb7](https://github.com/Sage/design-tokens/commit/fa1dfb76fd60e23444035da3709bd1b2d06c0c86)) -* **data:** fixing some label colors as they were incorrectly pointing to validation colors on tabs. ([3c3844c](https://github.com/Sage/design-tokens/commit/3c3844c9c004e4ae2b8073a63f6db0158f233316)) -* **data:** made header alt token translucent ([35ba073](https://github.com/Sage/design-tokens/commit/35ba07311dc21004dd6e06db76de158cad04ae02)) -* **data:** merging global files into one file under modes parent group. ([37dfd51](https://github.com/Sage/design-tokens/commit/37dfd513a314176589ffff631b0dbf429092b17b)) -* **data:** new dataTable tokens ([df10943](https://github.com/Sage/design-tokens/commit/df10943fb5928b687a538eab3dfe81d0124994c0)) -* **data:** not sure what :o ([51ee117](https://github.com/Sage/design-tokens/commit/51ee117f2482d364ccb553d1232f3e73ee8d7544)) -* **data:** pushing up a first pass of data table. Tokens to be reviewed by claire ([ab0a831](https://github.com/Sage/design-tokens/commit/ab0a8312fa0b265e0f61740fee136bca09831892)) -* **data:** pushing up action component specific tokens. ([5807471](https://github.com/Sage/design-tokens/commit/5807471e01909a10ff99249384feafb6492c2f0b)) -* **data:** pushing up changes to mid layer structure ([8ce5288](https://github.com/Sage/design-tokens/commit/8ce5288d87f8221633caaac8b68207f298f41664)) -* **data:** pushing up everything i have before trying to consolidate content and backdrop. ([ea9e421](https://github.com/Sage/design-tokens/commit/ea9e421f67dd928972afaad59e89419787858db3)) -* **data:** pushing up fixed monochrome set for nav menus ([90fe25a](https://github.com/Sage/design-tokens/commit/90fe25aa3ce190c74993be3206e508e4b6344e54)) -* **data:** pushing up latest changes based on onboing discussions with claire ([cd36d67](https://github.com/Sage/design-tokens/commit/cd36d67aa3aae953963b938beabd54b3c643464c)) -* **data:** pushing up latest changes to hover colors. ([fc26be1](https://github.com/Sage/design-tokens/commit/fc26be1eed457611eac52795b0a198e51dfa02cc)) -* **data:** pushing up loatest changes to forms area ([0bfe337](https://github.com/Sage/design-tokens/commit/0bfe3375dd44918b9593f884ac6b63d06cb0794c)) -* **data:** pushing up progress component specific set ([b4704ff](https://github.com/Sage/design-tokens/commit/b4704fff4223d697cac2117ab51e6872714fe22f)) -* **data:** pushing up status tokens for pill hover states and message text. ([1d67f96](https://github.com/Sage/design-tokens/commit/1d67f96ccf6b77e0b0c883ec2310c83d30d38088)) -* **data:** Pushing up theme changes ([97777a7](https://github.com/Sage/design-tokens/commit/97777a7c90b6a5621e0f07f979d8f1df4839e02a)) -* **data:** remove dark mode token set ([4902084](https://github.com/Sage/design-tokens/commit/490208459681bbe204e2b7b4bb091596c25587a7)) -* **data:** remove Platform tokens ([4d3a016](https://github.com/Sage/design-tokens/commit/4d3a016084be39659f3d4f595764ba9d02a18363)) -* **data:** removing alhpa from the passive bgs and fgs. ([640edb2](https://github.com/Sage/design-tokens/commit/640edb2cab611f29d8810a0dfdb1a10e59af695f)) -* **data:** renamed minor set to monochrome and deleted monochrome set ([2937e93](https://github.com/Sage/design-tokens/commit/2937e93befab2f4ce074779d9a0f40f64da2c5a6)) -* **data:** reordering mid layer to be alphabetisised ([947f551](https://github.com/Sage/design-tokens/commit/947f551fca01864a291e19d94de7853a73993bd7)) -* **data:** Reorganise link token hierarchy. Rename action folder to link. Reorder several component token groups into alphabetical order ([2eccdc4](https://github.com/Sage/design-tokens/commit/2eccdc4ebe405418ba82196164b4727dcf45fbe3)) -* **data:** restructuring fedback mid layer tokens ([a0178bb](https://github.com/Sage/design-tokens/commit/a0178bb4ef818132c6847ce97fde0c6d15bba44c)) -* **data:** simplifying mid layer to consume less origins and instead rely on cascades ([beee9b7](https://github.com/Sage/design-tokens/commit/beee9b7a552636c8aa63d6289634d94416b73156)) -* **data:** simplifying passive tokens ([a8d5b04](https://github.com/Sage/design-tokens/commit/a8d5b041200efd72a3fcc87f16bad5054655ef2e)) -* **data:** tab fixes based off claire's comments ([554f7f5](https://github.com/Sage/design-tokens/commit/554f7f5fc7a04ccad36f261df6bafb6721c08332)) -* **data:** tidying up mid layer bgs and fgs and removing mixers from table layer ([cf74958](https://github.com/Sage/design-tokens/commit/cf74958b4fae81843b86ab7739815cf6bd392a4b)) -* **data:** tidying up the test tokens and applying them in the button specific area. ([3ddd6ff](https://github.com/Sage/design-tokens/commit/3ddd6ffd429ff7eed02c2a3d26f634ef0d692d80)) -* **data:** Update base.color.generic.fg.inverse token values for use in dataTable ([167086c](https://github.com/Sage/design-tokens/commit/167086cd64b96412b8a0e438e4032748a2553ee6)) -* **data:** Update neutral.inverse.hover value ([d2b3f78](https://github.com/Sage/design-tokens/commit/d2b3f78bcdc79436332239a66e41362efd155280)) -* **data:** updating feedback tokens to use brighter tones ([a15fe6c](https://github.com/Sage/design-tokens/commit/a15fe6c4f5a66003244a39f7875cbe59a648ba4a)) -* **data:** updating link colors to work on zebra stripes inside a table ([e6b7a63](https://github.com/Sage/design-tokens/commit/e6b7a6328d4b0d7bffec61b5d25a8381b6d81921)) -* **data:** updating mid layer to follow claire's latest hover and active state proposals ([74fe4ac](https://github.com/Sage/design-tokens/commit/74fe4acbb5a8744842f8bd941bbc226f2e9f4ea7)) -* **data:** updating mixers to match claire's 16, 32 and 48 percentages. ([e987c33](https://github.com/Sage/design-tokens/commit/e987c33b5baec9b9e874f5d53c886a638dcb6993)) -* **data:** updating table tokens based on latest agreed simplified colors ([73b3057](https://github.com/Sage/design-tokens/commit/73b3057be223aa74aec0dcf4715fd27ed5dce310)) -* **data:** updating terminology based on agreed on 'active' and 'actived' naming. ([25da648](https://github.com/Sage/design-tokens/commit/25da6484c2a58804dcefce082649e898e51503a6)) -* initial rewrite to new design token structure ([0213652](https://github.com/Sage/design-tokens/commit/02136522254baef0d06baeeab14987404c17955c)) -* remove duplicated/renamed files ([c304040](https://github.com/Sage/design-tokens/commit/c304040a1d688423ac9e8993cd40617cb8c5696d)) -* storybook POC ([60b2ab6](https://github.com/Sage/design-tokens/commit/60b2ab677c7f6689a9b829b770e6aa34c5f834b8)) -* testing with local sd-transforms package ([2fd96ed](https://github.com/Sage/design-tokens/commit/2fd96ed01b330986ba7899609b2b8cf11c8a6b9a)) -* tidy up build scripts ([cff0906](https://github.com/Sage/design-tokens/commit/cff0906782afbe23308e6515cbe94091174c8956)) -* update component split build script ([9f0c476](https://github.com/Sage/design-tokens/commit/9f0c47667964f74eabedc5376bcaff7baf45e589)) -* update to use colorModifier transform with options (requires changes to be merged within sd-transforms package) ([c82cdb8](https://github.com/Sage/design-tokens/commit/c82cdb8ac93f28bec9c18eed6dab64411727c298)) -* use updated sd-transforms package ([901bace](https://github.com/Sage/design-tokens/commit/901bace5fd269ca21139543beedaffb2f845137f)) - # [4.34.0](https://github.com/Sage/design-tokens/compare/v4.33.0...v4.34.0) (2023-11-28) diff --git a/docs/figma-github-workflow.md b/docs/figma-github-workflow.md deleted file mode 100644 index a7311c3d..00000000 --- a/docs/figma-github-workflow.md +++ /dev/null @@ -1,15 +0,0 @@ -# Figma Github Workflow - -Since Design Tokens are basically a design decisions, the ones that are responsible for taking them should be the Designers. - -We are fulfilling this idea by using [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens). Thanks to this, Designers are able to maintain token names as well as references and values from the environment that they are most comfortable with. - -To store all their work, a plugin's feature called **Github Sync** is used. It allows designers to commit their changes directly to the github repository, straight from the simple Figma Tokens plugin UI. - -All Designer's work is kept at the `develop` branch. Merging this branch to master will cause a release of the new version of Design Tokens Library. - - -## Additional links: -[Figma Tokens plugin author's site](https://jansix.at/resources/figma-tokens) - -[Figma Tokens plugin documentation](https://docs.tokens.studio/) diff --git a/docs/pretransform-phase.md b/docs/pretransform-phase.md deleted file mode 100644 index 05849bcb..00000000 --- a/docs/pretransform-phase.md +++ /dev/null @@ -1,16 +0,0 @@ -# Pre-transform Phase - -Design Tokens JSON format provided by [Figma Tokens plugin](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) does not meet our expectations. Plugin has few features that helps Designers maintenance of the tokens, however it produces values, that are not understandable tor `style-dictionary`, for example: -- Plugin accepts different formats of referencing - using `{}` brackets, and starting with dollar sign `$`, while `style-dictionary` uses only curly brackets. -- Plugin allows Designers to use references together with alpha channel, like `rgba($colors.major.500, 0.5)`, while `style-dictonary` does not understand such syntax. -- Complex tokens, like typography have multiple properties like `fontFamily`, `fontSize`, `fontWeight`. Using [token-transformer](https://www.npmjs.com/package/token-transformer) written by the author of the plugin creates separate token for each property, while what we consider typography token as a full definition of typography. - -Pre-transform phase was introduced to solve this issue. - -## omod -[Omod](https://www.npmjs.com/package/omod) package is used to transform the JSON object. Omod package has built in modifiers for figma tokens, so eventually the proper format is provided. Modifiers are pipeable, therefore you can add your own modifier if needed. - -It resolves all references, resolves and converts all color values to hex8 format and builds single `value` property for complex tokens. - -## Pretransformed tokens -Output file is written to `temp/tokens.json`. This is the entry point (not the `data/tokens.json`) for all further transforms. diff --git a/docs/tokens-documentation.md b/docs/tokens-documentation.md deleted file mode 100644 index c7ff1947..00000000 --- a/docs/tokens-documentation.md +++ /dev/null @@ -1,32 +0,0 @@ -# Design Tokens Documentation - -File: `./scripts/tokens-documentation.js` - -```bash -$ node ./scripts/tokens-documentation -``` - -```js -// script is executed on require, since it uses IIFE -require('./scripts/tokens-documentation') -``` - -## Disclaimer -Tokens documentation script generates documentation for all design tokens. It's necessary for documentation to be generated based on exat the same token names and values as the actual available ones in the library. That is why it uses style dictionary engine and our transforms underneath. Transformed data is then passed to the Handlebars engine and is transformed to proper HTML files. - -There are multiple files with different grouping of the tokens. -- General listing (`dist/docs/tokens/index.html`) - lists all available themes, categories and tokens. -- Theme listing (`dist/docs/tokens//index.html`) - lists all categories and tokens in given theme. -- Category listing (`dist/docs/tokens///index.html`) - lists all tokens in given category in given theme. - -Splitting documentation in separate files was introduced to help with embedding this documentation into iframes. - -There is also possible to add `?embedded=true` in address bar in web browser. This hides all unnecessary elements in the documentation. - -## Config - -| Name | Description | -|---|---| -| mainTemplate | Path to main template for documentation | -| docsPartials | Glob to partials for tokens documentation | -| docsDir | Output dir for generated documentation |