This document outlines the process for approving and pulling in CSS/SCSS design changes into your project. The integration process involves collaboration between the design and programming teams, ensuring smooth adoption of design updates.

• Teams will be notified via email and team notifications when a new version of the design changes is available.
• The notification includes a list of changes in that version for teams to review.

• The main branch, now containing the approved design changes, will be used as a submodule in each team's project.

# Add the submodule to your project
git submodule add -b main https://github.com/onehub/ads-design-tokens.git path/to/submodule

# Initialize and update the submodule
git submodule update --init --recursive

Teams should replace the placeholder URLs and paths with their actual repository URL and desired submodule path. The -b main flag specifies the branch to track.

# Fetch the latest changes in the submodule
git submodule update --remote --merge

Replace the placeholder messages with meaningful commit messages.

Using bash scripting (or any sort that suits your team), can allow you to have a seamless setup. You could have a script to; only save the necessary files from the submodule desired, automatically move files where you want them to go, or automatically check out the tag/commit hash associated with the commit to the repo that you'd like.

In the following example, it's assumed that the submodule has already been integrated, but you want an easy command line argument to easily switch between versions.

#!/bin/bash

while getopts "N:V:" flag
do
    case "${flag}" in
        N) NAME_OF_SUBMODULE=${OPTARG};;
        V) SUBMODULE_VERSION=${OPTARG};;
    esac
done

cd $NAME_OF_SUBMODULE
git checkout $SUBMODULE_VERSION
cd ..

Then, on command line, the following could be run to check out the submodule and version of submodule desired:

bash script.sh -N v1.1 -N submodule-test

In this example, we have a script that has a set version and automatically adds the submodule with that version, moves the files to a directory, and then deletes the submodule. This could be valuable in the case where a team wants a particular version of the files, but does not want the actual submodule itself.

version=v1.0

git submodule add git@github.com:onehub/ads-design-tokens.git
cd ads-design-tokens
git checkout $version
rm -rf ../output/css/_variables.css
cp -R . ../output/css/_variables.css
cd ..
rm -rf ads-design-tokens
git rm ads-design-tokens
rm -rf .git/modules/ads-design-tokens

To run: bash script-2.sh

As we can see from the above 2 examples, using scripting we can achieve a variety of results. We can use this same sort of scripting in both builds and pipelines, so it's possible to fully automate these sort of outcomes.

By following this structured process, teams can efficiently collaborate, review, and integrate design changes into their projects. Effective communication and timely updates are crucial for maintaining a seamless workflow between the design and programming teams.

Design tokens represent the repeated decisions which make up ADS. Tokens replace static values with semantic references. Tokens are generated in Figma using Tokens Studio within ADS/Foundation. In general, tokens are namespaced using the following convention:

$type.category/element.property.variant.state.scale

This tier holds all of the hard-coded values for our most foundational design elements including color swatches, font families, and effects. All other tiers hold references to these tokens.

This tier holds universal named references to Core tokens for things like primary text colors and heading styles.

This tier holds semantic references unique to light themes. For every token in this tier, there is a matching Dark token.

This tier holds semantic references unique to light themes. For every token, there is a matching Light token.