css-zero 4.0.1 → 4.0.3
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +17 -0
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +36 -3
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +5 -10
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +37 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +5 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css +0 -4
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/list.css +18 -9
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.css +2 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +4 -0
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js +22 -18
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 968fe17a2f45545b00f3e3868a0119246043b00866c751b77b9ff6571a5d1e67
|
|
4
|
+
data.tar.gz: e1cc5cce55aa89119edea55a557effabc3336fef3d0ad7e71f02134ad17b4c7b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f4a95823923447a9fbc8fd97f797c148301ba9d71495acc336e0c9342bd7376f0c004c8de1b76f448b4fe5697b7ece48af244a2b6d5ad4215f654dab31bd5f88
|
|
7
|
+
data.tar.gz: 654b0076a84b5353d00e28d8752aafe87b0532aa26adde4146d1c15bab2034fe603b188e1690e90d3fa9e25808427e75f28b6f74d1666e4c63fc924f770d4ba0
|
data/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## 4.0.3 - 2026-08-10
|
|
2
|
+
- Add data-sound-volume-value
|
|
3
|
+
- Button sizes
|
|
4
|
+
- Avatar sizes
|
|
5
|
+
- Switch small
|
|
6
|
+
- Adjust icon sizes
|
|
7
|
+
|
|
8
|
+
## 4.0.2 - 2026-08-09
|
|
9
|
+
- Introduce --btn-column-gap
|
|
10
|
+
- Add avatar badge
|
|
11
|
+
- Improve badge
|
|
12
|
+
- Introduce --card-padding
|
|
13
|
+
- Remove command group separator
|
|
14
|
+
- Improve list
|
|
15
|
+
- Improve separator
|
|
16
|
+
- Update cuelume to 0.2.2
|
|
17
|
+
|
|
1
18
|
## 4.0.1 - 2026-08-02
|
|
2
19
|
- Revert spring animations
|
|
3
20
|
- Add .dialog__footer subcomponent
|
data/lib/css_zero/version.rb
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
.avatar {
|
|
2
|
+
--avatar-badge-size: calc(var(--avatar-size) * .3125);
|
|
3
|
+
--avatar-box-shadow: 0 0 0 2px var(--color-bg);
|
|
2
4
|
--avatar-radius: var(--rounded-full);
|
|
3
5
|
--avatar-size: var(--size-8);
|
|
4
6
|
|
|
@@ -7,7 +9,7 @@
|
|
|
7
9
|
display: flex;
|
|
8
10
|
flex-shrink: 0;
|
|
9
11
|
inline-size: var(--avatar-size);
|
|
10
|
-
|
|
12
|
+
position: relative;
|
|
11
13
|
|
|
12
14
|
&.btn {
|
|
13
15
|
--btn-inline-size: var(--avatar-size);
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
img {
|
|
23
25
|
aspect-ratio: var(--aspect-square);
|
|
24
26
|
block-size: var(--size-full);
|
|
27
|
+
border-radius: var(--avatar-radius);
|
|
25
28
|
inline-size: var(--size-full);
|
|
26
29
|
object-fit: cover;
|
|
27
30
|
}
|
|
@@ -31,20 +34,50 @@
|
|
|
31
34
|
background-color: var(--color-border-light);
|
|
32
35
|
block-size: var(--size-full);
|
|
33
36
|
border-radius: var(--avatar-radius);
|
|
37
|
+
color: var(--color-text-subtle);
|
|
34
38
|
display: flex;
|
|
35
|
-
font-size: calc(var(--avatar-size) * .
|
|
39
|
+
font-size: calc(var(--avatar-size) * .5);
|
|
36
40
|
inline-size: var(--size-full);
|
|
37
41
|
justify-content: center;
|
|
38
42
|
user-select: none;
|
|
39
43
|
}
|
|
40
44
|
}
|
|
41
45
|
|
|
46
|
+
.avatar--sm {
|
|
47
|
+
--avatar-size: var(--size-6);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.avatar--lg {
|
|
51
|
+
--avatar-size: var(--size-10);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.avatar__badge {
|
|
55
|
+
background-color: var(--avatar-badge-color, var(--color-primary));
|
|
56
|
+
block-size: var(--avatar-badge-size);
|
|
57
|
+
border-radius: var(--rounded-full);
|
|
58
|
+
box-shadow: var(--avatar-box-shadow);
|
|
59
|
+
inline-size: var(--avatar-badge-size);
|
|
60
|
+
inset: auto 0 0 auto;
|
|
61
|
+
position: absolute;
|
|
62
|
+
|
|
63
|
+
&:has(.icon) {
|
|
64
|
+
align-items: center;
|
|
65
|
+
color: var(--color-text-reversed);
|
|
66
|
+
display: flex;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.icon {
|
|
71
|
+
--icon-size: calc(var(--avatar-badge-size) * .75);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
42
75
|
.avatar-group {
|
|
43
76
|
align-items: center;
|
|
44
77
|
display: flex;
|
|
45
78
|
|
|
46
79
|
> .avatar {
|
|
47
|
-
box-shadow:
|
|
80
|
+
box-shadow: var(--avatar-box-shadow);
|
|
48
81
|
}
|
|
49
82
|
|
|
50
83
|
> :not(:last-child) {
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
background-color: var(--badge-background, var(--color-bg));
|
|
4
4
|
border: 1px solid var(--badge-border-color, var(--color-border));
|
|
5
5
|
border-radius: var(--badge-radius, var(--rounded-3xl));
|
|
6
|
-
box-shadow: var(--badge-box-shadow, none);
|
|
7
6
|
color: var(--badge-color, var(--color-text));
|
|
8
7
|
column-gap: var(--size-1);
|
|
9
8
|
display: inline-flex;
|
|
@@ -11,40 +10,36 @@
|
|
|
11
10
|
font-size: var(--text-xs);
|
|
12
11
|
font-weight: var(--font-medium);
|
|
13
12
|
justify-content: center;
|
|
13
|
+
line-height: var(--leading-tight);
|
|
14
14
|
min-inline-size: var(--badge-min-inline-size, 0);
|
|
15
15
|
padding: var(--badge-padding, .125rem .5rem);
|
|
16
16
|
white-space: nowrap;
|
|
17
|
+
|
|
18
|
+
.icon {
|
|
19
|
+
--icon-size: var(--size-3);
|
|
20
|
+
}
|
|
17
21
|
}
|
|
18
22
|
|
|
19
23
|
.badge--primary {
|
|
20
24
|
--badge-background: var(--color-primary);
|
|
21
25
|
--badge-border-color: transparent;
|
|
22
|
-
--badge-box-shadow: var(--shadow-sm);
|
|
23
26
|
--badge-color: var(--color-text-reversed);
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
.badge--secondary {
|
|
27
30
|
--badge-background: var(--color-secondary);
|
|
28
31
|
--badge-border-color: transparent;
|
|
29
|
-
--badge-box-shadow: none;
|
|
30
32
|
--badge-color: var(--color-text);
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
.badge--positive {
|
|
34
36
|
--badge-background: var(--color-positive);
|
|
35
37
|
--badge-border-color: transparent;
|
|
36
|
-
--badge-box-shadow: var(--shadow-sm);
|
|
37
38
|
--badge-color: white;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.badge--negative {
|
|
41
42
|
--badge-background: var(--color-negative);
|
|
42
43
|
--badge-border-color: transparent;
|
|
43
|
-
--badge-box-shadow: var(--shadow-sm);
|
|
44
44
|
--badge-color: white;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
.badge--number {
|
|
48
|
-
--badge-min-inline-size: var(--size-5);
|
|
49
|
-
--badge-radius: var(--rounded-full);
|
|
50
|
-
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border-radius: var(--btn-radius, var(--rounded-lg));
|
|
7
7
|
box-shadow: var(--btn-box-shadow, var(--shadow-xs));
|
|
8
8
|
color: var(--btn-color, var(--color-text));
|
|
9
|
-
column-gap: var(--size-1_5);
|
|
9
|
+
column-gap: var(--btn-column-gap, var(--size-1_5));
|
|
10
10
|
cursor: var(--btn-cursor, default);
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
font-size: var(--btn-font-size, var(--text-sm));
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
position: relative;
|
|
18
18
|
white-space: nowrap;
|
|
19
19
|
|
|
20
|
+
.icon {
|
|
21
|
+
--icon-size: var(--btn-icon-size, 1rem);
|
|
22
|
+
}
|
|
23
|
+
|
|
20
24
|
&:hover {
|
|
21
25
|
background-color: var(--btn-hover-color, var(--color-border-light));
|
|
22
26
|
}
|
|
@@ -31,6 +35,8 @@
|
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
|
|
38
|
+
/* Variants */
|
|
39
|
+
|
|
34
40
|
.btn--primary {
|
|
35
41
|
--btn-background: var(--color-primary);
|
|
36
42
|
--btn-border-color: transparent;
|
|
@@ -76,6 +82,36 @@
|
|
|
76
82
|
--btn-padding: var(--size-1_5);
|
|
77
83
|
}
|
|
78
84
|
|
|
85
|
+
/* Sizes */
|
|
86
|
+
|
|
87
|
+
.btn--xs {
|
|
88
|
+
--btn-font-size: var(--text-xs);
|
|
89
|
+
--btn-padding: var(--size-0_5) var(--size-2);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.btn--icon-xs {
|
|
93
|
+
--btn-icon-size: var(--size-3_5);
|
|
94
|
+
--btn-padding: var(--size-1);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn--sm {
|
|
98
|
+
--btn-padding: var(--size-0_5) var(--size-2_5);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.btn--icon-sm {
|
|
102
|
+
--btn-padding: var(--size-1);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.btn--lg {
|
|
106
|
+
--btn-padding: var(--size-1_5) var(--size-3);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.btn--icon-lg {
|
|
110
|
+
--btn-padding: var(--size-2);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Extras */
|
|
114
|
+
|
|
79
115
|
.btn--feedback {
|
|
80
116
|
transition-duration: var(--time-150);
|
|
81
117
|
transition-property: transform;
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
.card {
|
|
2
|
+
--card-padding: var(--size-4);
|
|
2
3
|
background-color: var(--color-surface);
|
|
3
4
|
border-radius: var(--rounded-xl);
|
|
4
5
|
border-width: var(--border);
|
|
5
6
|
box-shadow: var(--shadow-sm);
|
|
6
|
-
padding: var(--size-4);
|
|
7
|
+
padding: var(--card-padding, var(--size-4));
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
.card__footer {
|
|
10
11
|
background-color: rgb(from var(--color-border-light) r g b / .5);
|
|
11
12
|
border-block-start-width: var(--border);
|
|
12
|
-
margin-block-end: calc(var(--
|
|
13
|
-
margin-inline: calc(var(--
|
|
14
|
-
padding: var(--
|
|
13
|
+
margin-block-end: calc(var(--card-padding) * -1);
|
|
14
|
+
margin-inline: calc(var(--card-padding) * -1);
|
|
15
|
+
padding: var(--card-padding);
|
|
15
16
|
}
|
|
@@ -1,27 +1,36 @@
|
|
|
1
1
|
.list {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
|
-
row-gap: var(--size-4);
|
|
4
|
+
row-gap: var(--list-gap, var(--size-4));
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.list-row {
|
|
8
|
-
background-color: var(--
|
|
9
|
-
border: 1px solid var(--
|
|
8
|
+
background-color: var(--list-background, transparent);
|
|
9
|
+
border: 1px solid var(--list-border-color, var(--color-border));
|
|
10
10
|
border-radius: var(--rounded-xl);
|
|
11
11
|
font-size: var(--text-sm);
|
|
12
|
-
padding: var(--
|
|
12
|
+
padding: var(--list-padding, .625rem .75rem);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.list-row__media {
|
|
16
|
+
align-self: start;
|
|
17
|
+
block-size: var(--list-row-media-size, 2.5rem);
|
|
18
|
+
border-radius: var(--rounded-md);
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
inline-size: var(--list-row-media-size, 2.5rem);
|
|
21
|
+
object-fit: cover;
|
|
13
22
|
}
|
|
14
23
|
|
|
15
24
|
.list-row--muted {
|
|
16
|
-
--
|
|
25
|
+
--list-background: rgb(from var(--color-border-light) r g b / .5);
|
|
17
26
|
}
|
|
18
27
|
|
|
19
28
|
.list-row--borderless {
|
|
20
|
-
--
|
|
29
|
+
--list-border-color: transparent;
|
|
21
30
|
}
|
|
22
31
|
|
|
23
32
|
.list-row--link:hover {
|
|
24
|
-
--
|
|
33
|
+
--list-background: rgb(from var(--color-border-light) r g b / .5);
|
|
25
34
|
}
|
|
26
35
|
|
|
27
36
|
.list-row--link:focus-visible {
|
|
@@ -29,6 +38,6 @@
|
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
.list-row--check:has(:checked) {
|
|
32
|
-
--
|
|
33
|
-
--
|
|
41
|
+
--list-background: rgb(from var(--color-border-light) r g b / .5);
|
|
42
|
+
--list-border-color: var(--color-primary);
|
|
34
43
|
}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
background-color: var(--sep-color, var(--color-border));
|
|
3
3
|
block-size: 1px;
|
|
4
4
|
flex-shrink: 0;
|
|
5
|
-
inline-size: var(--
|
|
5
|
+
inline-size: var(--size-full);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.separator-vertical {
|
|
9
|
+
align-self: stretch;
|
|
9
10
|
background-color: var(--sep-color, var(--color-border));
|
|
10
|
-
block-size: var(--sep-size, var(--size-full));
|
|
11
11
|
flex-shrink: 0;
|
|
12
12
|
inline-size: 1px;
|
|
13
13
|
}
|
|
@@ -1,70 +1,74 @@
|
|
|
1
1
|
import { Controller } from "@hotwired/stimulus"
|
|
2
|
-
import { play } from "https://esm.sh/cuelume@0.
|
|
2
|
+
import { play } from "https://esm.sh/cuelume@0.2.2?standalone"
|
|
3
3
|
|
|
4
4
|
export default class extends Controller {
|
|
5
|
-
static values = { connect: String, disconnect: String }
|
|
5
|
+
static values = { connect: String, disconnect: String, volume: { type: Number, default: 1 } }
|
|
6
6
|
|
|
7
7
|
connect() {
|
|
8
|
-
this.hasConnectValue && play(this.connectValue)
|
|
8
|
+
this.hasConnectValue && this.#play(this.connectValue)
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
disconnect() {
|
|
12
|
-
this.hasDisconnectValue && play(this.disconnectValue)
|
|
12
|
+
this.hasDisconnectValue && this.#play(this.disconnectValue)
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
chime() {
|
|
16
|
-
play("chime")
|
|
16
|
+
this.#play("chime")
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
sparkle() {
|
|
20
|
-
play("sparkle")
|
|
20
|
+
this.#play("sparkle")
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
droplet() {
|
|
24
|
-
play("droplet")
|
|
24
|
+
this.#play("droplet")
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
bloom() {
|
|
28
|
-
play("bloom")
|
|
28
|
+
this.#play("bloom")
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
whisper() {
|
|
32
|
-
play("whisper")
|
|
32
|
+
this.#play("whisper")
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
tick() {
|
|
36
|
-
play("tick")
|
|
36
|
+
this.#play("tick")
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
press() {
|
|
40
|
-
play("press")
|
|
40
|
+
this.#play("press")
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
release() {
|
|
44
|
-
play("release")
|
|
44
|
+
this.#play("release")
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
toggle() {
|
|
48
|
-
play("toggle")
|
|
48
|
+
this.#play("toggle")
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
success() {
|
|
52
|
-
play("success")
|
|
52
|
+
this.#play("success")
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
error() {
|
|
56
|
-
play("error")
|
|
56
|
+
this.#play("error")
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
page() {
|
|
60
|
-
play("page")
|
|
60
|
+
this.#play("page")
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
loading() {
|
|
64
|
-
play("loading")
|
|
64
|
+
this.#play("loading")
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
ready() {
|
|
68
|
-
play("ready")
|
|
68
|
+
this.#play("ready")
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
#play(sound) {
|
|
72
|
+
play(sound, { volume: this.volumeValue })
|
|
69
73
|
}
|
|
70
74
|
}
|