@neovici/cosmoz-button 2.0.0 → 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 (3) hide show
  1. package/README.md +4 -4
  2. package/dist/styles.js +25 -42
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -85,10 +85,10 @@ import '@neovici/cosmoz-button';
85
85
 
86
86
  | Size | Height | Icon-only Size | Font Size |
87
87
  | ---- | ------ | -------------- | --------- |
88
- | `sm` | 36px | 28px | 14px |
89
- | `md` | 40px | 32px | 14px |
90
- | `lg` | 44px | 36px | 16px |
91
- | `xl` | 48px | 40px | 16px |
88
+ | `sm` | 28px | 28px | 12px |
89
+ | `md` | 32px | 32px | 14px |
90
+ | `lg` | 36px | 36px | 14px |
91
+ | `xl` | 40px | 40px | 14px |
92
92
 
93
93
  ## Icons
94
94
 
package/dist/styles.js CHANGED
@@ -1,4 +1,3 @@
1
- import { skeumorphicHighlight } from '@neovici/cosmoz-tokens/skeumorphic';
2
1
  import { css } from '@pionjs/pion';
3
2
  /**
4
3
  * Button styles using cosmoz-tokens design system
@@ -29,11 +28,11 @@ export const styles = css `
29
28
  * ======================================== */
30
29
 
31
30
  :host([size='sm']) .button {
32
- height: 36px;
33
- padding: calc(var(--cz-spacing) * 2) calc(var(--cz-spacing) * 3.5);
34
- font-size: var(--cz-text-sm);
35
- line-height: var(--cz-text-sm-line-height);
36
- border-radius: var(--cz-radius-md);
31
+ height: 28px;
32
+ padding: calc(var(--cz-spacing) * 1) calc(var(--cz-spacing) * 2.5);
33
+ font-size: var(--cz-text-xs);
34
+ line-height: var(--cz-text-xs-line-height);
35
+ border-radius: var(--cz-radius-sm);
37
36
  }
38
37
 
39
38
  :host([size='sm']) ::slotted(svg) {
@@ -42,18 +41,18 @@ export const styles = css `
42
41
  }
43
42
 
44
43
  :host([size='lg']) .button {
45
- height: 44px;
46
- padding: calc(var(--cz-spacing) * 2.5) calc(var(--cz-spacing) * 4.5);
47
- font-size: var(--cz-text-base);
48
- line-height: var(--cz-text-base-line-height);
44
+ height: 36px;
45
+ padding: calc(var(--cz-spacing) * 2) calc(var(--cz-spacing) * 3.5);
46
+ font-size: var(--cz-text-sm);
47
+ line-height: var(--cz-text-sm-line-height);
49
48
  border-radius: var(--cz-radius-md);
50
49
  }
51
50
 
52
51
  :host([size='xl']) .button {
53
- height: 48px;
54
- padding: calc(var(--cz-spacing) * 3) calc(var(--cz-spacing) * 5);
55
- font-size: var(--cz-text-base);
56
- line-height: var(--cz-text-base-line-height);
52
+ height: 40px;
53
+ padding: calc(var(--cz-spacing) * 2.5) calc(var(--cz-spacing) * 4);
54
+ font-size: var(--cz-text-sm);
55
+ line-height: var(--cz-text-sm-line-height);
57
56
  border-radius: var(--cz-radius-md);
58
57
  }
59
58
 
@@ -109,7 +108,7 @@ export const styles = css `
109
108
  gap: 8px;
110
109
  cursor: pointer;
111
110
  font-family: var(--cz-font-body);
112
- font-weight: var(--cz-font-weight-semibold);
111
+ font-weight: var(--cz-font-weight-medium);
113
112
  text-decoration: none;
114
113
  transition:
115
114
  background-color 0.15s ease,
@@ -122,16 +121,15 @@ export const styles = css `
122
121
  text-align: center;
123
122
 
124
123
  /* Medium (md) default size */
125
- height: 40px;
126
- padding: calc(var(--cz-spacing) * 2.5) calc(var(--cz-spacing) * 4);
124
+ height: 32px;
125
+ padding: calc(var(--cz-spacing) * 1.5) calc(var(--cz-spacing) * 3);
127
126
  font-size: var(--cz-text-sm);
128
127
  line-height: var(--cz-text-sm-line-height);
129
128
  border-radius: var(--cz-radius-md);
130
129
 
131
- ${skeumorphicHighlight}
132
130
  background-color: var(--cz-color-bg-brand-solid);
133
131
  color: var(--cz-color-text-on-brand);
134
- box-shadow: var(--cz-shadow-xs-skeumorphic);
132
+ box-shadow: var(--cz-shadow-xs);
135
133
 
136
134
  &:hover {
137
135
  background-color: var(--cz-color-bg-brand-solid-hover);
@@ -147,7 +145,7 @@ export const styles = css `
147
145
 
148
146
  &:focus-visible {
149
147
  outline: none;
150
- box-shadow: var(--cz-shadow-xs-skeumorphic), var(--cz-focus-ring);
148
+ box-shadow: var(--cz-shadow-xs), var(--cz-focus-ring);
151
149
  }
152
150
  }
153
151
 
@@ -158,6 +156,9 @@ export const styles = css `
158
156
  :host([variant='secondary']) .button {
159
157
  background-color: var(--cz-color-bg-primary);
160
158
  color: var(--cz-color-text-secondary);
159
+ box-shadow:
160
+ inset 0 0 0 1px var(--cz-color-border-primary),
161
+ var(--cz-shadow-xs);
161
162
 
162
163
  &:hover {
163
164
  background-color: var(--cz-color-bg-primary-hover);
@@ -169,7 +170,7 @@ export const styles = css `
169
170
  }
170
171
 
171
172
  &:focus-visible {
172
- box-shadow: var(--cz-shadow-xs-skeumorphic), var(--cz-focus-ring);
173
+ box-shadow: var(--cz-shadow-xs), var(--cz-focus-ring);
173
174
  }
174
175
  }
175
176
 
@@ -178,10 +179,6 @@ export const styles = css `
178
179
  color: var(--cz-color-text-secondary);
179
180
  box-shadow: none;
180
181
 
181
- &::before {
182
- display: none;
183
- }
184
-
185
182
  &:hover {
186
183
  background-color: var(--cz-color-bg-primary-hover);
187
184
  color: var(--cz-color-text-secondary-hover);
@@ -208,7 +205,7 @@ export const styles = css `
208
205
  }
209
206
 
210
207
  &:focus-visible {
211
- box-shadow: var(--cz-shadow-xs-skeumorphic), var(--cz-focus-ring-error);
208
+ box-shadow: var(--cz-shadow-xs), var(--cz-focus-ring-error);
212
209
  }
213
210
  }
214
211
 
@@ -219,10 +216,6 @@ export const styles = css `
219
216
  padding: 0;
220
217
  height: auto;
221
218
 
222
- &::before {
223
- display: none;
224
- }
225
-
226
219
  &:hover {
227
220
  text-decoration: underline;
228
221
  color: var(--cz-color-text-brand-hover);
@@ -265,10 +258,6 @@ export const styles = css `
265
258
 
266
259
  :host([aria-pressed='true']) .button {
267
260
  box-shadow: var(--cz-shadow-pressed-3d);
268
-
269
- &::before {
270
- display: none;
271
- }
272
261
  }
273
262
 
274
263
  :host([variant='secondary'][aria-pressed='true']) .button {
@@ -307,8 +296,7 @@ export const styles = css `
307
296
  :host([variant='primary'][aria-pressed='true']) .button {
308
297
  background-color: var(--cz-color-bg-brand-solid);
309
298
  color: var(--cz-color-text-on-brand);
310
- box-shadow:
311
- var(--cz-shadow-xs-skeumorphic), var(--cz-shadow-pressed-3d-solid);
299
+ box-shadow: var(--cz-shadow-xs), var(--cz-shadow-pressed-3d-solid);
312
300
 
313
301
  &:hover {
314
302
  background-color: var(--cz-color-bg-brand-solid-hover);
@@ -318,8 +306,7 @@ export const styles = css `
318
306
  :host([variant='destructive'][aria-pressed='true']) .button {
319
307
  background-color: var(--cz-color-bg-error-solid);
320
308
  color: var(--cz-color-text-on-brand);
321
- box-shadow:
322
- var(--cz-shadow-xs-skeumorphic), var(--cz-shadow-pressed-3d-solid);
309
+ box-shadow: var(--cz-shadow-xs), var(--cz-shadow-pressed-3d-solid);
323
310
 
324
311
  &:hover {
325
312
  background-color: var(--cz-color-bg-error-solid-hover);
@@ -344,10 +331,6 @@ export const styles = css `
344
331
  :host([disabled]) .button {
345
332
  cursor: not-allowed;
346
333
  pointer-events: none;
347
-
348
- &::before {
349
- display: none;
350
- }
351
334
  }
352
335
 
353
336
  :host([disabled]) .button,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-button",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "A customizable button web component built with Untitled UI design tokens",
5
5
  "keywords": [
6
6
  "web-components",
@@ -58,7 +58,7 @@
58
58
  "devDependencies": {
59
59
  "@changesets/cli": "^3.0.3",
60
60
  "@fontsource-variable/geist": "^5.3.0",
61
- "@neovici/cfg": "^2.13.0",
61
+ "@neovici/cfg": "^2.15.0",
62
62
  "@neovici/testing": "^2.0.0",
63
63
  "@open-wc/testing": "^4.0.0",
64
64
  "@playwright/test": "1.60.0",