@gitbutler/design-core 2.2.1 → 2.2.2

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 (5) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/styles/reset.css +1 -1
  4. package/utility/general.css +9 -19
  5. package/utility/helpers.css +13 -13
package/README.md CHANGED
@@ -88,7 +88,7 @@ Or import individual utility class files:
88
88
  - Border radius (`.radius-s`, `.radius-m`, `.radius-ml`, `.radius-l`)
89
89
  - Background colors (`.clr-bg-1`, `.clr-bg-2`, `.clr-bg-3` and their muted variants)
90
90
  - Borders (`.clr-border-1`, `.clr-border-2`, `.clr-border-3`)
91
- - Text colors (`.clr-text-1`, `.clr-text-2`, `.clr-text-3`)
91
+ - Text colors (`.text-1`, `.text-2`, `.text-3`)
92
92
 
93
93
  **Helper utilities** include:
94
94
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitbutler/design-core",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "type": "module",
5
5
  "description": "Design tokens for GitButler applications",
6
6
  "keywords": [
package/styles/reset.css CHANGED
@@ -23,7 +23,7 @@
23
23
  padding: 0;
24
24
  margin: 0;
25
25
  overflow-x: hidden;
26
- color: var(--clr-text-1);
26
+ color: var(--text-1);
27
27
  font-family: var(--font-default);
28
28
  }
29
29
 
package/utility/general.css CHANGED
@@ -14,42 +14,32 @@
14
14
 
15
15
  /* Background colors */
16
16
  .clr-bg-1 {
17
- background-color: var(--clr-bg-1);
18
- }
19
- .clr-bg-1-muted {
20
- background-color: var(--clr-bg-1-muted);
17
+ background-color: var(--bg-1);
21
18
  }
22
19
  .clr-bg-2 {
23
- background-color: var(--clr-bg-2);
24
- }
25
- .clr-bg-2-muted {
26
- background-color: var(--clr-bg-2-muted);
20
+ background-color: var(--bg-2);
27
21
  }
28
22
  .clr-bg-3 {
29
- background-color: var(--clr-bg-3);
23
+ background-color: var(--bg-3);
30
24
  }
31
- .clr-bg-3-muted {
32
- background-color: var(--clr-bg-3-muted);
33
- }
34
-
35
25
  /* Borders */
36
26
  .clr-border-1 {
37
- border: 1px solid var(--clr-border-1);
27
+ border: 1px solid var(--border-1);
38
28
  }
39
29
  .clr-border-2 {
40
- border: 1px solid var(--clr-border-2);
30
+ border: 1px solid var(--border-2);
41
31
  }
42
32
  .clr-border-3 {
43
- border: 1px solid var(--clr-border-3);
33
+ border: 1px solid var(--border-3);
44
34
  }
45
35
 
46
36
  /* Text colors */
47
37
  .clr-text-1 {
48
- color: var(--clr-text-1);
38
+ color: var(--text-1);
49
39
  }
50
40
  .clr-text-2 {
51
- color: var(--clr-text-2);
41
+ color: var(--text-2);
52
42
  }
53
43
  .clr-text-3 {
54
- color: var(--clr-text-3);
44
+ color: var(--text-3);
55
45
  }
package/utility/helpers.css CHANGED
@@ -25,7 +25,7 @@ pre {
25
25
  border: 4px solid rgba(0, 0, 0, 0);
26
26
  border-radius: 12px;
27
27
  background-clip: padding-box;
28
- background-color: var(--clr-border-1);
28
+ background-color: var(--border-1);
29
29
  opacity: 0.3;
30
30
  }
31
31
 
@@ -104,18 +104,18 @@ pre {
104
104
  .link-hover-2,
105
105
  .link-hover-3 {
106
106
  cursor: pointer;
107
- transition: color var(--transition-fast);
107
+ transition: color 0.05s ease;
108
108
  }
109
109
 
110
110
  .link-hover-2 {
111
111
  &:hover {
112
- color: var(--clr-text-1);
112
+ color: var(--text-1);
113
113
  }
114
114
  }
115
115
 
116
116
  .link-hover-3 {
117
117
  &:hover {
118
- color: var(--clr-text-2);
118
+ color: var(--text-2);
119
119
  }
120
120
  }
121
121
 
@@ -178,38 +178,38 @@ pre {
178
178
  @keyframes highlight-animation {
179
179
  0% {
180
180
  transform: translate(0, 0) rotate(0deg);
181
- box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
181
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--fill-pop-bg), transparent, 0.5);
182
182
  }
183
183
  12.5% {
184
184
  transform: translate(-1px, -1px) rotate(-0.5deg);
185
- box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
185
+ box-shadow: 0 0 0 1px var(--fill-pop-bg);
186
186
  }
187
187
  25% {
188
188
  transform: translate(1px, 0px) rotate(0.5deg);
189
- box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
189
+ box-shadow: 0 0 0 1.5px var(--fill-pop-bg);
190
190
  }
191
191
  37.5% {
192
192
  transform: translate(-1px, 1px) rotate(-0.3deg);
193
- box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
193
+ box-shadow: 0 0 0 2px var(--fill-pop-bg);
194
194
  }
195
195
  50% {
196
196
  transform: translate(1px, -1px) rotate(0.3deg);
197
- box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
197
+ box-shadow: 0 0 0 2px var(--fill-pop-bg);
198
198
  }
199
199
  62.5% {
200
200
  transform: translate(-1px, 0px) rotate(-0.2deg);
201
- box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
201
+ box-shadow: 0 0 0 1.5px var(--fill-pop-bg);
202
202
  }
203
203
  75% {
204
204
  transform: translate(1px, 1px) rotate(0.2deg);
205
- box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
205
+ box-shadow: 0 0 0 1px var(--fill-pop-bg);
206
206
  }
207
207
  87.5% {
208
208
  transform: translate(0px, -1px) rotate(-0.1deg);
209
- box-shadow: 0 0 0 0.5px var(--clr-theme-pop-element);
209
+ box-shadow: 0 0 0 0.5px var(--fill-pop-bg);
210
210
  }
211
211
  100% {
212
212
  transform: translate(0, 0) rotate(0deg);
213
- box-shadow: 0 0 0 0 color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
213
+ box-shadow: 0 0 0 0 color-mix(in srgb, var(--fill-pop-bg), transparent, 0.5);
214
214
  }
215
215
  }