winduum 0.6.0 → 0.7.0-next.1

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 (49) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/tailwind.css +1 -1
  3. package/package.json +1 -1
  4. package/plugin/tailwind.cjs +198 -163
  5. package/plugin/tailwind.d.ts +19 -0
  6. package/plugin/tailwind.js +30 -184
  7. package/plugin/utilities/color.js +69 -0
  8. package/plugin/utilities/common.js +80 -0
  9. package/plugin/utilities/divide-gap.js +20 -0
  10. package/plugin/utilities/dot.js +11 -0
  11. package/plugin/utilities/flex.js +12 -0
  12. package/src/base/defaults.css +1 -1
  13. package/src/base/theme/default.css +0 -2
  14. package/src/components/compare.css +10 -11
  15. package/src/components/dialog/content.css +1 -1
  16. package/src/components/dialog/default.css +9 -7
  17. package/src/components/field.css +1 -1
  18. package/src/ui/badge/bordered.css +4 -3
  19. package/src/ui/badge/default.css +7 -11
  20. package/src/ui/badge/muted.css +2 -2
  21. package/src/ui/btn/bordered.css +6 -5
  22. package/src/ui/btn/default.css +17 -11
  23. package/src/ui/btn/ghosted.css +4 -4
  24. package/src/ui/btn/gradient-bordered.css +9 -7
  25. package/src/ui/btn/gradient.css +3 -1
  26. package/src/ui/btn/hover-fill.css +4 -4
  27. package/src/ui/btn/interactive.css +17 -9
  28. package/src/ui/btn/loading.css +1 -1
  29. package/src/ui/btn/muted.css +4 -4
  30. package/src/ui/btn/raised.css +6 -10
  31. package/src/ui/check/default.css +38 -24
  32. package/src/ui/control/default.css +38 -14
  33. package/src/ui/control/file.css +11 -8
  34. package/src/ui/control/select.css +2 -2
  35. package/src/ui/group/default.css +9 -4
  36. package/src/ui/info.css +1 -1
  37. package/src/ui/link/interactive.css +5 -7
  38. package/src/ui/notice/default.css +15 -6
  39. package/src/ui/progress/default.css +6 -7
  40. package/src/ui/range/default-props.css +3 -3
  41. package/src/ui/range/default.css +48 -35
  42. package/src/ui/range/multi.css +12 -33
  43. package/src/ui/range/vertical.css +3 -4
  44. package/src/ui/switch/default.css +32 -24
  45. package/src/ui/text/default.css +5 -5
  46. package/src/ui/title/default.css +1 -1
  47. package/src/utilities/ripple.css +4 -1
  48. package/src/utilities/skeleton.css +6 -4
  49. package/tailwind.config.js +5 -1
package/src/ui/range/default-props.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root, :host {
2
+ --ui-range-track-height: 0.375rem;
2
3
  --ui-range-thumb-size: 1.125rem;
3
4
  --ui-range-thumb-border-width: 0;
4
- --ui-range-track-height: 0.375rem;
5
- --ui-range-track-outline-width: 2px;
6
- --ui-range-track-outline-opacity: 50%;
5
+ --ui-range-thumb-outline-width: 2px;
6
+ --ui-range-thumb-focus-outline-opacity: 0.5;
7
7
  }
package/src/ui/range/default.css CHANGED
@@ -2,86 +2,99 @@
2
2
  --ui-range-thumb-bg: var(--color-accent);
3
3
  --ui-range-thumb-border-color: var(--ui-range-thumb-bg);
4
4
  --ui-range-track-bg: var(--color-accent);
5
- --ui-range-bg: color-mix(in var(--space), var(--color-accent) 10%, var(--color-body));
5
+ --ui-range-track: linear-gradient(
6
+ to right,
7
+ var(--ui-range-track-bg) 0%,
8
+ var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
9
+ transparent var(--ui-range-track-start, 0%),
10
+ transparent var(--ui-range-track-end, 100%)
11
+ );
6
12
 
13
+ min-block-size: var(--ui-range-thumb-size);
7
14
  display: grid;
8
- min-height: var(--ui-range-thumb-size);
9
15
 
10
16
  :where(input) {
11
- grid-area: 1/1;
17
+ --tw-bg-space: var(--space);
18
+ --tw-bg-opacity: 0.1;
19
+ --tw-bg-mix: var(--color-body);
20
+
21
+ block-size: var(--ui-range-track-height);
22
+ background-color: color-mix(in var(--tw-bg-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
12
23
  position: relative;
13
- z-index: 1;
24
+ grid-area: 1/1;
14
25
 
15
26
  &::-webkit-slider-runnable-track {
16
27
  block-size: var(--ui-range-track-height);
17
28
  border-radius: var(--rounded-full);
18
- background:
19
- linear-gradient(
20
- to right,
21
- var(--ui-range-track-bg) 0%,
22
- var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
23
- var(--ui-range-bg) var(--ui-range-track-start, 0%),
24
- var(--ui-range-bg) var(--ui-range-track-end, 100%)
25
- );
29
+ background: var(--ui-range-track);
26
30
  }
27
31
 
28
32
  &::-moz-range-track {
29
33
  block-size: var(--ui-range-track-height);
30
34
  border-radius: var(--rounded-full);
31
- background:
32
- linear-gradient(
33
- to right,
34
- var(--ui-range-track-bg) 0%,
35
- var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
36
- var(--ui-range-bg) var(--ui-range-track-start, 0%),
37
- var(--ui-range-bg) var(--ui-range-track-end, 100%)
38
- );
35
+ background: var(--ui-range-track);
39
36
  }
40
37
 
41
38
  &::-webkit-slider-thumb {
42
- appearance: none;
39
+ --tw-outline-opacity: var(--ui-range-thumb-outline-opacity, 0);
40
+ --tw-outline-space: var(--space);
41
+
43
42
  width: var(--ui-range-thumb-size);
44
43
  height: var(--ui-range-thumb-size);
45
44
  background-color: var(--ui-range-thumb-bg);
46
45
  border-radius: var(--rounded-full);
47
46
  border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
48
- cursor: grab;
49
- pointer-events: auto;
50
- outline: var(--ui-range-track-outline-width) solid transparent;
51
- transition: outline-color var(--duration) linear;
47
+ outline: var(--ui-range-thumb-outline-width) solid
48
+ color-mix(
49
+ in var(--tw-outline-space),
50
+ var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
51
+ transparent
52
+ );
52
53
  margin-block-start: calc((var(--ui-range-thumb-size) - var(--ui-range-track-height)) / 2 * -1);
54
+ transition: outline-color var(--duration) linear;
55
+ cursor: var(--ui-range-thumb-cursor, grab);
56
+ appearance: none;
57
+ pointer-events: auto;
53
58
 
54
59
  &:active {
55
- outline-color: color-mix(in var(--space), var(--ui-range-thumb-bg) var(--ui-range-track-outline-opacity), transparent);
56
- cursor: grabbing;
60
+ --ui-range-thumb-cursor: grabbing;
61
+ --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
57
62
  }
58
63
  }
59
64
 
60
65
  &::-moz-range-thumb {
61
- appearance: none;
66
+ --tw-outline-opacity: var(--ui-range-thumb-outline-opacity, 0);
67
+ --tw-outline-space: var(--space);
68
+
62
69
  width: var(--ui-range-thumb-size);
63
70
  height: var(--ui-range-thumb-size);
64
71
  background-color: var(--ui-range-thumb-bg);
65
72
  border-radius: var(--rounded-full);
66
73
  border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
67
- cursor: grab;
68
- pointer-events: auto;
69
- outline: var(--ui-range-track-outline-width) solid transparent;
74
+ outline: var(--ui-range-thumb-outline-width) solid
75
+ color-mix(
76
+ in var(--tw-outline-space),
77
+ var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
78
+ transparent
79
+ );
70
80
  transition: outline-color var(--duration), outline-offset var(--duration);
81
+ cursor: var(--ui-range-thumb-cursor, grab);
82
+ appearance: none;
83
+ pointer-events: auto;
71
84
 
72
85
  &:active {
73
- outline-color: color-mix(in var(--space), var(--ui-range-thumb-bg) var(--ui-range-track-outline-opacity), transparent);
74
- cursor: grabbing;
86
+ --ui-range-thumb-cursor: grabbing;
87
+ --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
75
88
  }
76
89
  }
77
90
 
78
91
  &:focus-visible {
79
92
  &::-webkit-slider-thumb {
80
- outline-color: color-mix(in var(--space), var(--ui-range-thumb-bg) var(--ui-range-track-outline-opacity), transparent);
93
+ --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
81
94
  }
82
95
 
83
96
  &::-moz-range-thumb {
84
- outline-color: color-mix(in var(--space), var(--ui-range-thumb-bg) var(--ui-range-track-outline-opacity), transparent);
97
+ --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
85
98
  }
86
99
  }
87
100
  }
package/src/ui/range/multi.css CHANGED
@@ -1,42 +1,21 @@
1
1
  .ui-range {
2
2
  :where(input) {
3
3
  &:not(:only-of-type) {
4
- pointer-events: none;
5
-
6
- &::-webkit-slider-runnable-track {
7
- background:
8
- linear-gradient(
9
- to right,
10
- var(--ui-range-bg) 0%,
11
- var(--ui-range-bg) var(--ui-range-track-start, 0%),
12
- var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
13
- var(--ui-range-track-bg) var(--ui-range-track-end, 100%),
14
- var(--ui-range-bg) var(--ui-range-track-end, 100%),
15
- var(--ui-range-bg) 100%
16
- );
17
- }
4
+ --ui-range-track:
5
+ linear-gradient(
6
+ to right,
7
+ transparent 0%,
8
+ transparent var(--ui-range-track-start, 0%),
9
+ var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
10
+ var(--ui-range-track-bg) var(--ui-range-track-end, 100%),
11
+ transparent var(--ui-range-track-end, 100%),
12
+ transparent 100%
13
+ );
18
14
 
19
- &::-moz-range-track {
20
- background:
21
- linear-gradient(
22
- to right,
23
- var(--ui-range-bg) 0%,
24
- var(--ui-range-bg) var(--ui-range-track-start, 0%),
25
- var(--ui-range-track-bg) var(--ui-range-track-start, 0%),
26
- var(--ui-range-track-bg) var(--ui-range-track-end, 100%),
27
- var(--ui-range-bg) var(--ui-range-track-end, 100%),
28
- var(--ui-range-bg) 100%
29
- );
30
- }
15
+ pointer-events: none;
31
16
 
32
17
  ~ input {
33
- &::-webkit-slider-runnable-track {
34
- background: transparent;
35
- }
36
-
37
- &::-moz-range-track {
38
- background: transparent;
39
- }
18
+ background: transparent;
40
19
  }
41
20
  }
42
21
  }
package/src/ui/range/vertical.css CHANGED
@@ -1,12 +1,11 @@
1
1
  .ui-range:where(.vertical) {
2
+ min-inline-size: var(--ui-range-thumb-size);
2
3
  container-type: size;
3
- min-width: var(--ui-range-thumb-size);
4
4
 
5
5
  :where(input) {
6
6
  transform: rotate(-90deg);
7
7
  width: 100cqh;
8
- height: 100cqw;
9
- transform-origin: 0 0;
10
- top: 100%;
8
+ inset-block-start: 50%;
9
+ inset-inline-start: calc(50% * -1 + 50cqw);
11
10
  }
12
11
  }
package/src/ui/switch/default.css CHANGED
@@ -1,44 +1,52 @@
1
1
  .ui-switch {
2
- :where(.dark) & {
3
- --ui-switch-bg: var(--color-body-tertiary);
4
- }
5
-
6
2
  display: inline-flex;
7
- gap: var(--ui-switch-gap, 0.75rem);
8
3
  font-weight: var(--ui-switch-font-weight, var(--font-normal));
9
4
  font-size: var(--ui-switch-font-size, var(--text-sm));
10
- line-height: var(--ui-switch-line-height, calc(1em + var(--ui-switch-line-height-ratio, 0.25lh)));
5
+ line-height: var(--ui-switch-line-height, calc(1em + 0.25lh));
11
6
  letter-spacing: var(--ui-switch-letter-spacing, inherit);
7
+ gap: var(--ui-switch-gap, 0.75rem);
12
8
  text-wrap: balance;
13
9
 
10
+ :where(.dark) & {
11
+ --ui-switch-bg: var(--color-body-tertiary);
12
+ }
13
+
14
14
  & :where(a) {
15
15
  color: var(--color-accent);
16
16
  text-decoration: underline;
17
17
  }
18
18
 
19
19
  & :where(input) {
20
+ --tw-outline-opacity: 0;
21
+ --tw-outline-space: var(--space);
22
+
20
23
  display: flex;
21
- width: var(--ui-switch-width);
22
- height: var(--ui-switch-height);
23
- background-color: var(--ui-switch-bg, var(--color-dark));
24
+ inline-size: var(--ui-switch-width);
25
+ block-size: var(--ui-switch-height);
26
+ padding: calc((var(--ui-switch-height) - var(--ui-check-icon-size)) / 2);
24
27
  border-radius: var(--ui-switch-radius, var(--rounded-full));
25
- outline: var(--ui-switch-outline-width, 3px) solid transparent;
26
- outline-offset: 0;
28
+ background-color: var(--ui-switch-bg, var(--color-main));
29
+ outline: var(--ui-switch-outline-width, 2px) solid
30
+ color-mix(
31
+ in var(--tw-outline-space),
32
+ var(--ui-switch-outline-color, var(--color-main)) calc(var(--tw-outline-opacity) * 100%),
33
+ transparent
34
+ );
35
+ outline-offset: var(--ui-switch-outline-offset, 0);
27
36
  transition-property: var(--transition);
28
37
  transition-timing-function: var(--ease-in-out);
29
38
  transition-duration: var(--duration);
30
- flex-shrink: 0;
31
39
  position: relative;
32
- padding: calc((var(--ui-switch-height) - var(--ui-check-icon-size)) / 2);
40
+ flex-shrink: 0;
33
41
 
34
42
  &::before {
35
- content: "";
36
43
  width: var(--ui-check-icon-size);
37
44
  height: var(--ui-check-icon-size);
38
45
  background-color: var(--color-light);
46
+ transition: var(--transition-all);
39
47
  border-radius: inherit;
40
48
  margin-block: auto;
41
- transition: var(--transition-all);
49
+ content: "";
42
50
  }
43
51
 
44
52
  &:where(:required) {
@@ -48,28 +56,28 @@
48
56
  }
49
57
  }
50
58
 
51
- &:disabled {
52
- cursor: not-allowed;
53
- opacity: var(--ui-switch-disabled-opacity, 0.5);
59
+ &:enabled:focus {
60
+ --ui-switch-outline-offset: var(--ui-switch-focus-outline-offset, 0);
61
+ --tw-outline-opacity: 0.4;
54
62
  }
55
63
 
56
- &:focus {
57
- outline-color: color-mix(in var(--space), var(--color-current) var(--ui-switch-outline-opacity, 20%), transparent);
58
- outline-offset: var(--ui-switch-outline-offset, 0);
64
+ &:disabled {
65
+ opacity: var(--ui-switch-disabled-opacity, 0.5);
66
+ cursor: not-allowed;
59
67
  }
60
68
 
61
69
  &:checked {
62
- --color-current: var(--color-accent);
70
+ --ui-switch-outline-color: var(--color-accent);
63
71
  --ui-switch-bg: var(--color-accent);
64
72
 
65
73
  &::before {
66
- margin-left: calc(100% - var(--ui-check-icon-size));
74
+ margin-inline-start: calc(100% - var(--ui-check-icon-size));
67
75
  }
68
76
  }
69
77
 
70
78
  &:indeterminate {
71
79
  &::before {
72
- margin-left: calc(50% - var(--ui-check-icon-size) / 2);
80
+ margin-inline-start: calc(50% - var(--ui-check-icon-size) / 2);
73
81
  }
74
82
  }
75
83
  }
package/src/ui/text/default.css CHANGED
@@ -21,12 +21,12 @@
21
21
 
22
22
  &:hover {
23
23
  @media (hover: hover) and (pointer: fine) {
24
- color: color-mix(in var(--space), var(--color-accent) 70%, transparent);
24
+ color: color-mix(in var(--space), var(--color-accent) 75%, transparent);
25
25
  }
26
26
  }
27
27
 
28
28
  &:focus-visible {
29
- color: color-mix(in var(--space), var(--color-accent) 70%, transparent);
29
+ color: color-mix(in var(--space), var(--color-accent) 75%, transparent);
30
30
  }
31
31
  }
32
32
 
@@ -66,7 +66,7 @@
66
66
  font-family: var(--ui-text-heading-font-family, var(--font-secondary));
67
67
  font-weight: var(--ui-text-heading-font-weight, var(--ui-text-content-bold));
68
68
  font-size: var(--ui-text-heading-font-size);
69
- line-height: var(--ui-text-heading-line-height, calc(1em + var(--ui-text-heading-line-height-ratio, 0.25lh)));
69
+ line-height: var(--ui-text-heading-line-height, calc(1em + 0.25lh));
70
70
  letter-spacing: var(--ui-text-heading-letter-spacing);
71
71
  margin-block: var(--ui-text-heading-my, 1.5em 0.5em);
72
72
  color: var(--ui-text-heading-color, inherit);
@@ -104,12 +104,12 @@
104
104
 
105
105
  & :where(thead) {
106
106
  font-weight: var(--ui-text-content-bold);
107
- border-bottom: 1px solid color-mix(in var(--space), var(--color-current) 7.5%, transparent);
107
+ border-block-end: 1px solid color-mix(in var(--space), currentColor 10%, transparent);
108
108
  }
109
109
 
110
110
  & :where(tbody tr) {
111
111
  &:nth-of-type(even) {
112
- background-color: color-mix(in var(--space), var(--color-current) 5%, transparent);
112
+ background-color: color-mix(in var(--space), currentColor 5%, transparent);
113
113
  }
114
114
  }
115
115
  }
package/src/ui/title/default.css CHANGED
@@ -2,7 +2,7 @@
2
2
  font-family: var(--ui-title-font-family, var(--font-secondary));
3
3
  font-weight: var(--ui-title-font-weight, var(--font-semibold));
4
4
  font-size: var(--ui-title-font-size, var(--text-sm));
5
- line-height: var(--ui-title-line-height, calc(1em + var(--ui-title-line-height-ratio, 0.15lh)));
5
+ line-height: var(--ui-title-line-height, calc(1em + 0.15lh));
6
6
  letter-spacing: var(--ui-title-letter-spacing, 0);
7
7
  text-wrap: balance;
8
8
  }
package/src/utilities/ripple.css CHANGED
@@ -1,6 +1,9 @@
1
1
  .ripple {
2
+ --tw-bg-opacity: 0.4;
3
+ --tw-bg-space: var(--space);
4
+
5
+ background-color: color-mix(in var(--tw-bg-space), var(--color-body) calc(var(--tw-bg-opacity) * 100%), transparent);
2
6
  position: absolute;
3
- background: color-mix(in var(--space), var(--color-body) 40%, transparent);
4
7
  border-radius: 50%;
5
8
  transform: scale(0);
6
9
  animation-duration: 1s;
package/src/utilities/skeleton.css CHANGED
@@ -1,11 +1,13 @@
1
1
  .skeleton {
2
+ --tw-bg-space: var(--space);
3
+
2
4
  background:
3
5
  linear-gradient(
4
6
  270deg,
5
- color-mix(in var(--space), var(--color-body) 50%, var(--color-main)),
6
- color-mix(in var(--space), var(--color-body) 80%, var(--color-main)),
7
- color-mix(in var(--space), var(--color-body) 80%, var(--color-main)),
8
- color-mix(in var(--space), var(--color-body) 50%, var(--color-main))
7
+ color-mix(in var(--tw-bg-space), var(--color-body) 50%, var(--color-main)),
8
+ color-mix(in var(--tw-bg-space), var(--color-body) 80%, var(--color-main)),
9
+ color-mix(in var(--tw-bg-space), var(--color-body) 80%, var(--color-main)),
10
+ color-mix(in var(--tw-bg-space), var(--color-body) 50%, var(--color-main))
9
11
  );
10
12
  background-size: 400% 100%;
11
13
  animation: skeleton-wave 1.5s linear infinite;
package/tailwind.config.js CHANGED
@@ -9,7 +9,11 @@ export default {
9
9
  './playground/**/*.{js,html,vue}'
10
10
  ],
11
11
  plugins: [
12
- winduum(),
12
+ winduum({
13
+ settings: {
14
+ rgb: false
15
+ }
16
+ }),
13
17
  containerQueries,
14
18
  animate
15
19
  ]