Skip to content
Grails

Code editing

Introduction

Code editing lets a designer change the design system that lives in code: the tokens of your component library’s repository, the ones a developer uploaded with grails-cli sync. You make the change in Grails, and it waits there as a queued change.

Grails never writes to the repository. A queued change reaches the code when a developer adds it to the repository’s tokens, or to the rules that generate them. Until then, the change is visible to the team and changes nothing in the code.

Who can edit

  • Admins and Editors, on a team’s plan that includes Code Sync, can edit. They get the controls: Edit in the bar at the foot of the table, the pencils on the values and the row menu.
  • Viewers see the same marks as everyone else: the queued changes in their cells, the chip in the head, the counter in the top bar and the list of pending changes. They get no pencil, no row menu and no Edit button.
  • On a plan without Code Sync, there are no editing controls.

If the project has no repository, or its repository has not uploaded any tokens yet, the Code side explains how to connect one, as it does in Tokens.

Where it lives

Editing happens on the Code side of the Tokens page:

  1. Open Tokens and switch the head to Code. If the project has more than one repository, pick the one you want from the menu in the head.
  2. Click Edit in the bar at the foot of the table. A pencil appears on each value, and a row menu (···) on each token.
  3. Click a pencil to change a value, or open the row menu to copy a token’s path or delete it. See Editing a value and Pending changes.

What happens to a change

Every change you queue follows the same path:

  1. Queued. The change is saved in Grails, for that repository. It shows in its cell as before → after, outlined in amber, and in the pending changes list.
  2. Applied where it was queued for. The change reached the repository. The next sync compares the change with what the repository holds, and marks it when the repository has the value the change asks for.
  3. Discarded. Someone discarded it before it was applied. Discarded means an admin or an editor did it in Grails. Discarded from code means a developer did it from the repository with grails-cli tokens discard: it also shows who discarded it and the reason they gave.
  4. Removed. What it changed is gone, for example the token was removed from the repository.

If the repository holds another value than the one a change asks for, the change is not closed: it stays queued, and Grails checks it again on every sync. When the repository has also moved since the change was queued, the change shows In code now with the value the repository holds.

Grails keeps every change that left the queue under Recently closed. Hover over a reason there to read its sentence.

Changing the same value again updates the change that is already queued, rather than adding a second one. If you set a value back to what the repository has, nothing stays queued.

Grails does not remove anything from the repository, so a removal you queue also waits for a developer.

Read Editing a value to change a value, Colours and units for what happens to a colour, a size or a time when you change it, Fixed values and aliases to point a token at another one, and Pending changes to see, discard or follow what waits.