@gitbutler/design-core 3.2.1 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -5
- package/package.json +1 -1
- package/tokens/json/core.tokens.json +5 -103
- package/tokens/json/fx.tokens.json +1 -1
- package/tokens/json/semantic.tokens.json +1 -97
- package/tokens/tokens.css +4 -24
package/README.md
CHANGED
|
@@ -65,11 +65,60 @@ Import individual style sheets:
|
|
|
65
65
|
@import "@gitbutler/design-core/styles/text"; /* Text utilities */
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
-
|
|
68
|
+
#### CSS Reset
|
|
69
|
+
|
|
70
|
+
The reset is scoped to `@layer reset` to avoid specificity conflicts with application styles. It applies the following normalizations:
|
|
71
|
+
|
|
72
|
+
- **Box sizing** — `box-sizing: border-box` on all elements and pseudo-elements.
|
|
73
|
+
- **Font rendering** — `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `text-rendering: optimizeLegibility`, and font size inflation prevention on `html`.
|
|
74
|
+
- **Body defaults** — zero padding and margin, `overflow-x: hidden`, and base values for `color`, `font-family`, `font-weight`, and `line-height` pulled from design tokens.
|
|
75
|
+
- **Form elements** — `input`, `textarea`, `select`, and `button` have their padding, border, and background stripped, and inherit `color` and `font` from the parent.
|
|
76
|
+
- **Headings** — `h1`–`h6` have `margin-block` removed.
|
|
77
|
+
- **Code & pre** — `code` and `pre` use `var(--fontfamily-mono)`.
|
|
78
|
+
- **Lists & paragraphs** — `ul` and `ol` have `padding-left` and `list-style` removed; `ul`, `pre`, and `p` have `margin-block` removed.
|
|
79
|
+
|
|
80
|
+
#### Text Utilities
|
|
81
|
+
|
|
82
|
+
Text classes are scoped to `@layer text`. The layer also sets three font-family custom properties on `:root`:
|
|
83
|
+
|
|
84
|
+
| Property | Value |
|
|
85
|
+
| --------------------- | ----------------------------------------- |
|
|
86
|
+
| `--fontfamily-base` | `var(--text-fontfamily-base), sans-serif` |
|
|
87
|
+
| `--fontfamily-mono` | `var(--text-fontfamily-mono), monospace` |
|
|
88
|
+
| `--fontfamily-accent` | `var(--text-fontfamily-accent), serif` |
|
|
89
|
+
|
|
90
|
+
**Size classes** set `font-size`, `font-weight: regular`, `line-height`, and `font-family: base` as a self-contained unit:
|
|
91
|
+
|
|
92
|
+
| Class | Font size |
|
|
93
|
+
| ------------------- | ----------------------------------------- |
|
|
94
|
+
| `.text-10` | 10px (0.625rem) |
|
|
95
|
+
| `.text-11` | 11px (0.6875rem) |
|
|
96
|
+
| `.text-12` | 12px (0.75rem) |
|
|
97
|
+
| `.text-13` | 13px (0.8125rem) |
|
|
98
|
+
| `.text-14` | 14px (0.875rem) |
|
|
99
|
+
| `.text-15` | 15px (0.938rem) |
|
|
100
|
+
| `.text-16` | 16px (1rem) |
|
|
101
|
+
| `.text-accent-head` | 62px (3.875rem) — display / brand heading |
|
|
102
|
+
|
|
103
|
+
**Modifier classes** are designed to be composed on top of a size class:
|
|
104
|
+
|
|
105
|
+
| Class | Effect |
|
|
106
|
+
| ----------------- | ------------------------------------------------------------------------------------------ |
|
|
107
|
+
| `.text-semibold` | `font-weight: var(--text-weight-semibold)` |
|
|
108
|
+
| `.text-bold` | `font-weight: var(--text-weight-bold)` |
|
|
109
|
+
| `.text-italic` | `font-style: italic` |
|
|
110
|
+
| `.text-monospace` | Switches to `var(--fontfamily-mono)` |
|
|
111
|
+
| `.text-body` | Switches to the looser `var(--text-lineheight-body)` line height |
|
|
112
|
+
| `.text-balance` | `text-wrap: balance` — ideal for short headings |
|
|
113
|
+
| `.text-pre` | `white-space: pre-wrap` + `word-break: break-word` — preserves whitespace without overflow |
|
|
114
|
+
|
|
115
|
+
Example usage:
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<p class="text-13 text-semibold">Label</p>
|
|
119
|
+
<code class="text-12 text-monospace">git commit</code>
|
|
120
|
+
<h1 class="text-accent-head text-italic">GitButler</h1>
|
|
121
|
+
```
|
|
73
122
|
|
|
74
123
|
## Available Exports
|
|
75
124
|
|
package/package.json
CHANGED
|
@@ -35,14 +35,6 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"size": {
|
|
38
|
-
"cta": {
|
|
39
|
-
"$type": "dimension",
|
|
40
|
-
"$value": "32px",
|
|
41
|
-
"$description": "",
|
|
42
|
-
"$extensions": {
|
|
43
|
-
"mode": {}
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
38
|
"button": {
|
|
47
39
|
"$type": "dimension",
|
|
48
40
|
"$value": "28px",
|
|
@@ -61,7 +53,7 @@
|
|
|
61
53
|
},
|
|
62
54
|
"tag": {
|
|
63
55
|
"$type": "dimension",
|
|
64
|
-
"$value": "
|
|
56
|
+
"$value": "20px",
|
|
65
57
|
"$description": "",
|
|
66
58
|
"$extensions": {
|
|
67
59
|
"mode": {}
|
|
@@ -98,7 +90,7 @@
|
|
|
98
90
|
"weight": {
|
|
99
91
|
"bold": {
|
|
100
92
|
"$type": "string",
|
|
101
|
-
"$value": "
|
|
93
|
+
"$value": "700",
|
|
102
94
|
"$description": "",
|
|
103
95
|
"$extensions": {
|
|
104
96
|
"mode": {}
|
|
@@ -106,7 +98,7 @@
|
|
|
106
98
|
},
|
|
107
99
|
"regular": {
|
|
108
100
|
"$type": "string",
|
|
109
|
-
"$value": "
|
|
101
|
+
"$value": "460",
|
|
110
102
|
"$description": "",
|
|
111
103
|
"$extensions": {
|
|
112
104
|
"mode": {}
|
|
@@ -114,7 +106,7 @@
|
|
|
114
106
|
},
|
|
115
107
|
"semibold": {
|
|
116
108
|
"$type": "string",
|
|
117
|
-
"$value": "
|
|
109
|
+
"$value": "600",
|
|
118
110
|
"$description": "",
|
|
119
111
|
"$extensions": {
|
|
120
112
|
"mode": {}
|
|
@@ -706,96 +698,6 @@
|
|
|
706
698
|
}
|
|
707
699
|
}
|
|
708
700
|
},
|
|
709
|
-
"opacity": {
|
|
710
|
-
"5": {
|
|
711
|
-
"$type": "string",
|
|
712
|
-
"$value": "5%",
|
|
713
|
-
"$description": "",
|
|
714
|
-
"$extensions": {
|
|
715
|
-
"mode": {}
|
|
716
|
-
}
|
|
717
|
-
},
|
|
718
|
-
"10": {
|
|
719
|
-
"$type": "string",
|
|
720
|
-
"$value": "10%",
|
|
721
|
-
"$description": "",
|
|
722
|
-
"$extensions": {
|
|
723
|
-
"mode": {}
|
|
724
|
-
}
|
|
725
|
-
},
|
|
726
|
-
"20": {
|
|
727
|
-
"$type": "string",
|
|
728
|
-
"$value": "20%",
|
|
729
|
-
"$description": "",
|
|
730
|
-
"$extensions": {
|
|
731
|
-
"mode": {}
|
|
732
|
-
}
|
|
733
|
-
},
|
|
734
|
-
"30": {
|
|
735
|
-
"$type": "string",
|
|
736
|
-
"$value": "30%",
|
|
737
|
-
"$description": "",
|
|
738
|
-
"$extensions": {
|
|
739
|
-
"mode": {}
|
|
740
|
-
}
|
|
741
|
-
},
|
|
742
|
-
"40": {
|
|
743
|
-
"$type": "string",
|
|
744
|
-
"$value": "40%",
|
|
745
|
-
"$description": "",
|
|
746
|
-
"$extensions": {
|
|
747
|
-
"mode": {}
|
|
748
|
-
}
|
|
749
|
-
},
|
|
750
|
-
"50": {
|
|
751
|
-
"$type": "string",
|
|
752
|
-
"$value": "50%",
|
|
753
|
-
"$description": "",
|
|
754
|
-
"$extensions": {
|
|
755
|
-
"mode": {}
|
|
756
|
-
}
|
|
757
|
-
},
|
|
758
|
-
"60": {
|
|
759
|
-
"$type": "string",
|
|
760
|
-
"$value": "60%",
|
|
761
|
-
"$description": "",
|
|
762
|
-
"$extensions": {
|
|
763
|
-
"mode": {}
|
|
764
|
-
}
|
|
765
|
-
},
|
|
766
|
-
"70": {
|
|
767
|
-
"$type": "string",
|
|
768
|
-
"$value": "70%",
|
|
769
|
-
"$description": "",
|
|
770
|
-
"$extensions": {
|
|
771
|
-
"mode": {}
|
|
772
|
-
}
|
|
773
|
-
},
|
|
774
|
-
"80": {
|
|
775
|
-
"$type": "string",
|
|
776
|
-
"$value": "80%",
|
|
777
|
-
"$description": "",
|
|
778
|
-
"$extensions": {
|
|
779
|
-
"mode": {}
|
|
780
|
-
}
|
|
781
|
-
},
|
|
782
|
-
"90": {
|
|
783
|
-
"$type": "string",
|
|
784
|
-
"$value": "90%",
|
|
785
|
-
"$description": "",
|
|
786
|
-
"$extensions": {
|
|
787
|
-
"mode": {}
|
|
788
|
-
}
|
|
789
|
-
},
|
|
790
|
-
"95": {
|
|
791
|
-
"$type": "string",
|
|
792
|
-
"$value": "95%",
|
|
793
|
-
"$description": "",
|
|
794
|
-
"$extensions": {
|
|
795
|
-
"mode": {}
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
},
|
|
799
701
|
"$extensions": {
|
|
800
702
|
"tokens-bruecke-meta": {
|
|
801
703
|
"useDTCGKeys": true,
|
|
@@ -804,7 +706,7 @@
|
|
|
804
706
|
"core",
|
|
805
707
|
"semantic"
|
|
806
708
|
],
|
|
807
|
-
"createdAt": "2026-05-
|
|
709
|
+
"createdAt": "2026-05-21T21:36:55.161Z"
|
|
808
710
|
}
|
|
809
711
|
}
|
|
810
712
|
}
|
|
@@ -47,67 +47,6 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
-
"art": {
|
|
51
|
-
"spot": {
|
|
52
|
-
"fill-pop": {
|
|
53
|
-
"$type": "color",
|
|
54
|
-
"$value": "{core.clr.pop.70}",
|
|
55
|
-
"$description": "",
|
|
56
|
-
"$extensions": {
|
|
57
|
-
"mode": {
|
|
58
|
-
"light": "{core.clr.pop.70}",
|
|
59
|
-
"dark": "{core.clr.pop.30}"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
"fill": {
|
|
64
|
-
"$type": "color",
|
|
65
|
-
"$value": "{core.clr.gray.70}",
|
|
66
|
-
"$description": "",
|
|
67
|
-
"$extensions": {
|
|
68
|
-
"mode": {
|
|
69
|
-
"light": "{core.clr.gray.70}",
|
|
70
|
-
"dark": "{core.clr.gray.40}"
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
"scene": {
|
|
76
|
-
"bg": {
|
|
77
|
-
"$type": "color",
|
|
78
|
-
"$value": "#d6f0ee",
|
|
79
|
-
"$description": "",
|
|
80
|
-
"$extensions": {
|
|
81
|
-
"mode": {
|
|
82
|
-
"light": "#d6f0ee",
|
|
83
|
-
"dark": "#286764"
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
"outline": {
|
|
88
|
-
"$type": "color",
|
|
89
|
-
"$value": "#475050",
|
|
90
|
-
"$description": "",
|
|
91
|
-
"$extensions": {
|
|
92
|
-
"mode": {
|
|
93
|
-
"light": "#475050",
|
|
94
|
-
"dark": "#142222"
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
"fill": {
|
|
99
|
-
"$type": "color",
|
|
100
|
-
"$value": "#fcfcf1",
|
|
101
|
-
"$description": "",
|
|
102
|
-
"$extensions": {
|
|
103
|
-
"mode": {
|
|
104
|
-
"light": "#fcfcf1",
|
|
105
|
-
"dark": "#d8e3c1"
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
50
|
"tooltip": {
|
|
112
51
|
"bg": {
|
|
113
52
|
"$type": "color",
|
|
@@ -144,17 +83,6 @@
|
|
|
144
83
|
}
|
|
145
84
|
}
|
|
146
85
|
},
|
|
147
|
-
"shadow": {
|
|
148
|
-
"$type": "color",
|
|
149
|
-
"$value": "{core.clr.pop.60}",
|
|
150
|
-
"$description": "",
|
|
151
|
-
"$extensions": {
|
|
152
|
-
"mode": {
|
|
153
|
-
"light": "{core.clr.pop.60}",
|
|
154
|
-
"dark": "{core.clr.pop.30}"
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
86
|
"remote": {
|
|
159
87
|
"$type": "color",
|
|
160
88
|
"$value": "{core.clr.pop.50}",
|
|
@@ -538,30 +466,6 @@
|
|
|
538
466
|
}
|
|
539
467
|
}
|
|
540
468
|
},
|
|
541
|
-
"focus": {
|
|
542
|
-
"ring": {
|
|
543
|
-
"$type": "color",
|
|
544
|
-
"$value": "{core.clr.pop.50}",
|
|
545
|
-
"$description": "",
|
|
546
|
-
"$extensions": {
|
|
547
|
-
"mode": {
|
|
548
|
-
"light": "{core.clr.pop.50}",
|
|
549
|
-
"dark": "{core.clr.pop.40}"
|
|
550
|
-
}
|
|
551
|
-
}
|
|
552
|
-
},
|
|
553
|
-
"ring-mute": {
|
|
554
|
-
"$type": "color",
|
|
555
|
-
"$value": "{core.clr.gray.60}",
|
|
556
|
-
"$description": "",
|
|
557
|
-
"$extensions": {
|
|
558
|
-
"mode": {
|
|
559
|
-
"light": "{core.clr.gray.60}",
|
|
560
|
-
"dark": "{core.clr.gray.40}"
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
},
|
|
565
469
|
"shadow-clr": {
|
|
566
470
|
"$type": "color",
|
|
567
471
|
"$value": "#0000001a",
|
|
@@ -1378,7 +1282,7 @@
|
|
|
1378
1282
|
"core",
|
|
1379
1283
|
"semantic"
|
|
1380
1284
|
],
|
|
1381
|
-
"createdAt": "2026-05-
|
|
1285
|
+
"createdAt": "2026-05-21T21:36:55.161Z"
|
|
1382
1286
|
}
|
|
1383
1287
|
}
|
|
1384
1288
|
}
|
package/tokens/tokens.css
CHANGED
|
@@ -4,11 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
6
|
color-scheme: light dark;
|
|
7
|
-
--art-scene-bg: light-dark(hsl(175 46.4% 89.0%), hsl(177 44.1% 28.0%));
|
|
8
|
-
--art-scene-fill: light-dark(hsl(60 64.7% 96.7%), hsl(79 37.8% 82.4%));
|
|
9
|
-
--art-scene-outline: light-dark(hsl(180 6.0% 29.6%), hsl(180 25.9% 10.6%));
|
|
10
|
-
--art-spot-fill: light-dark(var(--clr-gray-70), var(--clr-gray-40));
|
|
11
|
-
--art-spot-fill-pop: light-dark(var(--clr-pop-70), var(--clr-pop-30));
|
|
12
7
|
--bg-1: light-dark(var(--clr-gray-100), var(--clr-gray-10));
|
|
13
8
|
--bg-2: light-dark(var(--clr-gray-90), var(--clr-gray-5));
|
|
14
9
|
--bg-3: light-dark(var(--clr-gray-80), var(--clr-gray-0));
|
|
@@ -97,7 +92,6 @@
|
|
|
97
92
|
--commit-integrated: light-dark(var(--clr-purple-50), var(--clr-purple-40));
|
|
98
93
|
--commit-local: var(--clr-gray-50);
|
|
99
94
|
--commit-remote: var(--clr-pop-50);
|
|
100
|
-
--commit-shadow: light-dark(var(--clr-pop-60), var(--clr-pop-30));
|
|
101
95
|
--commit-upstream: var(--clr-warn-50);
|
|
102
96
|
--fill-danger-bg: light-dark(var(--clr-danger-50), var(--clr-danger-40));
|
|
103
97
|
--fill-danger-fg: var(--clr-danger-95);
|
|
@@ -111,19 +105,6 @@
|
|
|
111
105
|
--fill-safe-fg: light-dark(var(--clr-safe-95), var(--clr-safe-90));
|
|
112
106
|
--fill-warn-bg: light-dark(var(--clr-warn-50), var(--clr-warn-40));
|
|
113
107
|
--fill-warn-fg: light-dark(var(--clr-warn-95), var(--clr-warn-90));
|
|
114
|
-
--focus-ring: light-dark(var(--clr-pop-50), var(--clr-pop-40));
|
|
115
|
-
--focus-ring-mute: light-dark(var(--clr-gray-60), var(--clr-gray-40));
|
|
116
|
-
--opacity-5: 5%;
|
|
117
|
-
--opacity-10: 10%;
|
|
118
|
-
--opacity-20: 20%;
|
|
119
|
-
--opacity-30: 30%;
|
|
120
|
-
--opacity-40: 40%;
|
|
121
|
-
--opacity-50: 50%;
|
|
122
|
-
--opacity-60: 60%;
|
|
123
|
-
--opacity-70: 70%;
|
|
124
|
-
--opacity-80: 80%;
|
|
125
|
-
--opacity-90: 90%;
|
|
126
|
-
--opacity-95: 95%;
|
|
127
108
|
--radius-l: 0.75rem;
|
|
128
109
|
--radius-m: 0.5rem;
|
|
129
110
|
--radius-ml: 0.625rem;
|
|
@@ -198,9 +179,8 @@
|
|
|
198
179
|
--scale-warn-95: light-dark(var(--clr-warn-95), var(--clr-warn-5));
|
|
199
180
|
--shadow-clr: light-dark(hsl(0 0.0% 0.0% / 0.1), hsl(0 0.0% 0.0% / 0.5));
|
|
200
181
|
--size-button: 1.75rem;
|
|
201
|
-
--size-cta: 2rem;
|
|
202
182
|
--size-icon: 1rem;
|
|
203
|
-
--size-tag: 1.
|
|
183
|
+
--size-tag: 1.25rem;
|
|
204
184
|
--text-1: light-dark(var(--clr-gray-5), var(--clr-gray-95));
|
|
205
185
|
--text-2: light-dark(var(--clr-gray-50), var(--clr-gray-60));
|
|
206
186
|
--text-3: light-dark(var(--clr-gray-60), var(--clr-gray-40));
|
|
@@ -215,9 +195,9 @@
|
|
|
215
195
|
--text-purple: light-dark(var(--clr-purple-40), var(--clr-purple-50));
|
|
216
196
|
--text-safe: light-dark(var(--clr-safe-40), var(--clr-safe-50));
|
|
217
197
|
--text-warn: light-dark(var(--clr-warn-40), var(--clr-warn-50));
|
|
218
|
-
--text-weight-bold:
|
|
219
|
-
--text-weight-regular:
|
|
220
|
-
--text-weight-semibold:
|
|
198
|
+
--text-weight-bold: 700;
|
|
199
|
+
--text-weight-regular: 460;
|
|
200
|
+
--text-weight-semibold: 600;
|
|
221
201
|
--tooltip-bg: light-dark(var(--clr-gray-95), var(--clr-gray-10));
|
|
222
202
|
--tooltip-border: light-dark(var(--clr-gray-80), var(--clr-gray-30));
|
|
223
203
|
/* shadow vars */
|