css-zero 4.0.1 → 4.0.2

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 (12) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +10 -0
  3. data/lib/css_zero/version.rb +1 -1
  4. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css +32 -3
  5. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +5 -10
  6. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
  7. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +5 -4
  8. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css +0 -4
  9. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/list.css +18 -9
  10. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.css +2 -2
  11. data/lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js +1 -1
  12. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 27963da0921892b98654ce69ae525ea4c68dc0d4c3ea5734e1455027d822a14f
4
- data.tar.gz: 9966e221da305d9826877ee3e8bcee8d2fe4cc34bab1655aab35deacda8c5ad5
3
+ metadata.gz: 69a344da6cc617d2132cb91f0ba9912e68194ad31b5d751657c3bb69cd56ffe3
4
+ data.tar.gz: 822f6f73459d60c11e97cb87174419ea533e9d48de2c686b1c9b35b6f58494ea
5
5
  SHA512:
6
- metadata.gz: 63a1935dc579074074181c136c7269317b4ca79a5d0e6ef1029ac05554f5ffaf15956b87fe64b8e5cf114e88f79e6c884f4a229875d275cdbd1ee598b0cb66b9
7
- data.tar.gz: 4cec4735cda57db7653987d462118aa3328393b1936949f1ed10ea4358650c868bcd36cc5f6a50bce5c9c4992d7282729cb001a074968b1332c8685017a4b22e
6
+ metadata.gz: cd7f4fb30f2d00e6c505736ef0e3434da566997fc451d6d3748b8b5a63c800721eecd747ca4c7688c5ccdd6a355ad9ab4b7182dcc8aefb8a42aabf6c60b6ef76
7
+ data.tar.gz: 0ac061455ac6952b5f7dcbe9fdf6714d4ced0245c75558c56816b5d998c282f09249512551384dbc49a7ebdaef8085596038110071ce7d6e6433498e69d479a8
data/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 4.0.2 - 2026-08-09
2
+ - Introduce --btn-column-gap
3
+ - Add avatar badge
4
+ - Improve badge
5
+ - Introduce --card-padding
6
+ - Remove command group separator
7
+ - Improve list
8
+ - Improve separator
9
+ - Update cuelume to 0.2.2
10
+
1
11
  ## 4.0.1 - 2026-08-02
2
12
  - Revert spring animations
3
13
  - Add .dialog__footer subcomponent
data/lib/css_zero/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "4.0.1"
2
+ VERSION = "4.0.2"
3
3
  end
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css 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
- overflow: hidden;
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,11 +34,37 @@
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) * .4);
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;
43
+
44
+ .icon {
45
+ --icon-size: 1em;
46
+ }
47
+ }
48
+ }
49
+
50
+ .avatar__badge {
51
+ background-color: var(--avatar-badge-color, var(--color-primary));
52
+ block-size: var(--avatar-badge-size);
53
+ border-radius: var(--rounded-full);
54
+ box-shadow: var(--avatar-box-shadow);
55
+ inline-size: var(--avatar-badge-size);
56
+ inset: auto 0 0 auto;
57
+ position: absolute;
58
+
59
+ &:has(.icon) {
60
+ align-items: center;
61
+ color: var(--color-text-reversed);
62
+ display: flex;
63
+ justify-content: center;
64
+ }
65
+
66
+ .icon {
67
+ --icon-size: calc(var(--avatar-badge-size) * .75);
39
68
  }
40
69
  }
41
70
 
@@ -44,7 +73,7 @@
44
73
  display: flex;
45
74
 
46
75
  > .avatar {
47
- box-shadow: 0 0 0 var(--size-0_5) var(--color-bg);
76
+ box-shadow: var(--avatar-box-shadow);
48
77
  }
49
78
 
50
79
  > :not(:last-child) {
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css CHANGED
@@ -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: 1em;
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
- }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css CHANGED
@@ -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));
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css CHANGED
@@ -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(--size-4) * -1);
13
- margin-inline: calc(var(--size-4) * -1);
14
- padding: var(--size-4);
13
+ margin-block-end: calc(var(--card-padding) * -1);
14
+ margin-inline: calc(var(--card-padding) * -1);
15
+ padding: var(--card-padding);
15
16
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/command.css CHANGED
@@ -23,10 +23,6 @@
23
23
  }
24
24
  }
25
25
 
26
- .command__group:not(:first-child) {
27
- border-block-start-width: var(--border);
28
- }
29
-
30
26
  .command__group {
31
27
  display: flex;
32
28
  flex-direction: column;
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/list.css CHANGED
@@ -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(--item-background, transparent);
9
- border: 1px solid var(--item-border-color, var(--color-border));
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(--size-4);
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
- --item-background: rgb(from var(--color-border-light) r g b / .5);
25
+ --list-background: rgb(from var(--color-border-light) r g b / .5);
17
26
  }
18
27
 
19
28
  .list-row--borderless {
20
- --item-border-color: transparent;
29
+ --list-border-color: transparent;
21
30
  }
22
31
 
23
32
  .list-row--link:hover {
24
- --item-background: rgb(from var(--color-border-light) r g b / .5);
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
- --item-background: rgb(from var(--color-border-light) r g b / .5);
33
- --item-border-color: var(--color-primary);
41
+ --list-background: rgb(from var(--color-border-light) r g b / .5);
42
+ --list-border-color: var(--color-primary);
34
43
  }
data/lib/generators/css_zero/add/templates/app/assets/stylesheets/separator.css CHANGED
@@ -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(--sep-size, var(--size-full));
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
  }
data/lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
- import { play } from "https://esm.sh/cuelume@0.1.2?standalone"
2
+ import { play } from "https://esm.sh/cuelume@0.2.2?standalone"
3
3
 
4
4
  export default class extends Controller {
5
5
  static values = { connect: String, disconnect: String }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: css-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.0.1
4
+ version: 4.0.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lázaro Nixon