@gitbutler/design-core 1.0.3 → 1.1.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 +32 -8
- package/core.css +23 -0
- package/package.json +9 -2
- package/styles/base.css +36 -0
- package/styles/reset.css +244 -0
- package/styles/text.css +137 -0
package/README.md
CHANGED
|
@@ -15,13 +15,13 @@ npm install @gitbutler/design-core
|
|
|
15
15
|
Import the design tokens CSS file:
|
|
16
16
|
|
|
17
17
|
```css
|
|
18
|
-
@import
|
|
18
|
+
@import "@gitbutler/design-core/tokens";
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
Or in JavaScript/TypeScript:
|
|
22
22
|
|
|
23
23
|
```javascript
|
|
24
|
-
import
|
|
24
|
+
import "@gitbutler/design-core/tokens";
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
This provides CSS custom properties for colors, spacing, typography, and other design tokens with automatic light/dark mode support.
|
|
@@ -31,7 +31,7 @@ This provides CSS custom properties for colors, spacing, typography, and other d
|
|
|
31
31
|
Import the raw design tokens data:
|
|
32
32
|
|
|
33
33
|
```javascript
|
|
34
|
-
import tokens from
|
|
34
|
+
import tokens from "@gitbutler/design-core/tokens.json";
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
### Fonts
|
|
@@ -39,16 +39,35 @@ import tokens from '@gitbutler/design-core/tokens.json';
|
|
|
39
39
|
Import all fonts:
|
|
40
40
|
|
|
41
41
|
```css
|
|
42
|
-
@import
|
|
42
|
+
@import "@gitbutler/design-core/fonts";
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
Or import individual font families:
|
|
46
46
|
|
|
47
47
|
```css
|
|
48
|
-
@import
|
|
49
|
-
@import
|
|
50
|
-
@import
|
|
51
|
-
@import
|
|
48
|
+
@import "@gitbutler/design-core/fonts/inter/Inter-Regular.woff2";
|
|
49
|
+
@import "@gitbutler/design-core/fonts/geist-mono/GeistMono-Regular.woff2";
|
|
50
|
+
@import "@gitbutler/design-core/fonts/but-head/But-Head-Regular.woff2";
|
|
51
|
+
@import "@gitbutler/design-core/fonts/pp-editorial/PPEditorialNew-Regular.woff2";
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Core Styles
|
|
55
|
+
|
|
56
|
+
Import the core CSS styles:
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
@import "@gitbutler/design-core/core";
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Style Utilities
|
|
63
|
+
|
|
64
|
+
Import individual style utilities:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
@import "@gitbutler/design-core/styles"; /* Base styles */
|
|
68
|
+
@import "@gitbutler/design-core/styles/base"; /* Base styles */
|
|
69
|
+
@import "@gitbutler/design-core/styles/reset"; /* CSS reset */
|
|
70
|
+
@import "@gitbutler/design-core/styles/text"; /* Text utilities */
|
|
52
71
|
```
|
|
53
72
|
|
|
54
73
|
## Available Exports
|
|
@@ -57,6 +76,11 @@ Or import individual font families:
|
|
|
57
76
|
- `@gitbutler/design-core/tokens.json` - Design tokens as JSON
|
|
58
77
|
- `@gitbutler/design-core/fonts` - All font CSS declarations
|
|
59
78
|
- `@gitbutler/design-core/fonts/*` - Individual font files
|
|
79
|
+
- `@gitbutler/design-core/core` - Core CSS styles
|
|
80
|
+
- `@gitbutler/design-core/styles` - Base style utilities
|
|
81
|
+
- `@gitbutler/design-core/styles/base` - Base styles
|
|
82
|
+
- `@gitbutler/design-core/styles/reset` - CSS reset
|
|
83
|
+
- `@gitbutler/design-core/styles/text` - Text utilities
|
|
60
84
|
|
|
61
85
|
## Included Fonts
|
|
62
86
|
|
package/core.css
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GitButler Design Core - Single Import
|
|
3
|
+
*
|
|
4
|
+
* This file provides a convenient single import for both fonts and design tokens.
|
|
5
|
+
*
|
|
6
|
+
* USAGE:
|
|
7
|
+
* Import this file: @import '@gitbutler/design-core/core';
|
|
8
|
+
* Or in JS: import '@gitbutler/design-core/core';
|
|
9
|
+
*
|
|
10
|
+
* INCLUDES:
|
|
11
|
+
* - All font definitions (fonts/fonts.css)
|
|
12
|
+
* - All design tokens (tokens/tokens.css)
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* reset */
|
|
16
|
+
@import "./styles/reset.css";
|
|
17
|
+
/* Import design tokens */
|
|
18
|
+
@import "./tokens/tokens.css";
|
|
19
|
+
/* Import font definitions */
|
|
20
|
+
@import "./fonts/fonts.css";
|
|
21
|
+
/* Base styles */
|
|
22
|
+
@import "./styles/base.css";
|
|
23
|
+
@import "./styles/text.css";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitbutler/design-core",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Design tokens for GitButler applications",
|
|
6
6
|
"keywords": [
|
|
@@ -19,7 +19,12 @@
|
|
|
19
19
|
"./tokens": "./tokens/tokens.css",
|
|
20
20
|
"./tokens.json": "./tokens/tokens.json",
|
|
21
21
|
"./fonts": "./fonts/fonts.css",
|
|
22
|
-
"./fonts/*": "./fonts/*"
|
|
22
|
+
"./fonts/*": "./fonts/*",
|
|
23
|
+
"./core": "./core.css",
|
|
24
|
+
"./styles": "./styles/base.css",
|
|
25
|
+
"./styles/base": "./styles/base.css",
|
|
26
|
+
"./styles/reset": "./styles/reset.css",
|
|
27
|
+
"./styles/text": "./styles/text.css"
|
|
23
28
|
},
|
|
24
29
|
"scripts": {
|
|
25
30
|
"build": "npx tz build",
|
|
@@ -35,6 +40,8 @@
|
|
|
35
40
|
"files": [
|
|
36
41
|
"tokens/",
|
|
37
42
|
"fonts/",
|
|
43
|
+
"styles/",
|
|
44
|
+
"core.css",
|
|
38
45
|
"README.md"
|
|
39
46
|
],
|
|
40
47
|
"publishConfig": {
|
package/styles/base.css
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GitButler Base Styles
|
|
3
|
+
*
|
|
4
|
+
* This file contains foundational CSS styles including resets, basic typography,
|
|
5
|
+
* and common element styling that serves as a base for GitButler applications.
|
|
6
|
+
*
|
|
7
|
+
* USAGE:
|
|
8
|
+
* Import this file: @import '@gitbutler/design-core/base';
|
|
9
|
+
* Or in JS: import '@gitbutler/design-core/base';
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/* CSS Reset and Normalization */
|
|
13
|
+
*,
|
|
14
|
+
*::before,
|
|
15
|
+
*::after {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
html {
|
|
25
|
+
font-size: 16px;
|
|
26
|
+
line-height: 1.5;
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
-moz-osx-font-smoothing: grayscale;
|
|
29
|
+
text-rendering: optimizeLegibility;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
body {
|
|
33
|
+
overflow-x: hidden;
|
|
34
|
+
color: var(--clr-text-1);
|
|
35
|
+
font-family: var;
|
|
36
|
+
}
|
package/styles/reset.css
ADDED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
/* BOILERPLATE CSS */
|
|
2
|
+
/* reset all styles */
|
|
3
|
+
@layer reset {
|
|
4
|
+
/* base */
|
|
5
|
+
*,
|
|
6
|
+
:after,
|
|
7
|
+
:before {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
border: 0 solid;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html {
|
|
13
|
+
overscroll-behavior: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
line-height: inherit;
|
|
20
|
+
line-height: inherit;
|
|
21
|
+
font-family:
|
|
22
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
|
23
|
+
Arial, "Noto Sans", sans-serif;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* elements */
|
|
27
|
+
hr {
|
|
28
|
+
height: 0;
|
|
29
|
+
border-top-width: 1px;
|
|
30
|
+
color: inherit;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
abbr:where([title]) {
|
|
34
|
+
-webkit-text-decoration: underline dotted;
|
|
35
|
+
text-decoration: underline dotted;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h1,
|
|
39
|
+
h2,
|
|
40
|
+
h3,
|
|
41
|
+
h4,
|
|
42
|
+
h5,
|
|
43
|
+
h6 {
|
|
44
|
+
font-weight: inherit;
|
|
45
|
+
font-size: inherit;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
a {
|
|
49
|
+
color: inherit;
|
|
50
|
+
text-decoration: inherit;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
b,
|
|
54
|
+
strong {
|
|
55
|
+
font-weight: bolder;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
code,
|
|
59
|
+
kbd,
|
|
60
|
+
pre,
|
|
61
|
+
samp {
|
|
62
|
+
font-size: 1em;
|
|
63
|
+
font-family:
|
|
64
|
+
Söhne Mono,
|
|
65
|
+
monospace;
|
|
66
|
+
font-variation-settings: normal;
|
|
67
|
+
font-feature-settings: normal;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
small {
|
|
71
|
+
font-size: 80%;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
sub,
|
|
75
|
+
sup {
|
|
76
|
+
position: relative;
|
|
77
|
+
font-size: 75%;
|
|
78
|
+
line-height: 0;
|
|
79
|
+
vertical-align: baseline;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
sub {
|
|
83
|
+
bottom: -0.25em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
sup {
|
|
87
|
+
top: -0.5em;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
table {
|
|
91
|
+
border-color: inherit;
|
|
92
|
+
border-collapse: collapse;
|
|
93
|
+
text-indent: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
button,
|
|
97
|
+
input,
|
|
98
|
+
optgroup,
|
|
99
|
+
select,
|
|
100
|
+
textarea {
|
|
101
|
+
margin: 0;
|
|
102
|
+
padding: 0;
|
|
103
|
+
color: inherit;
|
|
104
|
+
font-weight: inherit;
|
|
105
|
+
font-size: 100%;
|
|
106
|
+
line-height: inherit;
|
|
107
|
+
font-family: inherit;
|
|
108
|
+
font-variation-settings: inherit;
|
|
109
|
+
font-feature-settings: inherit;
|
|
110
|
+
letter-spacing: inherit;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
button,
|
|
114
|
+
select {
|
|
115
|
+
text-transform: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
button,
|
|
119
|
+
input:where([type="button"]),
|
|
120
|
+
input:where([type="reset"]),
|
|
121
|
+
input:where([type="submit"]) {
|
|
122
|
+
-webkit-appearance: button;
|
|
123
|
+
background-image: none;
|
|
124
|
+
background-color: transparent;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
:-moz-focusring {
|
|
128
|
+
outline: auto;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
:-moz-ui-invalid {
|
|
132
|
+
box-shadow: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
progress {
|
|
136
|
+
vertical-align: baseline;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
::-webkit-inner-spin-button,
|
|
140
|
+
::-webkit-outer-spin-button {
|
|
141
|
+
height: auto;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[type="search"] {
|
|
145
|
+
-webkit-appearance: textfield;
|
|
146
|
+
outline-offset: -2px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
::-webkit-search-decoration {
|
|
150
|
+
-webkit-appearance: none;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
::-webkit-file-upload-button {
|
|
154
|
+
-webkit-appearance: button;
|
|
155
|
+
font: inherit;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
summary {
|
|
159
|
+
display: list-item;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
blockquote,
|
|
163
|
+
dd,
|
|
164
|
+
dl,
|
|
165
|
+
figure,
|
|
166
|
+
h1,
|
|
167
|
+
h2,
|
|
168
|
+
h3,
|
|
169
|
+
h4,
|
|
170
|
+
h5,
|
|
171
|
+
h6,
|
|
172
|
+
hr,
|
|
173
|
+
p,
|
|
174
|
+
pre {
|
|
175
|
+
margin: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
fieldset {
|
|
179
|
+
margin: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
fieldset,
|
|
183
|
+
legend {
|
|
184
|
+
padding: 0;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
menu,
|
|
188
|
+
ol,
|
|
189
|
+
ul {
|
|
190
|
+
margin: 0;
|
|
191
|
+
padding: 0;
|
|
192
|
+
list-style: none;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
dialog {
|
|
196
|
+
padding: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
textarea {
|
|
200
|
+
resize: vertical;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
input::-moz-placeholder,
|
|
204
|
+
textarea::-moz-placeholder {
|
|
205
|
+
color: #9ca3af;
|
|
206
|
+
opacity: 1;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
input::placeholder,
|
|
210
|
+
textarea::placeholder {
|
|
211
|
+
color: #9ca3af;
|
|
212
|
+
opacity: 1;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
[role="button"],
|
|
216
|
+
button {
|
|
217
|
+
cursor: pointer;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
:disabled {
|
|
221
|
+
cursor: default;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
audio,
|
|
225
|
+
canvas,
|
|
226
|
+
embed,
|
|
227
|
+
iframe,
|
|
228
|
+
img,
|
|
229
|
+
object,
|
|
230
|
+
video {
|
|
231
|
+
display: block;
|
|
232
|
+
vertical-align: middle;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
img,
|
|
236
|
+
video {
|
|
237
|
+
max-width: 100%;
|
|
238
|
+
height: auto;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
[hidden] {
|
|
242
|
+
display: none;
|
|
243
|
+
}
|
|
244
|
+
}
|
package/styles/text.css
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--font-mono: var(--text-fontfamily-mono), monospace;
|
|
3
|
+
--font-default: var(--text-fontfamily-default), sans-serif;
|
|
4
|
+
--font-accent: var(--text-fontfamily-accent), serif;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* text Base Classes */
|
|
8
|
+
.text-9 {
|
|
9
|
+
font-weight: var(--text-weight-regular);
|
|
10
|
+
font-size: 0.563rem;
|
|
11
|
+
line-height: var(--text-lineheight-default);
|
|
12
|
+
font-family: var(--fontfamily-default);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.text-10 {
|
|
16
|
+
font-weight: var(--text-weight-regular);
|
|
17
|
+
font-size: 0.625rem;
|
|
18
|
+
line-height: var(--text-lineheight-default);
|
|
19
|
+
font-family: var(--fontfamily-default);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.text-11 {
|
|
23
|
+
font-weight: var(--text-weight-regular);
|
|
24
|
+
font-size: 0.6875rem;
|
|
25
|
+
line-height: var(--text-lineheight-default);
|
|
26
|
+
font-family: var(--fontfamily-default);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text-12 {
|
|
30
|
+
font-weight: var(--text-weight-regular);
|
|
31
|
+
font-size: 0.75rem;
|
|
32
|
+
line-height: var(--text-lineheight-default);
|
|
33
|
+
font-family: var(--fontfamily-default);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.text-13 {
|
|
37
|
+
font-weight: var(--text-weight-regular);
|
|
38
|
+
font-size: 0.8125rem;
|
|
39
|
+
line-height: var(--text-lineheight-default);
|
|
40
|
+
font-family: var(--fontfamily-default);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.text-14 {
|
|
44
|
+
font-weight: var(--text-weight-regular);
|
|
45
|
+
font-size: 0.875rem;
|
|
46
|
+
line-height: var(--text-lineheight-default);
|
|
47
|
+
font-family: var(--fontfamily-default);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.text-15 {
|
|
51
|
+
font-weight: var(--text-weight-regular);
|
|
52
|
+
font-size: 0.938rem;
|
|
53
|
+
line-height: var(--text-lineheight-default);
|
|
54
|
+
font-family: var(--fontfamily-default);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.text-16 {
|
|
58
|
+
font-weight: var(--text-weight-regular);
|
|
59
|
+
font-size: 1rem;
|
|
60
|
+
line-height: var(--text-lineheight-default);
|
|
61
|
+
font-family: var(--fontfamily-default);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.text-18 {
|
|
65
|
+
font-weight: var(--text-weight-regular);
|
|
66
|
+
font-size: 1.125rem;
|
|
67
|
+
line-height: var(--text-lineheight-default);
|
|
68
|
+
font-family: var(--fontfamily-default);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* text Head Classes */
|
|
72
|
+
.text-head-20 {
|
|
73
|
+
font-weight: var(--text-weight-bold);
|
|
74
|
+
font-size: 1.25rem;
|
|
75
|
+
line-height: var(--text-lineheight-default);
|
|
76
|
+
font-family: var(--fontfamily-default);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.text-head-22 {
|
|
80
|
+
font-weight: var(--text-weight-bold);
|
|
81
|
+
font-size: 1.375rem;
|
|
82
|
+
line-height: var(--text-lineheight-default);
|
|
83
|
+
font-family: var(--fontfamily-default);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.text-head-24 {
|
|
87
|
+
font-weight: var(--text-weight-bold);
|
|
88
|
+
font-size: 1.5rem;
|
|
89
|
+
line-height: var(--text-lineheight-default);
|
|
90
|
+
font-family: var(--fontfamily-default);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Serif Classes */
|
|
94
|
+
.text-serif-42 {
|
|
95
|
+
font-weight: 400;
|
|
96
|
+
font-size: 2.625rem;
|
|
97
|
+
line-height: var(--text-lineheight-accent);
|
|
98
|
+
font-family: var(--fontfamily-accent);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.text-serif-32 {
|
|
102
|
+
font-weight: 400;
|
|
103
|
+
font-size: 2rem;
|
|
104
|
+
line-height: var(--text-lineheight-accent);
|
|
105
|
+
font-family: var(--fontfamily-accent);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* MODIFIERS */
|
|
109
|
+
|
|
110
|
+
.text-body {
|
|
111
|
+
line-height: var(--text-lineheight-body);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.text-semibold {
|
|
115
|
+
font-weight: var(--text-weight-semibold);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.text-bold {
|
|
119
|
+
font-weight: var(--text-weight-bold);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.text-monospace {
|
|
123
|
+
font-family: var(--fontfamily-mono);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.text-balance {
|
|
127
|
+
text-wrap: balance;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.text-pre {
|
|
131
|
+
white-space: pre-wrap;
|
|
132
|
+
word-break: break-word;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.text-italic {
|
|
136
|
+
font-style: italic;
|
|
137
|
+
}
|