@semcore/button 17.0.1 → 17.1.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 (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/component/Button/Button.js +27 -27
  3. package/lib/cjs/component/Button/Button.type.js.map +1 -1
  4. package/lib/cjs/component/Button/button.shadow.css +79 -79
  5. package/lib/cjs/component/ButtonLink/ButtonLink.js +7 -7
  6. package/lib/cjs/component/ButtonLink/ButtonLink.type.js.map +1 -1
  7. package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +4 -4
  8. package/lib/es6/component/Button/Button.js +27 -27
  9. package/lib/es6/component/Button/Button.type.js.map +1 -1
  10. package/lib/es6/component/Button/button.shadow.css +79 -79
  11. package/lib/es6/component/ButtonLink/ButtonLink.js +7 -7
  12. package/lib/es6/component/ButtonLink/ButtonLink.type.js.map +1 -1
  13. package/lib/es6/component/ButtonLink/buttonLink.shadow.css +4 -4
  14. package/lib/esm/component/Button/Button.mjs +28 -28
  15. package/lib/esm/component/Button/button.shadow.css +79 -79
  16. package/lib/esm/component/ButtonLink/ButtonLink.mjs +8 -8
  17. package/lib/esm/component/ButtonLink/buttonLink.shadow.css +4 -4
  18. package/lib/types/component/Button/Button.type.d.ts +2 -2
  19. package/lib/types/component/ButtonLink/ButtonLink.type.d.ts +2 -2
  20. package/package.json +8 -8
  21. package/src/component/Button/Button.type.ts +2 -2
  22. package/src/component/Button/button.shadow.css +79 -79
  23. package/src/component/ButtonLink/ButtonLink.type.ts +2 -2
  24. package/src/component/ButtonLink/buttonLink.shadow.css +4 -4
package/src/component/Button/button.shadow.css CHANGED
@@ -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, #6c6e79);
23
+ color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
24
24
  min-width: fit-content;
25
25
 
26
26
  &::-moz-focus-inner {
@@ -35,7 +35,7 @@ SButton {
35
35
  }
36
36
 
37
37
  SButton[disabled] {
38
- opacity: var(--intergalactic-disabled-opacity, 0.3);
38
+ opacity: var(--intergalactic-disabled-opacity, 0.4);
39
39
  cursor: default;
40
40
  pointer-events: none;
41
41
  box-shadow: none;
@@ -61,201 +61,201 @@ SButton[size='l'] {
61
61
  }
62
62
 
63
63
  SButton[theme='primary-info'] {
64
- color: var(--intergalactic-text-primary-invert, #ffffff);
65
- background-color: var(--intergalactic-control-primary-info, #008ff8);
64
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
65
+ background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
66
66
 
67
67
  &:hover {
68
- color: var(--intergalactic-text-primary-invert, #ffffff);
69
- background-color: var(--intergalactic-control-primary-info-hover, #006dca);
68
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
69
+ background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
70
70
  }
71
71
 
72
72
  &:active,
73
73
  &[active] {
74
- color: var(--intergalactic-text-primary-invert, #ffffff);
75
- background-color: var(--intergalactic-control-primary-info-active, #044792);
74
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
75
+ background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
76
76
  }
77
77
  }
78
78
 
79
79
  SButton[theme='primary-success'] {
80
- color: var(--intergalactic-text-primary-invert, #ffffff);
81
- background-color: var(--intergalactic-control-primary-success, #009f81);
80
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
81
+ background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
82
82
 
83
83
  &:hover {
84
- color: var(--intergalactic-text-primary-invert, #ffffff);
85
- background-color: var(--intergalactic-control-primary-success-hover, #007c65);
84
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
85
+ background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
86
86
  }
87
87
 
88
88
  &:active,
89
89
  &[active] {
90
- color: var(--intergalactic-text-primary-invert, #ffffff);
91
- background-color: var(--intergalactic-control-primary-success-active, #055345);
90
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
91
+ background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
92
92
  }
93
93
  }
94
94
 
95
95
  SButton[theme='primary-brand'] {
96
- color: var(--intergalactic-text-primary-invert, #ffffff);
97
- background-color: var(--intergalactic-control-primary-brand, #ff642d);
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));
98
98
 
99
99
  &:hover {
100
- color: var(--intergalactic-text-primary-invert, #ffffff);
101
- background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
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));
102
102
  }
103
103
 
104
104
  &:active,
105
105
  &[active] {
106
- color: var(--intergalactic-text-primary-invert, #ffffff);
107
- background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
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));
108
108
  }
109
109
  }
110
110
 
111
111
  SButton[theme='primary-warning'] {
112
- color: var(--intergalactic-text-primary-invert, #ffffff);
113
- background-color: var(--intergalactic-control-primary-brand, #ff642d);
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));
114
114
 
115
115
  &:hover {
116
- color: var(--intergalactic-text-primary-invert, #ffffff);
117
- background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
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));
118
118
  }
119
119
 
120
120
  &:active,
121
121
  &[active] {
122
- color: var(--intergalactic-text-primary-invert, #ffffff);
123
- background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
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));
124
124
  }
125
125
  }
126
126
 
127
127
  SButton[theme='primary-danger'] {
128
- color: var(--intergalactic-text-primary-invert, #ffffff);
129
- background-color: var(--intergalactic-control-primary-critical, #ff4953);
128
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
129
+ background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
130
130
 
131
131
  &:hover {
132
- color: var(--intergalactic-text-primary-invert, #ffffff);
133
- background-color: var(--intergalactic-control-primary-critical-hover, #d1002f);
132
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
133
+ background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
134
134
  }
135
135
 
136
136
  &:active,
137
137
  &[active] {
138
- color: var(--intergalactic-text-primary-invert, #ffffff);
139
- background-color: var(--intergalactic-control-primary-critical-active, #8e0016);
138
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
139
+ background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
140
140
  }
141
141
  }
142
142
 
143
143
  SButton[theme='primary-invert'] {
144
- color: var(--intergalactic-text-primary, #191b23);
145
- background-color: var(--intergalactic-control-primary-invert, #ffffff);
144
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
145
+ background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));
146
146
 
147
147
  &:hover {
148
- color: var(--intergalactic-text-primary, #191b23);
149
- background-color: var(--intergalactic-control-primary-invert-hover, #f4f5f9);
148
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
149
+ background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
150
150
  }
151
151
 
152
152
  &:active,
153
153
  &[active] {
154
- color: var(--intergalactic-text-primary, #191b23);
155
- background-color: var(--intergalactic-control-primary-invert-active, #e0e1e9);
154
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
155
+ background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
156
156
  }
157
157
  }
158
158
 
159
159
  SButton[theme='secondary-muted'] {
160
- color: var(--intergalactic-text-secondary, #6c6e79);
161
- border-color: var(--intergalactic-border-primary, #c4c7cf);
162
- background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
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));
163
163
 
164
164
  &:hover {
165
165
  background-color: var(--intergalactic-control-secondary-neutral-hover,
166
- rgba(138, 142, 155, 0.2));
167
- color: var(--intergalactic-text-primary, #191b23);
166
+ oklch(0.176 0.033 175.6 / 0.056));
167
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
168
168
  }
169
169
 
170
170
  &:active,
171
171
  &[active] {
172
172
  background-color: var(--intergalactic-control-secondary-neutral-active,
173
- rgba(138, 142, 155, 0.3));
174
- color: var(--intergalactic-text-primary, #191b23);
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
175
  }
176
176
  }
177
177
 
178
178
  SButton[theme='secondary-info'] {
179
- background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
180
- color: var(--intergalactic-text-link, #006dca);
181
- border-color: var(--intergalactic-control-primary-info, #008ff8);
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
182
 
183
183
  &:hover {
184
- color: var(--intergalactic-text-link, #006dca);
185
- background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
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
186
  }
187
187
 
188
188
  &:active,
189
189
  &[active] {
190
- color: var(--intergalactic-text-link, #006dca);
191
- background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
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));
192
192
  }
193
193
  }
194
194
 
195
195
  SButton[theme='secondary-invert'] {
196
- color: var(--intergalactic-text-primary-invert, #ffffff);
197
- border-color: var(--intergalactic-border-primary-invert, #ffffff);
198
- background-color: var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05));
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));
198
+ background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
199
199
 
200
200
  &:hover {
201
- color: var(--intergalactic-text-primary-invert, #ffffff);
202
- background-color: var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1));
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));
203
203
  }
204
204
 
205
205
  &:active,
206
206
  &[active] {
207
- color: var(--intergalactic-text-primary-invert, #ffffff);
207
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
208
208
  background-color: var(--intergalactic-control-secondary-invert-active,
209
- rgba(255, 255, 255, 0.3));
209
+ oklch(0.983 0.03 140 / 0.183));
210
210
  }
211
211
  }
212
212
 
213
213
  SButton[theme='tertiary-info'] {
214
- color: var(--intergalactic-text-link, #006dca);
215
- background-color: var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0));
214
+ color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
215
+ background-color: var(--intergalactic-control-tertiary-info, transparent);
216
216
 
217
217
  &:hover {
218
- color: var(--intergalactic-text-link, #006dca);
219
- background-color: var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2));
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));
220
220
  }
221
221
 
222
222
  &:active,
223
223
  &[active] {
224
- color: var(--intergalactic-text-link, #006dca);
225
- background-color: var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3));
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));
226
226
  }
227
227
  }
228
228
 
229
229
  SButton[theme='tertiary-muted'] {
230
- color: var(--intergalactic-text-secondary, #6c6e79);
231
- background-color: var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0));
230
+ color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
231
+ background-color: var(--intergalactic-control-tertiary-neutral, transparent);
232
232
 
233
233
  &:hover {
234
- background-color: var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));
235
- color: var(--intergalactic-text-primary, #191b23);
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));
236
236
  }
237
237
 
238
238
  &:active,
239
239
  &[active] {
240
240
  background-color: var(--intergalactic-control-tertiary-neutral-active,
241
- rgba(138, 142, 155, 0.3));
242
- color: var(--intergalactic-text-primary, #191b23);
241
+ oklch(0.176 0.033 175.7 / 0.084));
242
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
243
243
  }
244
244
  }
245
245
 
246
246
  SButton[theme='tertiary-invert'] {
247
- color: var(--intergalactic-text-primary-invert, #ffffff);
248
- background-color: var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0));
247
+ color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
248
+ background-color: var(--intergalactic-control-tertiary-invert, transparent);
249
249
 
250
250
  &:hover {
251
- color: var(--intergalactic-text-primary-invert, #ffffff);
252
- background-color: var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1));
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));
253
253
  }
254
254
 
255
255
  &:active,
256
256
  &[active] {
257
- color: var(--intergalactic-text-primary-invert, #ffffff);
258
- background-color: var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3));
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));
259
259
  }
260
260
  }
261
261
 
@@ -282,12 +282,12 @@ SButton[neighborLocation='left'] {
282
282
  position: relative;
283
283
 
284
284
  &:after {
285
- background-color: var(--intergalactic-border-primary-invert, #ffffff);
285
+ background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
286
286
  }
287
287
 
288
288
  &[theme='secondary-muted'] {
289
289
  &:after {
290
- background-color: var(--intergalactic-border-primary, #c4c7cf);
290
+ background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
291
291
  }
292
292
  }
293
293
  }
package/src/component/ButtonLink/ButtonLink.type.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { BoxProps } from '@semcore/base-components';
2
2
  import type { Intergalactic } from '@semcore/core';
3
3
  import type { LinkProps } from '@semcore/link';
4
- import type { TextProps } from '@semcore/typography';
4
+ import type { NSText } from '@semcore/typography';
5
5
 
6
6
  import type { ButtonContext } from '../Button/Button.type';
7
7
 
@@ -13,7 +13,7 @@ export type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkPr
13
13
  use?: 'primary' | 'secondary';
14
14
  };
15
15
 
16
- export type ButtonLinkTextProps = TextProps;
16
+ export type ButtonLinkTextProps = NSText.Props;
17
17
 
18
18
  export type ButtonLinkAddonProps = BoxProps;
19
19
 
package/src/component/ButtonLink/buttonLink.shadow.css CHANGED
@@ -4,22 +4,22 @@ SButtonLink {
4
4
  }
5
5
 
6
6
  SButtonLink[use='primary']:not([color]) {
7
- color: var(--intergalactic-text-link, #006dca);
7
+ color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
8
8
 
9
9
  &[active],
10
10
  &:active,
11
11
  &:hover {
12
- color: var(--intergalactic-text-link-hover-active, #044792);
12
+ color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
13
13
  }
14
14
  }
15
15
 
16
16
  SButtonLink[use='secondary']:not([color]) {
17
- color: var(--intergalactic-text-hint, #6c6e79);
17
+ color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
18
18
 
19
19
  &[active],
20
20
  &:active,
21
21
  &:hover {
22
- color: var(--intergalactic-text-hint-hover-active, #484a54);
22
+ color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
23
23
  }
24
24
  }
25
25