@gitbutler/design-core 1.3.7 → 1.3.9

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.
Files changed (6) hide show
  1. package/fonts/fonts.css +65 -65
  2. package/package.json +55 -53
  3. package/styles/reset.css +265 -265
  4. package/styles/text.css +67 -67
  5. package/utility/general.css +16 -16
  6. package/utility/helpers.css +130 -112
package/styles/text.css CHANGED
@@ -1,137 +1,137 @@
1
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;
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
5
  }
6
6
 
7
7
  /* text Base Classes */
8
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(--font-default);
9
+ font-weight: var(--text-weight-regular);
10
+ font-size: 0.563rem;
11
+ line-height: var(--text-lineheight-default);
12
+ font-family: var(--font-default);
13
13
  }
14
14
 
15
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(--font-default);
16
+ font-weight: var(--text-weight-regular);
17
+ font-size: 0.625rem;
18
+ line-height: var(--text-lineheight-default);
19
+ font-family: var(--font-default);
20
20
  }
21
21
 
22
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(--font-default);
23
+ font-weight: var(--text-weight-regular);
24
+ font-size: 0.6875rem;
25
+ line-height: var(--text-lineheight-default);
26
+ font-family: var(--font-default);
27
27
  }
28
28
 
29
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(--font-default);
30
+ font-weight: var(--text-weight-regular);
31
+ font-size: 0.75rem;
32
+ line-height: var(--text-lineheight-default);
33
+ font-family: var(--font-default);
34
34
  }
35
35
 
36
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(--font-default);
37
+ font-weight: var(--text-weight-regular);
38
+ font-size: 0.8125rem;
39
+ line-height: var(--text-lineheight-default);
40
+ font-family: var(--font-default);
41
41
  }
42
42
 
43
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(--font-default);
44
+ font-weight: var(--text-weight-regular);
45
+ font-size: 0.875rem;
46
+ line-height: var(--text-lineheight-default);
47
+ font-family: var(--font-default);
48
48
  }
49
49
 
50
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(--font-default);
51
+ font-weight: var(--text-weight-regular);
52
+ font-size: 0.938rem;
53
+ line-height: var(--text-lineheight-default);
54
+ font-family: var(--font-default);
55
55
  }
56
56
 
57
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(--font-default);
58
+ font-weight: var(--text-weight-regular);
59
+ font-size: 1rem;
60
+ line-height: var(--text-lineheight-default);
61
+ font-family: var(--font-default);
62
62
  }
63
63
 
64
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(--font-default);
65
+ font-weight: var(--text-weight-regular);
66
+ font-size: 1.125rem;
67
+ line-height: var(--text-lineheight-default);
68
+ font-family: var(--font-default);
69
69
  }
70
70
 
71
71
  /* text Head Classes */
72
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(--font-default);
73
+ font-weight: var(--text-weight-bold);
74
+ font-size: 1.25rem;
75
+ line-height: var(--text-lineheight-default);
76
+ font-family: var(--font-default);
77
77
  }
78
78
 
79
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(--font-default);
80
+ font-weight: var(--text-weight-bold);
81
+ font-size: 1.375rem;
82
+ line-height: var(--text-lineheight-default);
83
+ font-family: var(--font-default);
84
84
  }
85
85
 
86
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(--font-default);
87
+ font-weight: var(--text-weight-bold);
88
+ font-size: 1.5rem;
89
+ line-height: var(--text-lineheight-default);
90
+ font-family: var(--font-default);
91
91
  }
92
92
 
93
93
  /* Serif Classes */
94
94
  .text-serif-42 {
95
- font-weight: 400;
96
- font-size: 2.625rem;
97
- line-height: var(--text-lineheight-accent);
98
- font-family: var(--font-accent);
95
+ font-weight: 400;
96
+ font-size: 2.625rem;
97
+ line-height: var(--text-lineheight-accent);
98
+ font-family: var(--font-accent);
99
99
  }
100
100
 
101
101
  .text-serif-32 {
102
- font-weight: 400;
103
- font-size: 2rem;
104
- line-height: var(--text-lineheight-accent);
105
- font-family: var(--font-accent);
102
+ font-weight: 400;
103
+ font-size: 2rem;
104
+ line-height: var(--text-lineheight-accent);
105
+ font-family: var(--font-accent);
106
106
  }
107
107
 
108
108
  /* MODIFIERS */
109
109
 
110
110
  .text-body {
111
- line-height: var(--text-lineheight-body);
111
+ line-height: var(--text-lineheight-body);
112
112
  }
113
113
 
114
114
  .text-semibold {
115
- font-weight: var(--text-weight-semibold);
115
+ font-weight: var(--text-weight-semibold);
116
116
  }
117
117
 
118
118
  .text-bold {
119
- font-weight: var(--text-weight-bold);
119
+ font-weight: var(--text-weight-bold);
120
120
  }
121
121
 
122
122
  .text-monospace {
123
- font-family: var(--fontfamily-mono);
123
+ font-family: var(--fontfamily-mono);
124
124
  }
125
125
 
126
126
  .text-balance {
127
- text-wrap: balance;
127
+ text-wrap: balance;
128
128
  }
129
129
 
130
130
  .text-pre {
131
- white-space: pre-wrap;
132
- word-break: break-word;
131
+ white-space: pre-wrap;
132
+ word-break: break-word;
133
133
  }
134
134
 
135
135
  .text-italic {
136
- font-style: italic;
136
+ font-style: italic;
137
137
  }
package/utility/general.css CHANGED
@@ -1,55 +1,55 @@
1
1
  /* Border radius */
2
2
  .radius-s {
3
- border-radius: var(--radius-s);
3
+ border-radius: var(--radius-s);
4
4
  }
5
5
  .radius-m {
6
- border-radius: var(--radius-m);
6
+ border-radius: var(--radius-m);
7
7
  }
8
8
  .radius-ml {
9
- border-radius: var(--radius-ml);
9
+ border-radius: var(--radius-ml);
10
10
  }
11
11
  .radius-l {
12
- border-radius: var(--radius-l);
12
+ border-radius: var(--radius-l);
13
13
  }
14
14
 
15
15
  /* Background colors */
16
16
  .clr-bg-1 {
17
- background-color: var(--clr-bg-1);
17
+ background-color: var(--clr-bg-1);
18
18
  }
19
19
  .clr-bg-1-muted {
20
- background-color: var(--clr-bg-1-muted);
20
+ background-color: var(--clr-bg-1-muted);
21
21
  }
22
22
  .clr-bg-2 {
23
- background-color: var(--clr-bg-2);
23
+ background-color: var(--clr-bg-2);
24
24
  }
25
25
  .clr-bg-2-muted {
26
- background-color: var(--clr-bg-2-muted);
26
+ background-color: var(--clr-bg-2-muted);
27
27
  }
28
28
  .clr-bg-3 {
29
- background-color: var(--clr-bg-3);
29
+ background-color: var(--clr-bg-3);
30
30
  }
31
31
  .clr-bg-3-muted {
32
- background-color: var(--clr-bg-3-muted);
32
+ background-color: var(--clr-bg-3-muted);
33
33
  }
34
34
 
35
35
  /* Borders */
36
36
  .clr-border-1 {
37
- border: 1px solid var(--clr-border-1);
37
+ border: 1px solid var(--clr-border-1);
38
38
  }
39
39
  .clr-border-2 {
40
- border: 1px solid var(--clr-border-2);
40
+ border: 1px solid var(--clr-border-2);
41
41
  }
42
42
  .clr-border-3 {
43
- border: 1px solid var(--clr-border-3);
43
+ border: 1px solid var(--clr-border-3);
44
44
  }
45
45
 
46
46
  /* Text colors */
47
47
  .clr-text-1 {
48
- color: var(--clr-text-1);
48
+ color: var(--clr-text-1);
49
49
  }
50
50
  .clr-text-2 {
51
- color: var(--clr-text-2);
51
+ color: var(--clr-text-2);
52
52
  }
53
53
  .clr-text-3 {
54
- color: var(--clr-text-3);
54
+ color: var(--clr-text-3);
55
55
  }
package/utility/helpers.css CHANGED
@@ -1,195 +1,213 @@
1
1
  /* scrollbar helpers */
2
2
  .hide-native-scrollbar {
3
- -ms-overflow-style: none;
4
- scrollbar-width: none;
3
+ -ms-overflow-style: none;
4
+ scrollbar-width: none;
5
5
 
6
- &::-webkit-scrollbar {
7
- display: none;
8
- }
6
+ &::-webkit-scrollbar {
7
+ display: none;
8
+ }
9
9
  }
10
10
 
11
11
  /* custom scrollbar */
12
12
  .scrollbar,
13
13
  pre {
14
- &::-webkit-scrollbar {
15
- width: 14px;
16
- background-color: transaparent;
17
- }
14
+ &::-webkit-scrollbar {
15
+ width: 14px;
16
+ background-color: transaparent;
17
+ }
18
18
 
19
- &::-webkit-scrollbar-track {
20
- background-color: transaparent;
21
- }
19
+ &::-webkit-scrollbar-track {
20
+ background-color: transaparent;
21
+ }
22
22
 
23
- &::-webkit-scrollbar-thumb {
24
- border: 4px solid rgba(0, 0, 0, 0);
25
- border-radius: 12px;
26
- background-clip: padding-box;
27
- background-color: var(--clr-border-1);
28
- opacity: 0.3;
29
- }
23
+ &::-webkit-scrollbar-thumb {
24
+ border: 4px solid rgba(0, 0, 0, 0);
25
+ border-radius: 12px;
26
+ background-clip: padding-box;
27
+ background-color: var(--clr-border-1);
28
+ opacity: 0.3;
29
+ }
30
30
 
31
- &::-webkit-scrollbar-thumb:hover {
32
- opacity: 0.8;
33
- }
31
+ &::-webkit-scrollbar-thumb:hover {
32
+ opacity: 0.8;
33
+ }
34
34
 
35
- &::-webkit-scrollbar-button {
36
- display: none;
37
- }
35
+ &::-webkit-scrollbar-button {
36
+ display: none;
37
+ }
38
38
 
39
- &::-webkit-scrollbar-corner {
40
- background-color: transparent;
41
- }
39
+ &::-webkit-scrollbar-corner {
40
+ background-color: transparent;
41
+ }
42
42
  }
43
43
 
44
44
  .stack-v {
45
- display: flex;
46
- flex-direction: column;
45
+ display: flex;
46
+ flex-direction: column;
47
47
  }
48
48
 
49
49
  .stack-h {
50
- display: flex;
51
- flex-direction: row;
50
+ display: flex;
51
+ flex-direction: row;
52
52
  }
53
53
 
54
54
  .truncate {
55
- overflow: hidden;
56
- text-overflow: ellipsis;
57
- white-space: nowrap;
55
+ overflow: hidden;
56
+ text-overflow: ellipsis;
57
+ white-space: nowrap;
58
58
  }
59
59
 
60
60
  .no-select {
61
- cursor: default;
62
- user-select: none;
61
+ cursor: default;
62
+ user-select: none;
63
63
  }
64
64
 
65
65
  .hide-when-empty {
66
- &:empty {
67
- display: none;
68
- }
66
+ &:empty {
67
+ display: none;
68
+ }
69
69
  }
70
70
 
71
71
  .no-pointer-events {
72
- pointer-events: none;
72
+ pointer-events: none;
73
73
  }
74
74
 
75
75
  .pointer-events {
76
- pointer-events: auto;
76
+ pointer-events: auto;
77
77
  }
78
78
 
79
79
  .underline {
80
- text-decoration: underline;
80
+ text-decoration: underline;
81
81
  }
82
82
 
83
83
  .underline-dotted {
84
- text-decoration: underline dotted;
84
+ text-decoration: underline dotted;
85
85
  }
86
86
 
87
87
  .underline,
88
88
  .underline-dotted {
89
- text-underline-offset: 3px;
89
+ text-underline-offset: 3px;
90
90
  }
91
91
 
92
92
  .capitalize {
93
- display: inline-block;
93
+ text-transform: capitalize;
94
94
  }
95
+
95
96
  .capitalize:first-letter {
96
- text-transform: capitalize;
97
+ text-transform: capitalize;
98
+ }
99
+
100
+ /* TEXT LINKS */
101
+
102
+ .link-hover-2,
103
+ .link-hover-3 {
104
+ cursor: pointer;
105
+ transition: color var(--transition-fast);
106
+ }
107
+
108
+ .link-hover-2 {
109
+ &:hover {
110
+ color: var(--clr-text-1);
111
+ }
112
+ }
113
+
114
+ .link-hover-3 {
115
+ &:hover {
116
+ color: var(--clr-text-2);
117
+ }
97
118
  }
98
119
 
99
120
  /* OPACITY */
100
121
  .op-10 {
101
- opacity: 0.1;
122
+ opacity: 0.1;
102
123
  }
103
124
  .op-20 {
104
- opacity: 0.2;
125
+ opacity: 0.2;
105
126
  }
106
127
  .op-30 {
107
- opacity: 0.3;
128
+ opacity: 0.3;
108
129
  }
109
130
  .op-40 {
110
- opacity: 0.4;
131
+ opacity: 0.4;
111
132
  }
112
133
  .op-50 {
113
- opacity: 0.5;
134
+ opacity: 0.5;
114
135
  }
115
136
  .op-60 {
116
- opacity: 0.6;
137
+ opacity: 0.6;
117
138
  }
118
139
  .op-70 {
119
- opacity: 0.7;
140
+ opacity: 0.7;
120
141
  }
121
142
  .op-80 {
122
- opacity: 0.8;
143
+ opacity: 0.8;
123
144
  }
124
145
  .op-90 {
125
- opacity: 0.9;
146
+ opacity: 0.9;
126
147
  }
127
148
 
128
149
  /* ANIMATION */
129
-
130
150
  .wiggle-animation {
131
- animation: wiggle-animation 0.35s forwards;
151
+ animation: wiggle-animation 0.35s forwards;
132
152
  }
133
153
 
134
154
  @keyframes wiggle-animation {
135
- 0% {
136
- transform: translateX(-3px);
137
- }
138
- 25% {
139
- transform: translateX(3px);
140
- }
141
- 50% {
142
- transform: translateX(-2px);
143
- }
144
- 75% {
145
- transform: translateX(2px);
146
- }
147
- 100% {
148
- transform: translateX(0);
149
- }
155
+ 0% {
156
+ transform: translateX(-3px);
157
+ }
158
+ 25% {
159
+ transform: translateX(3px);
160
+ }
161
+ 50% {
162
+ transform: translateX(-2px);
163
+ }
164
+ 75% {
165
+ transform: translateX(2px);
166
+ }
167
+ 100% {
168
+ transform: translateX(0);
169
+ }
150
170
  }
151
171
 
152
172
  .highlight-animation {
153
- animation: highlight-animation 0.5s forwards;
173
+ animation: highlight-animation 0.5s forwards;
154
174
  }
155
175
 
156
176
  @keyframes highlight-animation {
157
- 0% {
158
- transform: translate(0, 0) rotate(0deg);
159
- box-shadow: 0 0 0 0
160
- color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
161
- }
162
- 12.5% {
163
- transform: translate(-1px, -1px) rotate(-0.5deg);
164
- box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
165
- }
166
- 25% {
167
- transform: translate(1px, 0px) rotate(0.5deg);
168
- box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
169
- }
170
- 37.5% {
171
- transform: translate(-1px, 1px) rotate(-0.3deg);
172
- box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
173
- }
174
- 50% {
175
- transform: translate(1px, -1px) rotate(0.3deg);
176
- box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
177
- }
178
- 62.5% {
179
- transform: translate(-1px, 0px) rotate(-0.2deg);
180
- box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
181
- }
182
- 75% {
183
- transform: translate(1px, 1px) rotate(0.2deg);
184
- box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
185
- }
186
- 87.5% {
187
- transform: translate(0px, -1px) rotate(-0.1deg);
188
- box-shadow: 0 0 0 0.5px var(--clr-theme-pop-element);
189
- }
190
- 100% {
191
- transform: translate(0, 0) rotate(0deg);
192
- box-shadow: 0 0 0 0
193
- color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
194
- }
177
+ 0% {
178
+ transform: translate(0, 0) rotate(0deg);
179
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
180
+ }
181
+ 12.5% {
182
+ transform: translate(-1px, -1px) rotate(-0.5deg);
183
+ box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
184
+ }
185
+ 25% {
186
+ transform: translate(1px, 0px) rotate(0.5deg);
187
+ box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
188
+ }
189
+ 37.5% {
190
+ transform: translate(-1px, 1px) rotate(-0.3deg);
191
+ box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
192
+ }
193
+ 50% {
194
+ transform: translate(1px, -1px) rotate(0.3deg);
195
+ box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
196
+ }
197
+ 62.5% {
198
+ transform: translate(-1px, 0px) rotate(-0.2deg);
199
+ box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
200
+ }
201
+ 75% {
202
+ transform: translate(1px, 1px) rotate(0.2deg);
203
+ box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
204
+ }
205
+ 87.5% {
206
+ transform: translate(0px, -1px) rotate(-0.1deg);
207
+ box-shadow: 0 0 0 0.5px var(--clr-theme-pop-element);
208
+ }
209
+ 100% {
210
+ transform: translate(0, 0) rotate(0deg);
211
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
212
+ }
195
213
  }