@gitbutler/design-core 1.9.2 → 2.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.
Files changed (8) hide show
  1. package/README.md +0 -9
  2. package/package.json +1 -2
  3. package/tokens/json/components.tokens.json +849 -0
  4. package/tokens/json/core.tokens.json +756 -0
  5. package/tokens/json/fx.tokens.json +57 -0
  6. package/tokens/json/semantic.tokens.json +467 -0
  7. package/tokens/tokens.css +296 -300
  8. package/tokens/tokens.json +0 -2117
package/tokens/tokens.css CHANGED
@@ -3,327 +3,323 @@
3
3
  * ------------------------------------------- */
4
4
 
5
5
  :root {
6
- --clr-art-scene-bg: hsl(175 46.4% 89.0%);
7
- --clr-art-scene-fill: hsl(60 64.7% 96.7%);
8
- --clr-art-scene-outline: hsl(180 6.0% 29.6%);
9
- --clr-art-spot-fill: var(--clr-core-gray-70);
10
- --clr-art-spot-fill-pop: var(--clr-core-pop-70);
11
- --clr-bg-1: var(--clr-core-gray-100);
12
- --clr-bg-2: var(--clr-core-gray-90);
13
- --clr-bg-3: var(--clr-core-gray-80);
14
- --clr-bg-muted: var(--clr-core-gray-95);
15
- --clr-bg-overlay: hsl(0 0.0% 83.9% / 0.45098039215686275);
16
- --clr-bg-toast: var(--clr-core-gray-5);
17
- --clr-border-1: var(--clr-core-gray-60);
18
- --clr-border-2: var(--clr-core-gray-70);
19
- --clr-border-3: var(--clr-core-gray-80);
20
- --clr-btn-danger-outline: var(--clr-core-danger-50);
21
- --clr-btn-danger-outline-bg: var(--clr-core-danger-70);
22
- --clr-btn-danger-outline-text: var(--clr-core-danger-40);
23
- --clr-btn-gray-outline: var(--clr-core-gray-50);
24
- --clr-btn-gray-outline-bg: var(--clr-core-gray-70);
25
- --clr-btn-gray-outline-text: var(--clr-core-gray-10);
26
- --clr-btn-pop-outline: var(--clr-core-pop-50);
27
- --clr-btn-pop-outline-bg: var(--clr-core-pop-70);
28
- --clr-btn-pop-outline-text: var(--clr-core-pop-40);
29
- --clr-btn-purple-outline: var(--clr-core-purple-50);
30
- --clr-btn-purple-outline-bg: var(--clr-core-purple-70);
31
- --clr-btn-purple-outline-text: var(--clr-core-purple-40);
32
- --clr-btn-safe-outline: var(--clr-core-safe-50);
33
- --clr-btn-safe-outline-bg: var(--clr-core-safe-70);
34
- --clr-btn-safe-outline-text: var(--clr-core-safe-40);
35
- --clr-btn-warn-outline: var(--clr-core-warn-50);
36
- --clr-btn-warn-outline-bg: var(--clr-core-warn-70);
37
- --clr-btn-warn-outline-text: var(--clr-core-warn-30);
38
- --clr-change-icon-addition: var(--clr-core-safe-60);
39
- --clr-change-icon-deletion: var(--clr-core-danger-60);
40
- --clr-change-icon-modification: var(--clr-core-warn-60);
41
- --clr-change-icon-rename: var(--clr-core-purple-60);
42
- --clr-commit-integrated: var(--clr-core-purple-50);
43
- --clr-commit-local: var(--clr-core-gray-50);
44
- --clr-commit-remote: var(--clr-core-pop-50);
45
- --clr-commit-shadow: var(--clr-core-pop-60);
46
- --clr-commit-upstream: var(--clr-core-warn-50);
47
- --clr-core-danger-5: hsl(8 67.7% 18.2%);
48
- --clr-core-danger-10: hsl(8 68.1% 22.2%);
49
- --clr-core-danger-20: hsl(8 67.9% 25.7%);
50
- --clr-core-danger-30: hsl(8 67.8% 34.1%);
51
- --clr-core-danger-40: hsl(8 67.9% 41.6%);
52
- --clr-core-danger-50: hsl(8 67.8% 50.0%);
53
- --clr-core-danger-60: hsl(8 57.4% 69.6%);
54
- --clr-core-danger-70: hsl(8 58.8% 81.0%);
55
- --clr-core-danger-80: hsl(9 60.7% 89.0%);
56
- --clr-core-danger-90: hsl(9 61.3% 93.9%);
57
- --clr-core-danger-95: hsl(6 55.6% 96.5%);
58
- --clr-core-gray-0: hsl(0 0.0% 0.0%);
59
- --clr-core-gray-5: hsl(24 9.8% 10.0%);
60
- --clr-core-gray-10: hsl(20 8.3% 14.1%);
61
- --clr-core-gray-20: hsl(23 7.4% 21.2%);
62
- --clr-core-gray-30: hsl(22 7.5% 28.8%);
63
- --clr-core-gray-40: hsl(26 7.6% 36.1%);
64
- --clr-core-gray-50: hsl(23 7.8% 45.1%);
65
- --clr-core-gray-60: hsl(23 7.1% 64.1%);
66
- --clr-core-gray-70: hsl(26 6.2% 77.8%);
67
- --clr-core-gray-80: hsl(20 5.9% 90.0%);
68
- --clr-core-gray-90: hsl(30 7.7% 94.9%);
69
- --clr-core-gray-95: hsl(60 7.7% 97.5%);
70
- --clr-core-gray-100: hsl(0 0.0% 100.0%);
71
- --clr-core-pop-5: hsl(180 66.7% 8.2%);
72
- --clr-core-pop-10: hsl(180 64.7% 13.3%);
73
- --clr-core-pop-20: hsl(180 65.5% 17.1%);
74
- --clr-core-pop-30: hsl(180 64.8% 24.5%);
75
- --clr-core-pop-40: hsl(180 65.3% 32.7%);
76
- --clr-core-pop-50: hsl(180 65.4% 42.0%);
77
- --clr-core-pop-60: hsl(180 55.0% 60.8%);
78
- --clr-core-pop-70: hsl(180 56.1% 75.9%);
79
- --clr-core-pop-80: hsl(180 57.1% 89.0%);
80
- --clr-core-pop-90: hsl(180 60.0% 94.1%);
81
- --clr-core-pop-95: hsl(180 55.6% 96.5%);
82
- --clr-core-purple-5: hsl(270 59.5% 16.5%);
83
- --clr-core-purple-10: hsl(270 60.0% 20.6%);
84
- --clr-core-purple-20: hsl(270 60.0% 25.5%);
85
- --clr-core-purple-30: hsl(270 60.4% 35.7%);
86
- --clr-core-purple-40: hsl(270 59.8% 45.9%);
87
- --clr-core-purple-50: hsl(270 60.0% 53.9%);
88
- --clr-core-purple-60: hsl(270 51.5% 74.1%);
89
- --clr-core-purple-70: hsl(270 52.4% 83.5%);
90
- --clr-core-purple-80: hsl(270 53.6% 89.0%);
91
- --clr-core-purple-90: hsl(270 53.3% 94.1%);
92
- --clr-core-purple-95: hsl(270 55.6% 96.5%);
93
- --clr-core-safe-5: hsl(154 59.0% 7.6%);
94
- --clr-core-safe-10: hsl(155 60.0% 12.7%);
95
- --clr-core-safe-20: hsl(155 59.1% 17.3%);
96
- --clr-core-safe-30: hsl(155 59.7% 26.3%);
97
- --clr-core-safe-40: hsl(155 59.8% 36.1%);
98
- --clr-core-safe-50: hsl(155 60.0% 45.1%);
99
- --clr-core-safe-60: hsl(155 50.8% 64.1%);
100
- --clr-core-safe-70: hsl(155 52.2% 77.8%);
101
- --clr-core-safe-80: hsl(154 53.6% 89.0%);
102
- --clr-core-safe-90: hsl(154 53.3% 94.1%);
103
- --clr-core-safe-95: hsl(156 55.6% 96.5%);
104
- --clr-core-warn-5: hsl(35 95.1% 16.1%);
105
- --clr-core-warn-10: hsl(35 94.2% 20.4%);
106
- --clr-core-warn-20: hsl(35 95.1% 24.1%);
107
- --clr-core-warn-30: hsl(35 95.2% 32.9%);
108
- --clr-core-warn-40: hsl(34 90.8% 42.5%);
109
- --clr-core-warn-50: hsl(35 95.3% 50.0%);
110
- --clr-core-warn-60: hsl(35 80.6% 69.6%);
111
- --clr-core-warn-70: hsl(35 81.4% 81.0%);
112
- --clr-core-warn-80: hsl(35 82.1% 89.0%);
113
- --clr-core-warn-90: hsl(35 86.7% 94.1%);
114
- --clr-core-warn-95: hsl(34 88.9% 96.5%);
115
- --clr-diff-addition-count-bg: hsl(158 67.5% 84.3%);
116
- --clr-diff-addition-count-border: hsl(155 36.1% 66.9%);
117
- --clr-diff-addition-count-text: hsl(154 17.2% 46.9%);
118
- --clr-diff-addition-line-bg: hsl(157 82.1% 89.0%);
119
- --clr-diff-addition-line-highlight: hsl(154 70.0% 76.5%);
120
- --clr-diff-count-bg: hsl(60 5.9% 96.7%);
121
- --clr-diff-count-border: var(--clr-border-2);
122
- --clr-diff-count-text: var(--clr-text-2);
123
- --clr-diff-deletion-count-bg: hsl(348 100.0% 92.0%);
124
- --clr-diff-deletion-count-border: hsl(0 51.1% 81.6%);
125
- --clr-diff-deletion-count-text: hsl(0 18.1% 53.5%);
126
- --clr-diff-deletion-line-bg: hsl(355 100.0% 95.1%);
127
- --clr-diff-deletion-line-highlight: hsl(346 93.4% 88.0%);
128
- --clr-diff-line-bg: var(--clr-bg-1);
129
- --clr-diff-locked-count-bg: hsl(40 92.3% 89.8%);
130
- --clr-diff-locked-count-border: hsl(38 74.4% 75.5%);
131
- --clr-diff-locked-count-text: hsl(38 67.7% 43.7%);
132
- --clr-diff-locked-selected-count-bg: hsl(40 92.0% 75.5%);
133
- --clr-diff-locked-selected-count-border: hsl(38 67.9% 58.4%);
134
- --clr-diff-locked-selected-count-text: hsl(38 72.4% 38.4%);
135
- --clr-diff-selected-count-bg: var(--clr-core-pop-50);
136
- --clr-diff-selected-count-border: var(--clr-core-pop-40);
137
- --clr-diff-selected-count-text: var(--clr-core-pop-90);
138
- --clr-drop-shadow: hsl(0 0.0% 0.0% / 0.10196078431372549);
139
- --clr-selected-in-focus-bg: var(--clr-core-pop-90);
140
- --clr-selected-in-focus-element: var(--clr-core-pop-50);
141
- --clr-selected-in-focus-file: var(--clr-core-pop-80);
142
- --clr-selected-not-in-focus-bg: var(--clr-core-gray-90);
143
- --clr-selected-not-in-focus-element: var(--clr-core-gray-60);
144
- --clr-text-1: var(--clr-core-gray-5);
145
- --clr-text-2: var(--clr-core-gray-50);
146
- --clr-text-3: var(--clr-core-gray-60);
147
- --clr-theme-danger-bg: var(--clr-core-danger-95);
148
- --clr-theme-danger-element: var(--clr-core-danger-50);
149
- --clr-theme-danger-on-element: var(--clr-core-danger-95);
150
- --clr-theme-danger-on-soft: var(--clr-core-danger-40);
151
- --clr-theme-danger-soft: var(--clr-core-danger-80);
152
- --clr-theme-danger-text: var(--clr-core-danger-10);
153
- --clr-theme-gray-element: var(--clr-core-gray-20);
154
- --clr-theme-gray-on-element: var(--clr-core-gray-100);
155
- --clr-theme-gray-on-soft: var(--clr-core-gray-20);
156
- --clr-theme-gray-soft: var(--clr-core-gray-80);
157
- --clr-theme-pop-bg: var(--clr-core-pop-95);
158
- --clr-theme-pop-element: var(--clr-core-pop-50);
159
- --clr-theme-pop-on-element: var(--clr-core-gray-100);
160
- --clr-theme-pop-on-soft: var(--clr-core-pop-40);
161
- --clr-theme-pop-soft: var(--clr-core-pop-80);
162
- --clr-theme-pop-text: var(--clr-core-pop-10);
163
- --clr-theme-purple-bg: var(--clr-core-purple-95);
164
- --clr-theme-purple-element: var(--clr-core-purple-50);
165
- --clr-theme-purple-on-element: var(--clr-core-purple-95);
166
- --clr-theme-purple-on-soft: var(--clr-core-purple-40);
167
- --clr-theme-purple-soft: var(--clr-core-purple-80);
168
- --clr-theme-purple-text: var(--clr-core-purple-10);
169
- --clr-theme-safe-bg: var(--clr-core-safe-95);
170
- --clr-theme-safe-element: var(--clr-core-safe-50);
171
- --clr-theme-safe-on-element: var(--clr-core-safe-95);
172
- --clr-theme-safe-on-soft: var(--clr-core-safe-40);
173
- --clr-theme-safe-soft: var(--clr-core-safe-80);
174
- --clr-theme-safe-text: var(--clr-core-safe-10);
175
- --clr-theme-warn-bg: var(--clr-core-warn-95);
176
- --clr-theme-warn-element: var(--clr-core-warn-50);
177
- --clr-theme-warn-on-element: var(--clr-core-warn-95);
178
- --clr-theme-warn-on-soft: var(--clr-core-warn-40);
179
- --clr-theme-warn-soft: var(--clr-core-warn-80);
180
- --clr-theme-warn-text: var(--clr-core-warn-10);
181
- --clr-tooltip-bg: var(--clr-core-gray-95);
182
- --clr-tooltip-border: var(--clr-core-gray-80);
183
- --fx-shadow-l: 0 10px 40px 0 var(--clr-drop-shadow);
184
- --fx-shadow-m: 0 6px 30px 0 var(--clr-drop-shadow);
185
- --fx-shadow-s: 0 4px 14px 0 var(--clr-drop-shadow);
6
+ --art-scene-bg: hsl(175 46.4% 89.0%);
7
+ --art-scene-fill: hsl(60 64.7% 96.7%);
8
+ --art-scene-outline: hsl(180 6.0% 29.6%);
9
+ --art-spot-fill: var(--clr-gray-70);
10
+ --art-spot-fill-pop: var(--clr-pop-70);
11
+ --bg-1: var(--clr-gray-100);
12
+ --bg-2: var(--clr-gray-90);
13
+ --bg-3: var(--clr-gray-80);
14
+ --bg-danger: var(--clr-danger-95);
15
+ --bg-mute: var(--clr-gray-95);
16
+ --bg-overlay: hsl(0 0.0% 83.9% / 0.45098039215686275);
17
+ --bg-pop: var(--clr-pop-95);
18
+ --bg-purple: var(--clr-purple-95);
19
+ --bg-safe: var(--clr-safe-95);
20
+ --bg-toast: var(--clr-gray-5);
21
+ --bg-warn: var(--clr-warn-95);
22
+ --border-1: var(--clr-gray-60);
23
+ --border-2: var(--clr-gray-70);
24
+ --border-3: var(--clr-gray-80);
25
+ --btn-danger-outline: var(--clr-danger-50);
26
+ --btn-danger-outline-bg: var(--clr-danger-70);
27
+ --btn-danger-outline-text: var(--clr-danger-40);
28
+ --btn-gray-outline: var(--clr-gray-50);
29
+ --btn-gray-outline-bg: var(--clr-gray-70);
30
+ --btn-gray-outline-text: var(--clr-gray-10);
31
+ --btn-opacity-outline-bg: 10%;
32
+ --btn-opacity-outline-bg-hover: 25%;
33
+ --btn-opacity-outline-border: 40%;
34
+ --btn-opacity-outline-icon: 70%;
35
+ --btn-opacity-solid-hover: 10%;
36
+ --btn-opacity-solid-icon: 80%;
37
+ --btn-pop-outline: var(--clr-pop-50);
38
+ --btn-pop-outline-bg: var(--clr-pop-70);
39
+ --btn-pop-outline-text: var(--clr-pop-40);
40
+ --btn-purple-outline: var(--clr-purple-50);
41
+ --btn-purple-outline-bg: var(--clr-purple-70);
42
+ --btn-purple-outline-text: var(--clr-purple-40);
43
+ --btn-safe-outline: var(--clr-safe-50);
44
+ --btn-safe-outline-bg: var(--clr-safe-70);
45
+ --btn-safe-outline-text: var(--clr-safe-40);
46
+ --btn-warn-outline: var(--clr-warn-50);
47
+ --btn-warn-outline-bg: var(--clr-warn-70);
48
+ --btn-warn-outline-text: var(--clr-warn-30);
49
+ --chip-danger-bg: var(--clr-danger-80);
50
+ --chip-danger-fg: var(--clr-danger-40);
51
+ --chip-gray-bg: var(--clr-gray-80);
52
+ --chip-gray-fg: var(--clr-gray-20);
53
+ --chip-pop-bg: var(--clr-pop-80);
54
+ --chip-pop-fg: var(--clr-pop-40);
55
+ --chip-purple-bg: var(--clr-purple-80);
56
+ --chip-purple-fg: var(--clr-purple-40);
57
+ --chip-safe-bg: var(--clr-safe-80);
58
+ --chip-safe-fg: var(--clr-safe-40);
59
+ --chip-warn-bg: var(--clr-warn-80);
60
+ --chip-warn-fg: var(--clr-warn-40);
61
+ --clr-danger-5: hsl(8 67.7% 18.2%);
62
+ --clr-danger-10: hsl(8 68.1% 22.2%);
63
+ --clr-danger-20: hsl(8 67.9% 25.7%);
64
+ --clr-danger-30: hsl(8 67.8% 34.1%);
65
+ --clr-danger-40: hsl(8 67.9% 41.6%);
66
+ --clr-danger-50: hsl(8 67.8% 50.0%);
67
+ --clr-danger-60: hsl(8 57.4% 69.6%);
68
+ --clr-danger-70: hsl(8 58.8% 81.0%);
69
+ --clr-danger-80: hsl(9 60.7% 89.0%);
70
+ --clr-danger-90: hsl(9 61.3% 93.9%);
71
+ --clr-danger-95: hsl(6 55.6% 96.5%);
72
+ --clr-gray-0: hsl(0 0.0% 0.0%);
73
+ --clr-gray-5: hsl(24 9.8% 10.0%);
74
+ --clr-gray-10: hsl(20 8.3% 14.1%);
75
+ --clr-gray-20: hsl(23 7.4% 21.2%);
76
+ --clr-gray-30: hsl(22 7.5% 28.8%);
77
+ --clr-gray-40: hsl(26 7.6% 36.1%);
78
+ --clr-gray-50: hsl(23 7.8% 45.1%);
79
+ --clr-gray-60: hsl(23 7.1% 64.1%);
80
+ --clr-gray-70: hsl(26 6.2% 77.8%);
81
+ --clr-gray-80: hsl(20 5.9% 90.0%);
82
+ --clr-gray-90: hsl(30 7.7% 94.9%);
83
+ --clr-gray-95: hsl(60 7.7% 97.5%);
84
+ --clr-gray-100: hsl(0 0.0% 100.0%);
85
+ --clr-pop-5: hsl(180 66.7% 8.2%);
86
+ --clr-pop-10: hsl(180 64.7% 13.3%);
87
+ --clr-pop-20: hsl(180 65.5% 17.1%);
88
+ --clr-pop-30: hsl(180 64.8% 24.5%);
89
+ --clr-pop-40: hsl(180 65.3% 32.7%);
90
+ --clr-pop-50: hsl(180 65.4% 42.0%);
91
+ --clr-pop-60: hsl(180 55.0% 60.8%);
92
+ --clr-pop-70: hsl(180 56.1% 75.9%);
93
+ --clr-pop-80: hsl(180 57.1% 89.0%);
94
+ --clr-pop-90: hsl(180 60.0% 94.1%);
95
+ --clr-pop-95: hsl(180 55.6% 96.5%);
96
+ --clr-purple-5: hsl(270 59.5% 16.5%);
97
+ --clr-purple-10: hsl(270 60.0% 20.6%);
98
+ --clr-purple-20: hsl(270 60.0% 25.5%);
99
+ --clr-purple-30: hsl(270 60.4% 35.7%);
100
+ --clr-purple-40: hsl(270 59.8% 45.9%);
101
+ --clr-purple-50: hsl(270 60.0% 53.9%);
102
+ --clr-purple-60: hsl(270 51.5% 74.1%);
103
+ --clr-purple-70: hsl(270 52.4% 83.5%);
104
+ --clr-purple-80: hsl(270 53.6% 89.0%);
105
+ --clr-purple-90: hsl(270 53.3% 94.1%);
106
+ --clr-purple-95: hsl(270 55.6% 96.5%);
107
+ --clr-safe-5: hsl(154 59.0% 7.6%);
108
+ --clr-safe-10: hsl(155 60.0% 12.7%);
109
+ --clr-safe-20: hsl(155 59.1% 17.3%);
110
+ --clr-safe-30: hsl(155 59.7% 26.3%);
111
+ --clr-safe-40: hsl(155 59.8% 36.1%);
112
+ --clr-safe-50: hsl(155 60.0% 45.1%);
113
+ --clr-safe-60: hsl(155 50.8% 64.1%);
114
+ --clr-safe-70: hsl(155 52.2% 77.8%);
115
+ --clr-safe-80: hsl(154 53.6% 89.0%);
116
+ --clr-safe-90: hsl(154 53.3% 94.1%);
117
+ --clr-safe-95: hsl(156 55.6% 96.5%);
118
+ --clr-warn-5: hsl(35 95.1% 16.1%);
119
+ --clr-warn-10: hsl(35 94.2% 20.4%);
120
+ --clr-warn-20: hsl(35 95.1% 24.1%);
121
+ --clr-warn-30: hsl(35 95.2% 32.9%);
122
+ --clr-warn-40: hsl(34 90.8% 42.5%);
123
+ --clr-warn-50: hsl(35 95.3% 50.0%);
124
+ --clr-warn-60: hsl(35 80.6% 69.6%);
125
+ --clr-warn-70: hsl(35 81.4% 81.0%);
126
+ --clr-warn-80: hsl(35 82.1% 89.0%);
127
+ --clr-warn-90: hsl(35 86.7% 94.1%);
128
+ --clr-warn-95: hsl(34 88.9% 96.5%);
129
+ --commit-integrated: var(--clr-purple-50);
130
+ --commit-local: var(--clr-gray-50);
131
+ --commit-remote: var(--clr-pop-50);
132
+ --commit-shadow: var(--clr-pop-60);
133
+ --commit-upstream: var(--clr-warn-50);
134
+ --diff-addition-count-bg: hsl(158 67.5% 84.3%);
135
+ --diff-addition-count-border: hsl(155 36.1% 66.9%);
136
+ --diff-addition-count-text: hsl(154 17.2% 46.9%);
137
+ --diff-addition-line-bg: hsl(157 82.1% 89.0%);
138
+ --diff-addition-line-highlight: hsl(154 70.0% 76.5%);
139
+ --diff-count-bg: hsl(60 5.9% 96.7%);
140
+ --diff-count-border: var(--border-2);
141
+ --diff-count-text: var(--text-2);
142
+ --diff-deletion-count-bg: hsl(348 100.0% 92.0%);
143
+ --diff-deletion-count-border: hsl(0 51.1% 81.6%);
144
+ --diff-deletion-count-text: hsl(0 18.1% 53.5%);
145
+ --diff-deletion-line-bg: hsl(355 100.0% 95.1%);
146
+ --diff-deletion-line-highlight: hsl(346 93.4% 88.0%);
147
+ --diff-line-bg: var(--bg-1);
148
+ --diff-locked-count-bg: hsl(40 92.3% 89.8%);
149
+ --diff-locked-count-border: hsl(38 74.4% 75.5%);
150
+ --diff-locked-count-text: hsl(38 67.7% 43.7%);
151
+ --diff-locked-selected-count-bg: hsl(40 92.0% 75.5%);
152
+ --diff-locked-selected-count-border: hsl(38 67.9% 58.4%);
153
+ --diff-locked-selected-count-text: hsl(38 72.4% 38.4%);
154
+ --diff-selected-count-bg: var(--clr-pop-50);
155
+ --diff-selected-count-border: var(--clr-pop-40);
156
+ --diff-selected-count-text: var(--clr-pop-90);
157
+ --fill-danger-bg: var(--clr-danger-50);
158
+ --fill-danger-fg: var(--clr-danger-95);
159
+ --fill-gray-bg: var(--clr-gray-20);
160
+ --fill-gray-fg: var(--clr-gray-100);
161
+ --fill-pop-bg: var(--clr-pop-50);
162
+ --fill-pop-fg: var(--clr-gray-100);
163
+ --fill-purple-bg: var(--clr-purple-50);
164
+ --fill-purple-fg: var(--clr-purple-95);
165
+ --fill-safe-bg: var(--clr-safe-50);
166
+ --fill-safe-fg: var(--clr-safe-95);
167
+ --fill-warn-bg: var(--clr-warn-50);
168
+ --fill-warn-fg: var(--clr-warn-95);
169
+ --focus-bg: var(--clr-pop-90);
170
+ --focus-bg-mute: var(--clr-gray-90);
171
+ --focus-fg: var(--clr-pop-50);
172
+ --focus-fg-mute: var(--clr-gray-60);
173
+ --fx-shadow-l: 0 10px 40px 0 var(--shadow-clr);
174
+ --fx-shadow-m: 0 6px 30px 0 var(--shadow-clr);
175
+ --fx-shadow-s: 0 4px 14px 0 var(--shadow-clr);
186
176
  --opacity-disabled: 60%;
187
- --opacity-mix-btn-outline-bg: 10%;
188
- --opacity-mix-btn-outline-bg-hover: 25%;
189
- --opacity-mix-btn-outline-border: 40%;
190
- --opacity-mix-btn-outline-icon: 70%;
191
- --opacity-mix-btn-solid-hover: 10%;
192
- --opacity-mix-btn-solid-icon: 80%;
193
- --opacity-mix-hover: 5%;
194
- --radius-btn: 0.375rem;
177
+ --opacity-hover: 5%;
178
+ --radius-button: 0.375rem;
195
179
  --radius-l: 0.75rem;
196
180
  --radius-m: 0.375rem;
197
181
  --radius-ml: 0.625rem;
198
182
  --radius-s: 0.25rem;
183
+ --shadow-clr: hsl(0 0.0% 0.0% / 0.10196078431372549);
199
184
  --size-button: 1.75rem;
200
185
  --size-card-padding: 0.875rem;
201
186
  --size-cta: 2rem;
202
187
  --size-icon: 1rem;
203
188
  --size-tag: 1.375rem;
189
+ --text-1: var(--clr-gray-5);
190
+ --text-2: var(--clr-gray-50);
191
+ --text-3: var(--clr-gray-60);
192
+ --text-danger: var(--clr-danger-10);
204
193
  --text-fontfamily-accent: But Head;
205
194
  --text-fontfamily-default: Inter;
206
195
  --text-fontfamily-mono: Geist Mono;
207
196
  --text-lineheight-accent: 110%;
208
197
  --text-lineheight-body: 160%;
209
198
  --text-lineheight-default: 120%;
199
+ --text-pop: var(--clr-pop-10);
200
+ --text-purple: var(--clr-purple-10);
201
+ --text-safe: var(--clr-safe-10);
202
+ --text-warn: var(--clr-warn-10);
210
203
  --text-weight-bold: 600;
211
204
  --text-weight-regular: 400;
212
205
  --text-weight-semibold: 500;
206
+ --tooltip-bg: var(--clr-gray-95);
207
+ --tooltip-border: var(--clr-gray-80);
213
208
  }
214
209
 
215
210
  :root.dark {
216
- --clr-art-scene-bg: hsl(177 44.1% 28.0%);
217
- --clr-art-scene-fill: hsl(79 37.8% 82.4%);
218
- --clr-art-scene-outline: hsl(180 25.9% 10.6%);
219
- --clr-art-spot-fill: var(--clr-core-gray-40);
220
- --clr-art-spot-fill-pop: var(--clr-core-pop-30);
221
- --clr-bg-1: var(--clr-core-gray-10);
222
- --clr-bg-2: var(--clr-core-gray-5);
223
- --clr-bg-3: var(--clr-core-gray-0);
224
- --clr-bg-muted: var(--clr-core-gray-20);
225
- --clr-bg-overlay: hsl(0 0.0% 0.0% / 0.5019607843137255);
226
- --clr-bg-toast: var(--clr-core-gray-95);
227
- --clr-border-1: var(--clr-core-gray-40);
228
- --clr-border-2: var(--clr-core-gray-30);
229
- --clr-border-3: var(--clr-core-gray-20);
230
- --clr-btn-danger-outline: var(--clr-core-danger-50);
231
- --clr-btn-danger-outline-bg: var(--clr-core-danger-40);
232
- --clr-btn-danger-outline-text: var(--clr-core-danger-60);
233
- --clr-btn-gray-outline: var(--clr-core-gray-50);
234
- --clr-btn-gray-outline-bg: var(--clr-core-gray-40);
235
- --clr-btn-gray-outline-text: var(--clr-core-gray-100);
236
- --clr-btn-pop-outline: var(--clr-core-pop-50);
237
- --clr-btn-pop-outline-bg: var(--clr-core-pop-40);
238
- --clr-btn-pop-outline-text: var(--clr-core-pop-60);
239
- --clr-btn-purple-outline: var(--clr-core-purple-50);
240
- --clr-btn-purple-outline-bg: var(--clr-core-purple-40);
241
- --clr-btn-purple-outline-text: var(--clr-core-purple-60);
242
- --clr-btn-safe-outline: var(--clr-core-safe-50);
243
- --clr-btn-safe-outline-bg: var(--clr-core-safe-40);
244
- --clr-btn-safe-outline-text: var(--clr-core-safe-60);
245
- --clr-btn-warn-outline: var(--clr-core-warn-50);
246
- --clr-btn-warn-outline-bg: var(--clr-core-warn-40);
247
- --clr-btn-warn-outline-text: var(--clr-core-warn-60);
248
- --clr-change-icon-addition: var(--clr-core-safe-40);
249
- --clr-change-icon-deletion: var(--clr-core-danger-40);
250
- --clr-change-icon-modification: var(--clr-core-warn-40);
251
- --clr-change-icon-rename: var(--clr-core-purple-40);
252
- --clr-commit-integrated: var(--clr-core-purple-40);
253
- --clr-commit-local: var(--clr-core-gray-50);
254
- --clr-commit-remote: var(--clr-core-pop-50);
255
- --clr-commit-shadow: var(--clr-core-pop-30);
256
- --clr-commit-upstream: var(--clr-core-warn-50);
257
- --clr-diff-addition-count-bg: hsl(166 47.5% 23.1%);
258
- --clr-diff-addition-count-border: hsl(156 31.5% 35.5%);
259
- --clr-diff-addition-count-text: hsl(169 33.3% 62.4%);
260
- --clr-diff-addition-line-bg: hsl(168 52.9% 16.7%);
261
- --clr-diff-addition-line-highlight: hsl(168 71.8% 27.8%);
262
- --clr-diff-count-bg: hsl(12 5.5% 17.8%);
263
- --clr-diff-count-border: var(--clr-border-2);
264
- --clr-diff-count-text: var(--clr-text-2);
265
- --clr-diff-deletion-count-bg: hsl(350 51.4% 29.0%);
266
- --clr-diff-deletion-count-border: hsl(0 38.0% 42.4%);
267
- --clr-diff-deletion-count-text: hsl(349 64.6% 74.5%);
268
- --clr-diff-deletion-line-bg: hsl(347 57.0% 21.0%);
269
- --clr-diff-deletion-line-highlight: hsl(348 57.2% 39.4%);
270
- --clr-diff-line-bg: var(--clr-bg-1);
271
- --clr-diff-locked-count-bg: hsl(36 62.7% 23.1%);
272
- --clr-diff-locked-count-border: hsl(35 48.4% 35.7%);
273
- --clr-diff-locked-count-text: hsl(38 74.7% 64.3%);
274
- --clr-diff-locked-selected-count-bg: hsl(36 68.5% 36.1%);
275
- --clr-diff-locked-selected-count-border: hsl(35 52.2% 49.2%);
276
- --clr-diff-locked-selected-count-text: hsl(38 94.7% 85.3%);
277
- --clr-diff-selected-count-bg: var(--clr-core-pop-30);
278
- --clr-diff-selected-count-border: var(--clr-core-pop-40);
279
- --clr-diff-selected-count-text: var(--clr-core-pop-80);
280
- --clr-drop-shadow: hsl(0 0.0% 0.0% / 0.5019607843137255);
281
- --clr-selected-in-focus-bg: var(--clr-core-pop-10);
282
- --clr-selected-in-focus-element: var(--clr-core-pop-40);
283
- --clr-selected-in-focus-file: var(--clr-core-pop-20);
284
- --clr-selected-not-in-focus-bg: var(--clr-core-gray-20);
285
- --clr-selected-not-in-focus-element: var(--clr-core-gray-40);
286
- --clr-text-1: var(--clr-core-gray-95);
287
- --clr-text-2: var(--clr-core-gray-60);
288
- --clr-text-3: var(--clr-core-gray-40);
289
- --clr-theme-danger-bg: var(--clr-core-danger-5);
290
- --clr-theme-danger-element: var(--clr-core-danger-40);
291
- --clr-theme-danger-on-element: var(--clr-core-danger-95);
292
- --clr-theme-danger-on-soft: var(--clr-core-danger-60);
293
- --clr-theme-danger-soft: var(--clr-core-danger-10);
294
- --clr-theme-danger-text: var(--clr-core-danger-80);
295
- --clr-theme-gray-element: var(--clr-core-gray-80);
296
- --clr-theme-gray-on-element: var(--clr-core-gray-0);
297
- --clr-theme-gray-on-soft: var(--clr-core-gray-70);
298
- --clr-theme-gray-soft: var(--clr-core-gray-20);
299
- --clr-theme-pop-bg: var(--clr-core-pop-5);
300
- --clr-theme-pop-element: var(--clr-core-pop-40);
301
- --clr-theme-pop-on-element: var(--clr-core-gray-100);
302
- --clr-theme-pop-on-soft: var(--clr-core-pop-60);
303
- --clr-theme-pop-soft: var(--clr-core-pop-10);
304
- --clr-theme-pop-text: var(--clr-core-pop-80);
305
- --clr-theme-purple-bg: var(--clr-core-purple-5);
306
- --clr-theme-purple-element: var(--clr-core-purple-50);
307
- --clr-theme-purple-on-element: var(--clr-core-purple-90);
308
- --clr-theme-purple-on-soft: var(--clr-core-purple-60);
309
- --clr-theme-purple-soft: var(--clr-core-purple-10);
310
- --clr-theme-purple-text: var(--clr-core-purple-80);
311
- --clr-theme-safe-bg: var(--clr-core-safe-5);
312
- --clr-theme-safe-element: var(--clr-core-safe-40);
313
- --clr-theme-safe-on-element: var(--clr-core-safe-90);
314
- --clr-theme-safe-on-soft: var(--clr-core-safe-60);
315
- --clr-theme-safe-soft: var(--clr-core-safe-10);
316
- --clr-theme-safe-text: var(--clr-core-safe-80);
317
- --clr-theme-warn-bg: var(--clr-core-warn-5);
318
- --clr-theme-warn-element: var(--clr-core-warn-40);
319
- --clr-theme-warn-on-element: var(--clr-core-warn-90);
320
- --clr-theme-warn-on-soft: var(--clr-core-warn-60);
321
- --clr-theme-warn-soft: var(--clr-core-warn-10);
322
- --clr-theme-warn-text: var(--clr-core-warn-80);
323
- --clr-tooltip-bg: var(--clr-core-gray-10);
324
- --clr-tooltip-border: var(--clr-core-gray-30);
325
- --fx-shadow-l: 0 10px 40px 0 var(--clr-drop-shadow);
326
- --fx-shadow-m: 0 6px 30px 0 var(--clr-drop-shadow);
327
- --fx-shadow-s: 0 4px 14px 0 var(--clr-drop-shadow);
211
+ --art-scene-bg: hsl(177 44.1% 28.0%);
212
+ --art-scene-fill: hsl(79 37.8% 82.4%);
213
+ --art-scene-outline: hsl(180 25.9% 10.6%);
214
+ --art-spot-fill: var(--clr-gray-40);
215
+ --art-spot-fill-pop: var(--clr-pop-30);
216
+ --bg-1: var(--clr-gray-10);
217
+ --bg-2: var(--clr-gray-5);
218
+ --bg-3: var(--clr-gray-0);
219
+ --bg-danger: var(--clr-danger-5);
220
+ --bg-mute: var(--clr-gray-20);
221
+ --bg-overlay: hsl(0 0.0% 0.0% / 0.5019607843137255);
222
+ --bg-pop: var(--clr-pop-5);
223
+ --bg-purple: var(--clr-purple-5);
224
+ --bg-safe: var(--clr-safe-5);
225
+ --bg-toast: var(--clr-gray-95);
226
+ --bg-warn: var(--clr-warn-5);
227
+ --border-1: var(--clr-gray-40);
228
+ --border-2: var(--clr-gray-30);
229
+ --border-3: var(--clr-gray-20);
230
+ --btn-danger-outline: var(--clr-danger-50);
231
+ --btn-danger-outline-bg: var(--clr-danger-40);
232
+ --btn-danger-outline-text: var(--clr-danger-60);
233
+ --btn-gray-outline: var(--clr-gray-50);
234
+ --btn-gray-outline-bg: var(--clr-gray-40);
235
+ --btn-gray-outline-text: var(--clr-gray-100);
236
+ --btn-opacity-outline-bg: 10%;
237
+ --btn-opacity-outline-bg-hover: 25%;
238
+ --btn-opacity-outline-border: 40%;
239
+ --btn-opacity-outline-icon: 70%;
240
+ --btn-opacity-solid-hover: 10%;
241
+ --btn-opacity-solid-icon: 80%;
242
+ --btn-pop-outline: var(--clr-pop-50);
243
+ --btn-pop-outline-bg: var(--clr-pop-40);
244
+ --btn-pop-outline-text: var(--clr-pop-60);
245
+ --btn-purple-outline: var(--clr-purple-50);
246
+ --btn-purple-outline-bg: var(--clr-purple-40);
247
+ --btn-purple-outline-text: var(--clr-purple-60);
248
+ --btn-safe-outline: var(--clr-safe-50);
249
+ --btn-safe-outline-bg: var(--clr-safe-40);
250
+ --btn-safe-outline-text: var(--clr-safe-60);
251
+ --btn-warn-outline: var(--clr-warn-50);
252
+ --btn-warn-outline-bg: var(--clr-warn-40);
253
+ --btn-warn-outline-text: var(--clr-warn-60);
254
+ --chip-danger-bg: var(--clr-danger-10);
255
+ --chip-danger-fg: var(--clr-danger-60);
256
+ --chip-gray-bg: var(--clr-gray-20);
257
+ --chip-gray-fg: var(--clr-gray-70);
258
+ --chip-pop-bg: var(--clr-pop-10);
259
+ --chip-pop-fg: var(--clr-pop-60);
260
+ --chip-purple-bg: var(--clr-purple-10);
261
+ --chip-purple-fg: var(--clr-purple-60);
262
+ --chip-safe-bg: var(--clr-safe-10);
263
+ --chip-safe-fg: var(--clr-safe-60);
264
+ --chip-warn-bg: var(--clr-warn-10);
265
+ --chip-warn-fg: var(--clr-warn-60);
266
+ --commit-integrated: var(--clr-purple-40);
267
+ --commit-local: var(--clr-gray-50);
268
+ --commit-remote: var(--clr-pop-50);
269
+ --commit-shadow: var(--clr-pop-30);
270
+ --commit-upstream: var(--clr-warn-50);
271
+ --diff-addition-count-bg: hsl(166 47.5% 23.1%);
272
+ --diff-addition-count-border: hsl(156 31.5% 35.5%);
273
+ --diff-addition-count-text: hsl(169 33.3% 62.4%);
274
+ --diff-addition-line-bg: hsl(168 52.9% 16.7%);
275
+ --diff-addition-line-highlight: hsl(168 71.8% 27.8%);
276
+ --diff-count-bg: hsl(12 5.5% 17.8%);
277
+ --diff-count-border: var(--border-2);
278
+ --diff-count-text: var(--text-2);
279
+ --diff-deletion-count-bg: hsl(350 51.4% 29.0%);
280
+ --diff-deletion-count-border: hsl(0 38.0% 42.4%);
281
+ --diff-deletion-count-text: hsl(349 64.6% 74.5%);
282
+ --diff-deletion-line-bg: hsl(347 57.0% 21.0%);
283
+ --diff-deletion-line-highlight: hsl(348 57.2% 39.4%);
284
+ --diff-line-bg: var(--bg-1);
285
+ --diff-locked-count-bg: hsl(36 62.7% 23.1%);
286
+ --diff-locked-count-border: hsl(35 48.4% 35.7%);
287
+ --diff-locked-count-text: hsl(38 74.7% 64.3%);
288
+ --diff-locked-selected-count-bg: hsl(36 68.5% 36.1%);
289
+ --diff-locked-selected-count-border: hsl(35 52.2% 49.2%);
290
+ --diff-locked-selected-count-text: hsl(38 94.7% 85.3%);
291
+ --diff-selected-count-bg: var(--clr-pop-30);
292
+ --diff-selected-count-border: var(--clr-pop-40);
293
+ --diff-selected-count-text: var(--clr-pop-80);
294
+ --fill-danger-bg: var(--clr-danger-40);
295
+ --fill-danger-fg: var(--clr-danger-95);
296
+ --fill-gray-bg: var(--clr-gray-80);
297
+ --fill-gray-fg: var(--clr-gray-0);
298
+ --fill-pop-bg: var(--clr-pop-40);
299
+ --fill-pop-fg: var(--clr-gray-100);
300
+ --fill-purple-bg: var(--clr-purple-50);
301
+ --fill-purple-fg: var(--clr-purple-90);
302
+ --fill-safe-bg: var(--clr-safe-40);
303
+ --fill-safe-fg: var(--clr-safe-90);
304
+ --fill-warn-bg: var(--clr-warn-40);
305
+ --fill-warn-fg: var(--clr-warn-90);
306
+ --focus-bg: var(--clr-pop-10);
307
+ --focus-bg-mute: var(--clr-gray-20);
308
+ --focus-fg: var(--clr-pop-40);
309
+ --focus-fg-mute: var(--clr-gray-40);
310
+ --fx-shadow-l: 0 10px 40px 0 var(--shadow-clr);
311
+ --fx-shadow-m: 0 6px 30px 0 var(--shadow-clr);
312
+ --fx-shadow-s: 0 4px 14px 0 var(--shadow-clr);
313
+ --shadow-clr: hsl(0 0.0% 0.0% / 0.5019607843137255);
314
+ --text-1: var(--clr-gray-95);
315
+ --text-2: var(--clr-gray-60);
316
+ --text-3: var(--clr-gray-40);
317
+ --text-danger: var(--clr-danger-80);
318
+ --text-pop: var(--clr-pop-80);
319
+ --text-purple: var(--clr-purple-80);
320
+ --text-safe: var(--clr-safe-80);
321
+ --text-warn: var(--clr-warn-80);
322
+ --tooltip-bg: var(--clr-gray-10);
323
+ --tooltip-border: var(--clr-gray-30);
328
324
  }
329
325