@gitbutler/design-core 3.2.1 → 3.4.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 +34 -97
- package/tokens/tokens.css +7 -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-23T16:06:37.702Z"
|
|
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}",
|
|
@@ -424,6 +352,39 @@
|
|
|
424
352
|
"dark": "{core.clr.warn.50}"
|
|
425
353
|
}
|
|
426
354
|
}
|
|
355
|
+
},
|
|
356
|
+
"1-invert": {
|
|
357
|
+
"$type": "color",
|
|
358
|
+
"$value": "{core.clr.gray.95}",
|
|
359
|
+
"$description": "",
|
|
360
|
+
"$extensions": {
|
|
361
|
+
"mode": {
|
|
362
|
+
"light": "{core.clr.gray.95}",
|
|
363
|
+
"dark": "{core.clr.gray.5}"
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"2-invert": {
|
|
368
|
+
"$type": "color",
|
|
369
|
+
"$value": "{core.clr.gray.60}",
|
|
370
|
+
"$description": "",
|
|
371
|
+
"$extensions": {
|
|
372
|
+
"mode": {
|
|
373
|
+
"light": "{core.clr.gray.60}",
|
|
374
|
+
"dark": "{core.clr.gray.50}"
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
"3-invert": {
|
|
379
|
+
"$type": "color",
|
|
380
|
+
"$value": "{core.clr.gray.40}",
|
|
381
|
+
"$description": "",
|
|
382
|
+
"$extensions": {
|
|
383
|
+
"mode": {
|
|
384
|
+
"light": "{core.clr.gray.40}",
|
|
385
|
+
"dark": "{core.clr.gray.60}"
|
|
386
|
+
}
|
|
387
|
+
}
|
|
427
388
|
}
|
|
428
389
|
},
|
|
429
390
|
"bg": {
|
|
@@ -538,30 +499,6 @@
|
|
|
538
499
|
}
|
|
539
500
|
}
|
|
540
501
|
},
|
|
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
502
|
"shadow-clr": {
|
|
566
503
|
"$type": "color",
|
|
567
504
|
"$value": "#0000001a",
|
|
@@ -1378,7 +1315,7 @@
|
|
|
1378
1315
|
"core",
|
|
1379
1316
|
"semantic"
|
|
1380
1317
|
],
|
|
1381
|
-
"createdAt": "2026-05-
|
|
1318
|
+
"createdAt": "2026-05-23T16:06:37.702Z"
|
|
1382
1319
|
}
|
|
1383
1320
|
}
|
|
1384
1321
|
}
|
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,12 +179,14 @@
|
|
|
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));
|
|
185
|
+
--text-1-invert: light-dark(var(--clr-gray-95), var(--clr-gray-5));
|
|
205
186
|
--text-2: light-dark(var(--clr-gray-50), var(--clr-gray-60));
|
|
187
|
+
--text-2-invert: light-dark(var(--clr-gray-60), var(--clr-gray-50));
|
|
206
188
|
--text-3: light-dark(var(--clr-gray-60), var(--clr-gray-40));
|
|
189
|
+
--text-3-invert: light-dark(var(--clr-gray-40), var(--clr-gray-60));
|
|
207
190
|
--text-danger: var(--clr-danger-50);
|
|
208
191
|
--text-fontfamily-accent: But Head;
|
|
209
192
|
--text-fontfamily-base: Inter;
|
|
@@ -215,9 +198,9 @@
|
|
|
215
198
|
--text-purple: light-dark(var(--clr-purple-40), var(--clr-purple-50));
|
|
216
199
|
--text-safe: light-dark(var(--clr-safe-40), var(--clr-safe-50));
|
|
217
200
|
--text-warn: light-dark(var(--clr-warn-40), var(--clr-warn-50));
|
|
218
|
-
--text-weight-bold:
|
|
219
|
-
--text-weight-regular:
|
|
220
|
-
--text-weight-semibold:
|
|
201
|
+
--text-weight-bold: 700;
|
|
202
|
+
--text-weight-regular: 460;
|
|
203
|
+
--text-weight-semibold: 600;
|
|
221
204
|
--tooltip-bg: light-dark(var(--clr-gray-95), var(--clr-gray-10));
|
|
222
205
|
--tooltip-border: light-dark(var(--clr-gray-80), var(--clr-gray-30));
|
|
223
206
|
/* shadow vars */
|