use-wc 1.0.0-pre.36 → 1.0.0-pre.38

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/dist/default-tokens.css +33 -31
  2. package/dist/design-system.css +28 -25
  3. package/package.json +1 -1
package/dist/default-tokens.css CHANGED
@@ -115,7 +115,7 @@
115
115
 
116
116
  :root {
117
117
  /* Layout */
118
- --usewc-layout-document-text-size: var(--usewc-font-size-16);
118
+ --usewc-font-document-size: var(--usewc-font-size-16);
119
119
  --usewc-color-document-text: var(--usewc-color-gray-700);
120
120
  --usewc-color-document-text-muted: var(--usewc-color-gray-500);
121
121
  --usewc-color-document-background: var(--usewc-color-white);
@@ -128,14 +128,14 @@
128
128
  --usewc-font-input-family: inherit;
129
129
 
130
130
  /* Controls */
131
- /* - Focus ring */
132
- --usewc-color-focus-ring: var(--usewc-color-blue-500);
133
- --usewc-layout-focus-ring-size: var(--usewc-space-2);
134
- --usewc-layout-focus-ring-offset-outside: var(--usewc-space-2);
135
- --usewc-layout-focus-ring-offset-inside: var(--usewc-space-none);
136
- --usewc-effect-focus-ring-style: solid;
137
- --usewc-transition-focus-ring: outline 0.05s ease-in-out;
138
- --usewc-effect-control-opacity-disabled: 0.5;
131
+ /* - Outline (focus indicator) */
132
+ --usewc-color-outline: var(--usewc-color-blue-500);
133
+ --usewc-effect-outline-size: var(--usewc-space-2);
134
+ --usewc-effect-outline-offset: var(--usewc-space-2);
135
+ --usewc-effect-outline-offset-flush: var(--usewc-space-none);
136
+ --usewc-effect-outline-style: solid;
137
+ --usewc-effect-outline-transition: outline 0.05s ease-in-out;
138
+ --usewc-effect-form-opacity-disabled: 0.5;
139
139
  /* - Link */
140
140
  --usewc-color-link-text-static: var(--usewc-color-blue-500);
141
141
  --usewc-color-link-text-hover: var(--usewc-color-blue-600);
@@ -143,7 +143,6 @@
143
143
  --usewc-color-link-text-visited: var(--usewc-color-indigo-500);
144
144
  --usewc-color-link-text-visited-hover: var(--usewc-color-indigo-600);
145
145
  --usewc-color-link-text-visited-active: var(--usewc-color-indigo-700);
146
- --usewc-color-link-text-visited-visited: var(--usewc-color-indigo-500);
147
146
  --usewc-effect-link-text-decoration: underline;
148
147
 
149
148
  /* Form */
@@ -175,7 +174,7 @@
175
174
  --usewc-color-input-segment-background-focus: var(--usewc-color-blue-100);
176
175
  --usewc-color-input-segment-text-focus: var(--usewc-color-gray-700);
177
176
  --usewc-effect-dropdown-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
178
- --usewc-effect-dropdown-trigger-side-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12L8.5 18.9282L8.5 5.0718Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
177
+ --usewc-effect-dropdown-trigger-nested-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12L8.5 18.9282L8.5 5.0718Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
179
178
  --usewc-effect-dropdown-trigger-background-size: 1em;
180
179
  --usewc-effect-dropdown-trigger-background-blend-mode: difference;
181
180
  --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
@@ -191,7 +190,6 @@
191
190
  /* - Effect */
192
191
  --usewc-effect-input-border-style: solid;
193
192
  --usewc-effect-input-border-radius: var(--usewc-effect-border-radius-4);
194
- --usewc-effect-input-opacity-disabled: 0.5;
195
193
  /* - Font */
196
194
  --usewc-font-input-size: var(--usewc-font-size-16);
197
195
 
@@ -267,20 +265,24 @@
267
265
  --usewc-color-button-danger-text-static-auxiliary: var(--usewc-color-red-500);
268
266
  --usewc-color-button-danger-text-hover: var(--usewc-color-white);
269
267
  /* -- Cancel color */
270
- --usewc-color-button-cancel-background-static: transaprent;
271
- --usewc-color-button-cancel-background-static-auxiliary: transparent;
272
- --usewc-color-button-cancel-background-hover: var(--usewc-color-gray-100);
273
- --usewc-color-button-cancel-background-active: var(--usewc-color-gray-200);
274
- --usewc-color-button-cancel-border-static: transparent;
275
- --usewc-color-button-cancel-border-static-auxiliary: var(--usewc-color-gray-100);
276
- --usewc-color-button-cancel-border-hover: transparent;
277
- --usewc-color-button-cancel-border-active: transparent;
278
- --usewc-color-button-cancel-text-static: var(--usewc-color-gray-700);
279
- --usewc-color-button-cancel-text-static-auxiliary: var(--usewc-color-gray-700);
280
- --usewc-color-button-cancel-text-hover: var(--usewc-color-gray-700);
281
- --usewc-color-button-cancel-text-active: var(--usewc-color-gray-700);
268
+ --usewc-color-button-clear-background-static: transparent;
269
+ --usewc-color-button-clear-background-static-auxiliary: transparent;
270
+ --usewc-color-button-clear-background-hover: var(--usewc-color-gray-100);
271
+ --usewc-color-button-clear-background-active: var(--usewc-color-gray-200);
272
+ --usewc-color-button-clear-border-static: transparent;
273
+ --usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-gray-100);
274
+ --usewc-color-button-clear-border-hover: transparent;
275
+ --usewc-color-button-clear-border-active: transparent;
276
+ --usewc-color-button-clear-text-static: var(--usewc-color-gray-700);
277
+ --usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-gray-700);
278
+ --usewc-color-button-clear-text-hover: var(--usewc-color-gray-700);
279
+ --usewc-color-button-clear-text-active: var(--usewc-color-gray-700);
282
280
  /* - Layout */
283
281
  --usewc-layout-button-border: var(--usewc-space-1);
282
+ --usewc-layout-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
283
+ calc(100% + var(--usewc-layout-button-border) * 2);
284
+ --usewc-layout-button-background-position: center;
285
+ --usewc-layout-button-background-repeat: no-repeat;
284
286
  --usewc-layout-button-line-height: var(--usewc-line-height-24);
285
287
  /* - Effect */
286
288
  --usewc-effect-button-border-radius: var(--usewc-effect-border-radius-4);
@@ -357,7 +359,7 @@
357
359
  --usewc-color-document-text-muted: var(--usewc-color-gray-300);
358
360
  --usewc-color-document-background: var(--usewc-color-gray-800);
359
361
  --usewc-color-canvas-background: var(--usewc-color-black);
360
- --usewc-color-focus-ring: var(--usewc-color-blue-200);
362
+ --usewc-color-outline: var(--usewc-color-blue-200);
361
363
  --usewc-color-input-background-static: oklch(from var(--usewc-color-gray-100) l c h / 0.025);
362
364
  --usewc-color-input-border-static: var(--usewc-color-gray-600);
363
365
  --usewc-color-input-text-static: var(--usewc-color-gray-200);
@@ -377,12 +379,12 @@
377
379
  --usewc-color-button-base-border-hover: var(--usewc-color-gray-500);
378
380
  --usewc-color-button-base-border-active: var(--usewc-color-gray-400);
379
381
  --usewc-color-button-base-border-static-auxiliary: var(--usewc-color-gray-600);
380
- --usewc-color-button-cancel-text-static: var(--usewc-color-gray-200);
381
- --usewc-color-button-cancel-text-hover: var(--usewc-color-gray-200);
382
- --usewc-color-button-cancel-background-hover: var(--usewc-color-gray-700);
383
- --usewc-color-button-cancel-border-hover: var(--usewc-color-gray-700);
384
- --usewc-color-button-cancel-text-static-auxiliary: var(--usewc-color-gray-300);
385
- --usewc-color-button-cancel-border-static-auxiliary: var(--usewc-color-gray-600);
382
+ --usewc-color-button-clear-text-static: var(--usewc-color-gray-200);
383
+ --usewc-color-button-clear-text-hover: var(--usewc-color-gray-200);
384
+ --usewc-color-button-clear-background-hover: var(--usewc-color-gray-700);
385
+ --usewc-color-button-clear-border-hover: var(--usewc-color-gray-700);
386
+ --usewc-color-button-clear-text-static-auxiliary: var(--usewc-color-gray-300);
387
+ --usewc-color-button-clear-border-static-auxiliary: var(--usewc-color-gray-600);
386
388
  --usewc-color-button-primary-background-static: var(--usewc-color-blue-400);
387
389
  --usewc-color-button-primary-background-hover: var(--usewc-color-blue-500);
388
390
  --usewc-color-button-primary-background-active: var(--usewc-color-blue-600);
package/dist/design-system.css CHANGED
@@ -11,7 +11,7 @@
11
11
  color: var(--usewc-color-document-text);
12
12
  background-color: var(--usewc-color-document-background);
13
13
  font-family: var(--usewc-font-document-family);
14
- font-size: var(--usewc-layout-document-text-size);
14
+ font-size: var(--usewc-font-document-size);
15
15
  }
16
16
 
17
17
  :is(button, a, details summary, use-widget):not([data-appear-as="native"]):focus-visible,
@@ -19,9 +19,9 @@
19
19
  input[type="file"]:not([data-appear-as="native"]):focus-visible,
20
20
  use-dropdown:not([data-appear-as="native"])::part(trigger):focus-visible,
21
21
  [data-appear-as="input"]:has(input:focus) {
22
- outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
23
- outline-offset: var(--usewc-layout-focus-ring-offset-outside);
24
- transition: var(--usewc-transition-focus-ring);
22
+ outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
23
+ outline-offset: var(--usewc-effect-outline-offset);
24
+ transition: var(--usewc-effect-outline-transition);
25
25
  }
26
26
 
27
27
  :is(
@@ -54,13 +54,13 @@
54
54
 
55
55
  &:is(:focus, :has(input:focus), :focus-within) {
56
56
  border-color: var(--usewc-color-input-border-focus);
57
- outline-offset: var(--usewc-layout-focus-ring-offset-inside);
57
+ outline-offset: var(--usewc-effect-outline-offset-flush);
58
58
  }
59
59
 
60
60
  &:disabled,
61
61
  &[aria-disabled="true"],
62
62
  &:has(:disabled, [aria-disabled="true"]) {
63
- opacity: var(--usewc-effect-control-opacity-disabled);
63
+ opacity: var(--usewc-effect-form-opacity-disabled);
64
64
  pointer-events: none;
65
65
  }
66
66
 
@@ -140,7 +140,7 @@
140
140
  }
141
141
 
142
142
  &:disabled {
143
- opacity: var(--usewc-effect-control-opacity-disabled);
143
+ opacity: var(--usewc-effect-form-opacity-disabled);
144
144
  pointer-events: none;
145
145
  }
146
146
 
@@ -251,6 +251,9 @@
251
251
  cursor: default;
252
252
  color: var(--usewc-theme-color-button-text-static);
253
253
  background: var(--usewc-theme-color-button-background-static);
254
+ background-size: var(--usewc-layout-button-background-size);
255
+ background-position: var(--usewc-layout-button-background-position);
256
+ background-repeat: var(--usewc-layout-button-background-repeat);
254
257
  border: var(--usewc-layout-button-border) var(--usewc-effect-input-border-style)
255
258
  var(--usewc-theme-color-button-border-static);
256
259
  }
@@ -281,7 +284,7 @@
281
284
 
282
285
  &:disabled,
283
286
  &[aria-disabled="true"] {
284
- opacity: var(--usewc-effect-control-opacity-disabled);
287
+ opacity: var(--usewc-effect-form-opacity-disabled);
285
288
  pointer-events: none;
286
289
  }
287
290
 
@@ -319,21 +322,21 @@
319
322
  --usewc-theme-color-button-border-active: var(--usewc-color-button-danger-border-active);
320
323
  }
321
324
 
322
- &.cancel {
323
- --usewc-theme-color-button-text-static: var(--usewc-color-button-cancel-text-static);
324
- --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-cancel-text-static-auxiliary);
325
- --usewc-theme-color-button-background-static: var(--usewc-color-button-cancel-background-static);
325
+ &.clear {
326
+ --usewc-theme-color-button-text-static: var(--usewc-color-button-clear-text-static);
327
+ --usewc-theme-color-button-text-static-auxiliary: var(--usewc-color-button-clear-text-static-auxiliary);
328
+ --usewc-theme-color-button-background-static: var(--usewc-color-button-clear-background-static);
326
329
  --usewc-theme-color-button-background-static-auxiliary: var(
327
- --usewc-color-button-cancel-background-static-auxiliary
330
+ --usewc-color-button-clear-background-static-auxiliary
328
331
  );
329
- --usewc-theme-color-button-border-static: var(--usewc-color-button-cancel-border-static);
330
- --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-cancel-border-static-auxiliary);
331
- --usewc-theme-color-button-text-hover: var(--usewc-color-button-cancel-text-hover);
332
- --usewc-theme-color-button-background-hover: var(--usewc-color-button-cancel-background-hover);
333
- --usewc-theme-color-button-border-hover: var(--usewc-color-button-cancel-border-hover);
334
- --usewc-theme-color-button-text-active: var(--usewc-color-button-cancel-text-active);
335
- --usewc-theme-color-button-background-active: var(--usewc-color-button-cancel-background-active);
336
- --usewc-theme-color-button-border-active: var(--usewc-color-button-cancel-border-active);
332
+ --usewc-theme-color-button-border-static: var(--usewc-color-button-clear-border-static);
333
+ --usewc-theme-color-button-border-static-auxiliary: var(--usewc-color-button-clear-border-static-auxiliary);
334
+ --usewc-theme-color-button-text-hover: var(--usewc-color-button-clear-text-hover);
335
+ --usewc-theme-color-button-background-hover: var(--usewc-color-button-clear-background-hover);
336
+ --usewc-theme-color-button-border-hover: var(--usewc-color-button-clear-border-hover);
337
+ --usewc-theme-color-button-text-active: var(--usewc-color-button-clear-text-active);
338
+ --usewc-theme-color-button-background-active: var(--usewc-color-button-clear-background-active);
339
+ --usewc-theme-color-button-border-active: var(--usewc-color-button-clear-border-active);
337
340
  }
338
341
 
339
342
  &.auxiliary:not(:is(:hover, :focus-visible, :active)) {
@@ -544,7 +547,7 @@
544
547
  }
545
548
 
546
549
  use-dropdown use-dropdown::part(trigger) {
547
- background-image: var(--usewc-effect-dropdown-trigger-side-background-image);
550
+ background-image: var(--usewc-effect-dropdown-trigger-nested-background-image);
548
551
  background-position: right center;
549
552
  }
550
553
 
@@ -619,9 +622,9 @@
619
622
  &:focus-visible,
620
623
  &::part(trigger):focus-visible {
621
624
  background-color: var(--usewc-color-popover-menu-item-background-static);
622
- outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
623
- outline-offset: var(--usewc-layout-focus-ring-offset-inside);
624
- transition: var(--usewc-transition-focus-ring);
625
+ outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
626
+ outline-offset: var(--usewc-effect-outline-offset-flush);
627
+ transition: var(--usewc-effect-outline-transition);
625
628
  color: var(--usewc-color-popover-menu-item-text-focus);
626
629
  }
627
630
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-wc",
3
- "version": "1.0.0-pre.36",
3
+ "version": "1.0.0-pre.38",
4
4
  "private": false,
5
5
  "homepage": "https://usewc.com",
6
6
  "bugs": "https://github.com/dang-rabbits/use-wc/issues",