From 4c3d2d8297159adf547580323e2aebfdb4d56b73 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Mon, 28 Sep 2026 11:50:02 +0200 Subject: [PATCH 1/2] Update design tokens from Figma --- tokens/json/core.tokens.json | 82 ++++++++++++++++++-------------- tokens/json/fx.tokens.json | 2 +- tokens/json/semantic.tokens.json | 2 +- 3 files changed, 47 insertions(+), 39 deletions(-) diff --git a/tokens/json/core.tokens.json b/tokens/json/core.tokens.json index 20f6aee..d3500ef 100644 --- a/tokens/json/core.tokens.json +++ b/tokens/json/core.tokens.json @@ -820,7 +820,7 @@ "value": 640, "unit": "px" }, - "$description": "Width of a medium modal: a pane that lays itself out, like settings.", + "$description": "Width of a medium modal: a pane that lays itself out around one group.", "$extensions": { "mode": {} } @@ -831,7 +831,7 @@ "value": 820, "unit": "px" }, - "$description": "Width of a large modal: a working surface, like the conflict resolver. Before reaching for it, ask whether the content wants a page.", + "$description": "Width of a large modal: settings, the conflict resolver, any pane with more than one group. Before reaching for it, ask whether the content wants a page.", "$extensions": { "mode": {} } @@ -949,6 +949,48 @@ } } }, + "padding": { + "modal": { + "$type": "dimension", + "$value": "{core.space.3xl}", + "$description": "Inside a modal, on every side.", + "$extensions": { + "mode": {} + } + }, + "panel": { + "$type": "dimension", + "$value": "{core.space.2xl}", + "$description": "Inside a panel or pane, between its edge and its content.", + "$extensions": { + "mode": {} + } + }, + "card": { + "$type": "dimension", + "$value": "{core.space.3xl}", + "$description": "Inside a bordered card or a settings row.", + "$extensions": { + "mode": {} + } + }, + "menu": { + "$type": "dimension", + "$value": "{core.space.sm}", + "$description": "Around the rows inside a popup, menu, select or suggestion list, so the hover on the first and last row sits clear of the edge. 4px, so a row taking radius/control stays concentric with the popup.", + "$extensions": { + "mode": {} + } + }, + "list": { + "$type": "dimension", + "$value": "{core.space.md}", + "$description": "Around the rows of a list on a page or in a panel, so their hover and selection sit clear of the edge. Roomier than padding/menu, since no rounded container needs its corners matched.", + "$extensions": { + "mode": {} + } + } + }, "radius": { "xs": { "$type": "dimension", @@ -1191,40 +1233,6 @@ } } }, - "padding": { - "modal": { - "$type": "dimension", - "$value": "{core.space.3xl}", - "$description": "Inside a modal, on every side.", - "$extensions": { - "mode": {} - } - }, - "panel": { - "$type": "dimension", - "$value": "{core.space.2xl}", - "$description": "Inside a panel or pane, between its edge and its content.", - "$extensions": { - "mode": {} - } - }, - "card": { - "$type": "dimension", - "$value": "{core.space.3xl}", - "$description": "Inside a bordered card or a settings row.", - "$extensions": { - "mode": {} - } - }, - "list-inset": { - "$type": "dimension", - "$value": "{core.space.sm}", - "$description": "Around a list of rows inside a popup or menu, so the first and last row's hover sits clear of the edge.", - "$extensions": { - "mode": {} - } - } - }, "$extensions": { "tokens-bruecke-meta": { "useDTCG": true, @@ -1234,7 +1242,7 @@ "core", "semantic" ], - "createdAt": "2026-09-27T19:51:21.634Z" + "createdAt": "2026-09-28T09:50:00.316Z" } } } diff --git a/tokens/json/fx.tokens.json b/tokens/json/fx.tokens.json index 3a671d3..abb2daf 100644 --- a/tokens/json/fx.tokens.json +++ b/tokens/json/fx.tokens.json @@ -176,7 +176,7 @@ "core", "semantic" ], - "createdAt": "2026-09-27T19:51:21.634Z" + "createdAt": "2026-09-28T09:50:00.316Z" } } } diff --git a/tokens/json/semantic.tokens.json b/tokens/json/semantic.tokens.json index ffc06d4..0ca8efa 100644 --- a/tokens/json/semantic.tokens.json +++ b/tokens/json/semantic.tokens.json @@ -1609,7 +1609,7 @@ "core", "semantic" ], - "createdAt": "2026-09-27T19:51:21.634Z" + "createdAt": "2026-09-28T09:50:00.316Z" } } } From 2aaf0a72b41c4dd1970999f316acbccd3c5c2383 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 28 Sep 2026 09:51:46 +0000 Subject: [PATCH 2/2] Build tokens and bump to 9.0.0 --- package.json | 2 +- tokens/tokens.css | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index cca0473..8224087 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gitbutler/design-core", - "version": "8.0.0", + "version": "9.0.0", "type": "module", "description": "Design tokens for GitButler applications", "keywords": [ diff --git a/tokens/tokens.css b/tokens/tokens.css index 7512f8d..cd4d102 100644 --- a/tokens/tokens.css +++ b/tokens/tokens.css @@ -280,8 +280,10 @@ --opacity-disabled: 50%; /* Inside a bordered card or a settings row. */ --padding-card: var(--space-3xl); - /* Around a list of rows inside a popup or menu, so the first and last row's hover sits clear of the edge. */ - --padding-list-inset: var(--space-sm); + /* Around the rows of a list on a page or in a panel, so their hover and selection sit clear of the edge. Roomier than padding/menu, since no rounded container needs its corners matched. */ + --padding-list: var(--space-md); + /* Around the rows inside a popup, menu, select or suggestion list, so the hover on the first and last row sits clear of the edge. 4px, so a row taking radius/control stays concentric with the popup. */ + --padding-menu: var(--space-sm); /* Inside a modal, on every side. */ --padding-modal: var(--space-3xl); /* Inside a panel or pane, between its edge and its content. */ @@ -478,9 +480,9 @@ --size-header: 2.75rem; /* An icon's box: the glyph in a button, row, menu item or field. The icon stays this size; padding sets the size of what holds it. */ --size-icon: 1rem; - /* Width of a large modal: a working surface, like the conflict resolver. Before reaching for it, ask whether the content wants a page. */ + /* Width of a large modal: settings, the conflict resolver, any pane with more than one group. Before reaching for it, ask whether the content wants a page. */ --size-modal-lg: 51.25rem; - /* Width of a medium modal: a pane that lays itself out, like settings. */ + /* Width of a medium modal: a pane that lays itself out around one group. */ --size-modal-md: 40rem; /* Width of a small modal, the default: a prompt with a field or a short list, and pickers. */ --size-modal-sm: 26.25rem;