@semcore/button 17.2.2-prerelease.9 → 18.0.0-prerelease.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 (27) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/lib/cjs/component/Button/Button.js +26 -27
  3. package/lib/cjs/component/Button/Button.js.map +1 -1
  4. package/lib/cjs/component/Button/button.shadow.css +101 -109
  5. package/lib/cjs/component/ButtonLink/ButtonLink.js +27 -16
  6. package/lib/cjs/component/ButtonLink/ButtonLink.js.map +1 -1
  7. package/lib/cjs/component/ButtonLink/ButtonLink.type.js.map +1 -1
  8. package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +18 -6
  9. package/lib/es6/component/Button/Button.js +26 -27
  10. package/lib/es6/component/Button/Button.js.map +1 -1
  11. package/lib/es6/component/Button/button.shadow.css +101 -109
  12. package/lib/es6/component/ButtonLink/ButtonLink.js +28 -16
  13. package/lib/es6/component/ButtonLink/ButtonLink.js.map +1 -1
  14. package/lib/es6/component/ButtonLink/ButtonLink.type.js.map +1 -1
  15. package/lib/es6/component/ButtonLink/buttonLink.shadow.css +18 -6
  16. package/lib/esm/component/Button/Button.mjs +27 -28
  17. package/lib/esm/component/Button/button.shadow.css +101 -109
  18. package/lib/esm/component/ButtonLink/ButtonLink.mjs +21 -11
  19. package/lib/esm/component/ButtonLink/buttonLink.shadow.css +18 -6
  20. package/lib/types/component/ButtonLink/ButtonLink.d.ts.map +1 -1
  21. package/lib/types/component/ButtonLink/ButtonLink.type.d.ts +1 -1
  22. package/lib/types/component/ButtonLink/ButtonLink.type.d.ts.map +1 -1
  23. package/package.json +8 -8
  24. package/src/component/Button/button.shadow.css +101 -109
  25. package/src/component/ButtonLink/ButtonLink.tsx +8 -2
  26. package/src/component/ButtonLink/ButtonLink.type.ts +1 -1
  27. package/src/component/ButtonLink/buttonLink.shadow.css +18 -6
package/src/component/Button/button.shadow.css CHANGED
@@ -11,7 +11,7 @@ SButton {
11
11
  text-decoration: none;
12
12
  text-align: center;
13
13
  vertical-align: middle;
14
- border: 1px solid transparent;
14
+ border: none;
15
15
  box-shadow: none;
16
16
  cursor: pointer;
17
17
  box-sizing: border-box;
@@ -20,7 +20,7 @@ SButton {
20
20
  touch-action: manipulation;
21
21
  -webkit-tap-highlight-color: transparent;
22
22
  font-weight: var(--intergalactic-medium, 500);
23
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
23
+ color: var(--intergalactic-control-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
24
24
  min-width: fit-content;
25
25
 
26
26
  &::-moz-focus-inner {
@@ -49,213 +49,204 @@ SButton[size='s'] {
49
49
  }
50
50
 
51
51
  SButton[size='m'] {
52
- height: var(--intergalactic-form-control-m, 28px);
52
+ height: var(--intergalactic-form-control-m, 32px);
53
53
  border-radius: var(--intergalactic-control-rounded, 6px);
54
54
  font-size: var(--intergalactic-fs-200, 14px);
55
55
  }
56
56
 
57
+ SButton[size='m']:has(SAddon:only-child) {
58
+ width: var(--intergalactic-form-control-m, 32px);
59
+ min-width: var(--intergalactic-form-control-m, 32px);
60
+ }
61
+
57
62
  SButton[size='l'] {
58
- height: var(--intergalactic-form-control-l, 40px);
63
+ height: var(--intergalactic-form-control-l, 44px);
59
64
  border-radius: var(--intergalactic-control-rounded, 6px);
60
65
  font-size: var(--intergalactic-fs-300, 16px);
61
66
  }
62
67
 
68
+ SButton[size='l']:has(SAddon:only-child) {
69
+ width: var(--intergalactic-form-control-l, 44px);
70
+ min-width: var(--intergalactic-form-control-l, 44px);
71
+ }
72
+
63
73
  SButton[theme='primary-info'] {
64
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
74
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
65
75
  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
66
76
 
67
77
  &:hover {
68
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
78
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
69
79
  background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
70
80
  }
71
81
 
72
82
  &:active,
73
83
  &[active] {
74
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
84
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
75
85
  background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
76
86
  }
77
87
  }
78
88
 
79
89
  SButton[theme='primary-success'] {
80
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
90
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
81
91
  background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
82
92
 
83
93
  &:hover {
84
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
94
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
85
95
  background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
86
96
  }
87
97
 
88
98
  &:active,
89
99
  &[active] {
90
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
100
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
91
101
  background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
92
102
  }
93
103
  }
94
104
 
95
105
  SButton[theme='primary-brand'] {
96
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
97
- background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
106
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
107
+ background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303));
98
108
 
99
109
  &:hover {
100
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
101
- background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
110
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
111
+ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3));
102
112
  }
103
113
 
104
114
  &:active,
105
115
  &[active] {
106
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
107
- background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
116
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
117
+ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5));
108
118
  }
109
119
  }
110
120
 
111
121
  SButton[theme='primary-warning'] {
112
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
113
- background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
122
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
123
+ background-color: var(--intergalactic-control-primary-brand, oklch(0.74 0.17 303));
114
124
 
115
125
  &:hover {
116
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
117
- background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
126
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
127
+ background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.72 0.181 302.3));
118
128
  }
119
129
 
120
130
  &:active,
121
131
  &[active] {
122
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
123
- background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
132
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
133
+ background-color: var(--intergalactic-control-primary-brand-active, oklch(0.7 0.191 301.5));
124
134
  }
125
135
  }
126
136
 
127
137
  SButton[theme='primary-danger'] {
128
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
138
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
129
139
  background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
130
140
 
131
141
  &:hover {
132
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
142
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
133
143
  background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
134
144
  }
135
145
 
136
146
  &:active,
137
147
  &[active] {
138
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
148
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
139
149
  background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
140
150
  }
141
151
  }
142
152
 
143
153
  SButton[theme='primary-invert'] {
144
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
154
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
145
155
  background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));
146
156
 
147
157
  &:hover {
148
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
158
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
149
159
  background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
150
160
  }
151
161
 
152
162
  &:active,
153
163
  &[active] {
154
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
164
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
155
165
  background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
156
166
  }
157
167
  }
158
168
 
159
169
  SButton[theme='secondary-muted'] {
160
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
161
- border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
162
- background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028));
170
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
171
+ background-color: var(--intergalactic-control-secondary-neutral, oklch(0.166 0.031 175.8 / 0.097));
163
172
 
164
173
  &:hover {
165
174
  background-color: var(--intergalactic-control-secondary-neutral-hover,
166
- oklch(0.176 0.033 175.6 / 0.056));
167
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
175
+ oklch(0.151 0.028 176.1 / 0.123));
176
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
168
177
  }
169
178
 
170
179
  &:active,
171
180
  &[active] {
172
181
  background-color: var(--intergalactic-control-secondary-neutral-active,
173
- oklch(0.176 0.033 175.7 / 0.084));
174
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
175
- }
176
- }
177
-
178
- SButton[theme='secondary-info'] {
179
- background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
180
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
181
- border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
182
-
183
- &:hover {
184
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
185
- background-color: var(--intergalactic-control-secondary-info-hover, oklch(0.525 0.265 263 / 0.077));
186
- }
187
-
188
- &:active,
189
- &[active] {
190
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
191
- background-color: var(--intergalactic-control-secondary-info-active, oklch(0.524 0.266 263.1 / 0.116));
182
+ oklch(0.145 0.027 176.1 / 0.135));
183
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
192
184
  }
193
185
  }
194
186
 
195
187
  SButton[theme='secondary-invert'] {
196
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
197
- border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
188
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
198
189
  background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
199
190
 
200
191
  &:hover {
201
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
202
- background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145));
192
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
193
+ background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.98 0.036 140 / 0.164));
203
194
  }
204
195
 
205
196
  &:active,
206
197
  &[active] {
207
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
198
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
208
199
  background-color: var(--intergalactic-control-secondary-invert-active,
209
- oklch(0.983 0.03 140 / 0.183));
200
+ oklch(0.986 0.025 140 / 0.203));
210
201
  }
211
202
  }
212
203
 
213
204
  SButton[theme='tertiary-info'] {
214
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
205
+ color: var(--intergalactic-text-link-accent, oklch(0.6 0.166 277.7));
215
206
  background-color: var(--intergalactic-control-tertiary-info, transparent);
216
207
 
217
208
  &:hover {
218
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
219
- background-color: var(--intergalactic-control-tertiary-info-hover, oklch(0.525 0.265 263 / 0.077));
209
+ color: var(--intergalactic-text-link-accent, oklch(0.6 0.166 277.7));
210
+ background-color: var(--intergalactic-control-tertiary-info-hover, oklch(0.526 0.264 263 / 0.058));
220
211
  }
221
212
 
222
213
  &:active,
223
214
  &[active] {
224
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
225
- background-color: var(--intergalactic-control-tertiary-info-active, oklch(0.524 0.266 263.1 / 0.116));
215
+ color: var(--intergalactic-text-link-accent, oklch(0.6 0.166 277.7));
216
+ background-color: var(--intergalactic-control-tertiary-info-active, oklch(0.525 0.265 263 / 0.077));
226
217
  }
227
218
  }
228
219
 
229
220
  SButton[theme='tertiary-muted'] {
230
- color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
221
+ color: var(--intergalactic-control-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
231
222
  background-color: var(--intergalactic-control-tertiary-neutral, transparent);
232
223
 
233
224
  &:hover {
234
- background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056));
235
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
225
+ background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.177 0.033 175.6 / 0.042));
226
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
236
227
  }
237
228
 
238
229
  &:active,
239
230
  &[active] {
240
231
  background-color: var(--intergalactic-control-tertiary-neutral-active,
241
- oklch(0.176 0.033 175.7 / 0.084));
242
- color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
232
+ oklch(0.176 0.033 175.6 / 0.056));
233
+ color: var(--intergalactic-control-text-primary, oklch(0.1 0.03 137 / 0.899));
243
234
  }
244
235
  }
245
236
 
246
237
  SButton[theme='tertiary-invert'] {
247
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
238
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
248
239
  background-color: var(--intergalactic-control-tertiary-invert, transparent);
249
240
 
250
241
  &:hover {
251
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
252
- background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145));
242
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
243
+ background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.98 0.036 140 / 0.164));
253
244
  }
254
245
 
255
246
  &:active,
256
247
  &[active] {
257
- color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
258
- background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183));
248
+ color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
249
+ background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.986 0.025 140 / 0.203));
259
250
  }
260
251
  }
261
252
 
@@ -266,15 +257,11 @@ SButton[neighborLocation='right'] {
266
257
 
267
258
  SButton[neighborLocation='both'] {
268
259
  border-radius: 0;
269
- /* disable-tokens-validator */
270
- margin-left: -1px;
271
260
  }
272
261
 
273
262
  SButton[neighborLocation='left'] {
274
263
  border-top-left-radius: 0;
275
264
  border-bottom-left-radius: 0;
276
- /* disable-tokens-validator */
277
- margin-left: -1px;
278
265
  }
279
266
 
280
267
  SButton[neighborLocation='both'],
@@ -282,12 +269,12 @@ SButton[neighborLocation='left'] {
282
269
  position: relative;
283
270
 
284
271
  &:after {
285
- background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
286
- }
272
+ background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347));
273
+ } /* TODO: need to add a new variables for neighbor location borders based on the final UI */
287
274
 
288
275
  &[theme='secondary-muted'] {
289
276
  &:after {
290
- background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
277
+ background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: need to add a new variables for neighbor location borders based on the final UI */
291
278
  }
292
279
  }
293
280
  }
@@ -296,10 +283,10 @@ SButton+SButton[neighborLocation='both']:after,
296
283
  SButton+SButton[neighborLocation='left']:after {
297
284
  content: '';
298
285
  position: absolute;
299
- top: -1px;
300
- left: -1px;
286
+ top: 0;
287
+ left: 0;
301
288
  width: 1px;
302
- height: calc(100% + 2px);
289
+ height: 100%;
303
290
  }
304
291
 
305
292
  SSpin {
@@ -328,27 +315,40 @@ SText {
328
315
  }
329
316
 
330
317
  SText[size='m'] {
331
- margin-left: var(--intergalactic-spacing-2x, 8px);
332
- margin-right: var(--intergalactic-spacing-2x, 8px);
333
- line-height: var(--intergalactic-lh-200, 142%);
318
+ margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
319
+ margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
320
+ line-height: var(--intergalactic-lh-200, 1.4286);
321
+
322
+ &:only-child {
323
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
324
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
325
+ }
326
+
327
+ &:first-child {
328
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
329
+ }
330
+
331
+ &:last-child {
332
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
333
+ }
334
334
  }
335
335
 
336
336
  SText[size='l'] {
337
- margin-left: var(--intergalactic-spacing-2x, 8px);
338
- margin-right: var(--intergalactic-spacing-2x, 8px);
339
- line-height: var(--intergalactic-lh-300, 150%);
337
+ margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
338
+ margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
339
+ line-height: var(--intergalactic-lh-300, 1.5);
340
340
 
341
341
  &:only-child {
342
- margin-left: var(--intergalactic-spacing-3x, 12px);
343
- margin-right: var(--intergalactic-spacing-3x, 12px);
342
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
343
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
344
344
  }
345
345
 
346
346
  &:first-child {
347
- margin-left: var(--intergalactic-spacing-3x, 12px);
347
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
348
348
  }
349
349
 
350
350
  &:last-child {
351
- margin-right: var(--intergalactic-spacing-3x, 12px);
351
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
352
352
  }
353
353
  }
354
354
 
@@ -361,38 +361,30 @@ SAddon {
361
361
 
362
362
  SAddon[size='m'] {
363
363
  &:not(:only-child):first-child {
364
- margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
365
- /* -1px - for border width */
364
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
366
365
  }
367
366
 
368
367
  &:not(:only-child):last-child {
369
- margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
370
- /* -1px - for border width */
368
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
371
369
  }
372
370
 
373
371
  &:only-child {
374
- margin-left: calc(1.5 * var(--intergalactic-spacing-1x, 4px) - 1px);
375
- /* -1px - for border width */
376
- margin-right: calc(1.5 * var(--intergalactic-spacing-1x, 4px) - 1px);
377
- /* -1px - for border width */
372
+ margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
373
+ margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
378
374
  }
379
375
  }
380
376
 
381
377
  SAddon[size='l'] {
382
378
  &:not(:only-child):first-child {
383
- margin-left: calc(var(--intergalactic-spacing-3x, 12px) - 1px);
384
- /* -1px - for border width */
379
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
385
380
  }
386
381
 
387
382
  &:not(:only-child):last-child {
388
- margin-right: calc(var(--intergalactic-spacing-3x, 12px) - 1px);
389
- /* -1px - for border width */
383
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
390
384
  }
391
385
 
392
386
  &:only-child {
393
- margin-left: calc(3 * var(--intergalactic-spacing-1x, 4px) - 1px);
394
- /* -1px - for border width */
395
- margin-right: calc(3 * var(--intergalactic-spacing-1x, 4px) - 1px);
396
- /* -1px - for border width */
387
+ margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
388
+ margin-right: var(--intergalactic-spacing-content-padding-medium, 12px);
397
389
  }
398
390
  }
package/src/component/ButtonLink/ButtonLink.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { Intergalactic } from '@semcore/core';
1
+ import type { Intergalactic, IRootComponentProps } from '@semcore/core';
2
2
  import { createComponent, sstyled, Root, Component } from '@semcore/core';
3
3
  import Link from '@semcore/link';
4
4
  import React from 'react';
@@ -37,6 +37,12 @@ class RootButtonLink extends Component<
37
37
  }
38
38
  }
39
39
 
40
+ function Text(props: IRootComponentProps) {
41
+ const SText = Root;
42
+ const { styles } = props;
43
+ return sstyled(styles)(<SText render={Link.Text} />);
44
+ }
45
+
40
46
  /**
41
47
  * ButtonLink
42
48
  *
@@ -45,7 +51,7 @@ class RootButtonLink extends Component<
45
51
  export const ButtonLink = createComponent<NSButtonLink.Component, typeof RootButtonLink>(
46
52
  RootButtonLink,
47
53
  {
48
- Text: Link.Text,
54
+ Text,
49
55
  Addon: Link.Addon,
50
56
  },
51
57
  {
package/src/component/ButtonLink/ButtonLink.type.ts CHANGED
@@ -6,7 +6,7 @@ import type { NSText } from '@semcore/typography';
6
6
  import type { NSButton } from '../Button/Button.type';
7
7
 
8
8
  declare namespace NSButtonLink {
9
- type Props = Intergalactic.InternalTypings.EfficientOmit<NSLink.Props, 'enableVisited'> & {
9
+ type Props = Intergalactic.InternalTypings.EfficientOmit<NSLink.Props, 'enableVisited' | 'use' | 'theme'> & {
10
10
  /**
11
11
  * Button link type
12
12
  * @default primary
package/src/component/ButtonLink/buttonLink.shadow.css CHANGED
@@ -3,27 +3,39 @@ SButtonLink {
3
3
  font-family: inherit;
4
4
  }
5
5
 
6
- SButtonLink[use='primary']:not([color]) {
7
- color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
6
+ SButtonLink[use='primary'] {
7
+ &:not([color]) {
8
+ color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
9
+ }
10
+
11
+ SText {
12
+ text-decoration-color: transparent;
13
+ }
8
14
 
9
15
  &[active],
10
16
  &:active,
11
17
  &:hover {
12
- color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
18
+ &:not([color]) {
19
+ color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
20
+ }
21
+
22
+ SText {
23
+ text-decoration-color: currentColor;
24
+ }
13
25
  }
14
26
  }
15
27
 
16
28
  SButtonLink[use='secondary']:not([color]) {
17
- color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
29
+ color: var(--intergalactic-text-hint, oklch(0.097 0.023 156.5 / 0.468));
18
30
 
19
31
  &[active],
20
32
  &:active,
21
33
  &:hover {
22
- color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
34
+ color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
23
35
  }
24
36
  }
25
37
 
26
38
  SButtonLink[use='secondary'] SText {
27
- text-decoration-style: dashed;
39
+ text-decoration-style: dotted;
28
40
  text-decoration-color: currentColor;
29
41
  }