Workflows in Tokens Studio
Tokens Studio UI explained
- Navigation: Provide options for switching between Tokens, Inspect, and Settings views.
- Token Sidebar: Organised into three main groups: Base, System, & Component Tokens. Explore our Token Structure further here.
- Theme Selector: Enables switching between themes, screen sizes, and dark/light mode.
- Token View: Offers both a standard visual tokens view and a .json view.
- Token list: Displays all tokens available for the selected set, e.g. buttons.
- Token Action: Allows for adding a new token.
- Branch Selector: Facilitates selecting an existing branch or creating a new one.
Theme Management
Theme Selector
To select your preferred theme, navigate to the theme selector dropdown. Within the dropdown menu, choose your brand from the available options. Additionally, select the screen size that best suits your needs and toggle between light and dark mode as desired. For a deeper exploration, click on "Manage themes" to access additional options and settings related to themes.
Theme Selector
To select your preferred theme, navigate to the theme selector dropdown. Within the dropdown menu, choose your brand from the available options. Additionally, select the screen size that best suits your needs and toggle between light and dark mode as desired.
For a deeper exploration, click on "Manage themes" to access additional options and settings related to themes.
Enable Components
When adding a new component to MDX or to your brand, ensure it's enabled in the Themes Settings to make it accessible for selection.
Branches in Tokens Studio
As we utilise tokens in a team environment, implementing version control is crucial to ensure that token values remain up-to-date while team members work on different files. The main branch serves as our source of truth and cannot be modified. To merge a branch into the main branch, we adhere to a four-eyes principle.
How to work with branches
- The Main branch cannot be altered. Pushing to Main is not permitted.
- Always ensure to pull from the main branch before starting work, and activate the correct theme.
- Whenever making changes, ensure you're on a feature branch. If you don't already have a feature branch for your upcoming change, create a new branch from the main branch.
- After completing your changes, push them to GitLab, and in the comment section, include "feat: whatever change you made". Keep the comment brief!
- Create a Pull Request in GitLab and assign to a member of the MDX Team.
Branch Naming
For consistency and clarity, MDX adheres to a specific branch naming convention. Each branch name should incorporate the brand and the potentially affected component, along with a brief descriptive term for the changes made.
For consistency and clarity, MDX adheres to a specific branch naming convention. Each branch name should incorporate the brand and the potentially affected component, along with a brief descriptive term for the changes made.
When modifying an existing component, establish a new branch named feature/your brand + the affected component + a descriptive term, for instance, feature/micasaButtonsOutlines. If you're a member of the MDX team and need to amend a source component, label it as feature/mdxComponentFixes.
For creating new system tokens for a brand, opt for feature/your brand + system tokens, e.g. feature/micasaSysTokens.
FAQs
The base tokens form the foundation of the MDX token system, upon which both System and Component tokens rely. Therefore, modifications are not allowed. If you believe changes are necessary, please contact the MDX team with your request.
The MDX system token structure remains consistent across all brands, ensuring smooth operation of tokens across components. You have the flexibility to adjust colors, spacing, and fonts as necessary, always referring back to base tokens. Additionally, you can introduce custom tokens for fonts, font weights, styles, and colours.
However, should you require customisation beyond these capabilities, we advise reaching out to the MDX team for assistance.
At present, MDX provides several font styles, including a predefined set of mandatory ones. You have the option to incorporate custom font styles, labeling them as custom1, custom2, custom3, and so forth. There's no restriction on the number of custom font styles you can introduce, but we suggest limiting them to a maximum of 6 for optimal management.
Furthermore, if a font style primarily varies by its font weight, you can employ a font style token in conjunction with a font weight token within your component. For instance, you could utilize "Display 2" along with the "extra bold" font weight.
If you suspect that certain parts of your system or component tokens have been compromised, you have several avenues for resolution:
- Undo the changes within Tokens Studio.
- Pull from GitLab, which will revert the alterations made up to your last push to GitLab.
- If the damage is irreversible, consider initiating a new branch and rebuilding from the beginning.
- Reach out to the MDX team for assistance if you encounter difficulties beyond your capacity to resolve independently.