Skip to content
This repository has been archived by the owner on May 19, 2023. It is now read-only.

Latest commit

 

History

History
71 lines (48 loc) · 2.89 KB

README.md

File metadata and controls

71 lines (48 loc) · 2.89 KB
Raw

API server modernization and Cross-platform token adapter

Theme Builder API server modernization

How to run

Open a new terminal window at the root of this hackathon submission repository and run:

git submodule update --init

On the same terminal window, change into the a11y-theme-builder submodule folder, clear the database file, run the usual dev environment setup and start the Fastify api server.

cd hackproject/code/api-server-modernization/a11y-theme-builder/code
echo -n "" > src/data/themes
npm run build
npm run start:fastify

Open another terminal window on the same directory and run the api tests.

cd hackproject/code/api-server-modernization/a11y-theme-builder/code
npm test

Finally, revert the changes made to the original database file.

cd hackproject/code/api-server-modernization/a11y-theme-builder/code
git checkout src/data/themes

Cross-platform token adapter

Summary

Implements a tool that can transform the JSON generated by the theme-builder into artifacts that can be consumed by nearly any platform. This is accomplished by using the open source tool Style-Dictionary. The adapter fixes the JSON supplied by the theme-builder and provides a config file that generates color design tokens that are ready to be consumed by the following platforms:

  • Android (XML)
  • iOS (Swift)
  • Web (css variables)
  • TypeScript

ℹ️ The current implementation was tested with the included "Sample" theme on theme builder and only transforms the color design tokens.

How to run

To see magic happen, execute the follow steps:

  1. npm install
  2. npm run build
  3. Explore the generated build artifacts (ready to be consume by the various platforms) in the build directory ✨

Explanation

Here is a summary of the important files included in the application.

file description
generated-tokens-replace-with-theme-builder-json.json This file is a direct copy-and-paste of the JSON on the "CODE" tab of the "Sample" theme in the theme-builder UI. This file can be replaced with the JSON from the theme-builder.
tokens.js The JSON copied from the theme-builder UI appears to be broken. There are token values that reference missing values, such as "Core-Colors". This file adds the missing references that are required for the "Sample" theme.
style-dictionary-config.js Configuration file for style-dictionary that sets up the various transforms and artifacts for the platforms. Style-Dictionary supports more platforms, but the config file provides an example. The config file also includes the code that allows Style-Dictionary to parse the JSON generated by the theme-builder.

The code is commented. Please explore the source to learn more.

The artifacts generated in the build directory after running the tool, are ready to be consumed by the various platforms.