css-zero 4.0.2 → 4.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69a344da6cc617d2132cb91f0ba9912e68194ad31b5d751657c3bb69cd56ffe3
-  data.tar.gz: 822f6f73459d60c11e97cb87174419ea533e9d48de2c686b1c9b35b6f58494ea
+  metadata.gz: 102ef4b7727a825a523e0aa058e503f788e591b5ae9239eb14340fc9edb378a1
+  data.tar.gz: 16a552a5832745f62b46643b0418d43ade6297b3f0e214f649f2160245eb7dc8
 SHA512:
-  metadata.gz: cd7f4fb30f2d00e6c505736ef0e3434da566997fc451d6d3748b8b5a63c800721eecd747ca4c7688c5ccdd6a355ad9ab4b7182dcc8aefb8a42aabf6c60b6ef76
-  data.tar.gz: 0ac061455ac6952b5f7dcbe9fdf6714d4ced0245c75558c56816b5d998c282f09249512551384dbc49a7ebdaef8085596038110071ce7d6e6433498e69d479a8
+  metadata.gz: 406054c28bb36ab1883a09cb8469c1ec9aa9ea2d19feb26efbe4a6ca4dd53a27a802c1007008c435c396b3cc54925a2809ad11edfeb31eba4b99d970b358621c
+  data.tar.gz: 47978e63fa903de1e63e8f7ccc9148b38f77f353e16e28302824dccb4c4d1720653c980832b2d133f235bc9ceb7527a63518927b4a4ebe6f2de284d5b9dc3b83

data/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 4.1.0 - 2026-08-11
+- Add --color-surface-negative
+- Add --color-text-negative
+- Add .bg-negative
+- Remove --color-negative
+- Remove --color-positive
+- Remove positive variants
+- Remove .text-positive
+- Cosmetic dropzone text message
+- Table with checkbox
+
+## 4.0.3 - 2026-08-10
+- Add data-sound-volume-value
+- Button sizes
+- Avatar sizes
+- Switch small
+- Adjust icon sizes
+
 ## 4.0.2 - 2026-08-09
 - Introduce --btn-column-gap
 - Add avatar badge

data/app/assets/stylesheets/css-zero/utilities.css

@@ -66,8 +66,7 @@
 .text-primary { color: var(--color-text); }
 .text-reversed { color: var(--color-text-reversed); }
 .text-subtle { color: var(--color-text-subtle); }
-.text-positive { color: var(--color-positive); }
-.text-negative { color: var(--color-negative); }
+.text-negative { color: var(--color-text-negative); }
 .text-link { color: var(--color-link); text-decoration: underline; }
 
 .text-xs { font-size: var(--text-xs); }
@@ -90,6 +89,7 @@
 .bg-shade { background-color: var(--color-border-light); }
 .bg-selected { background-color: var(--color-selected); }
 .bg-highlight { background-color: var(--color-highlight); }
+.bg-negative { background-color: var(--color-surface-negative); }
 .bg-transparent { background-color: transparent; }
 
 /****************************************************************

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "4.0.2"
+  VERSION = "4.1.0"
 end

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css

@@ -8,10 +8,6 @@
   padding: var(--size-2) var(--size-2_5);
 }
 
-.alert--positive {
-  --alert-color: light-dark(var(--green-600), var(--green-400));
-}
-
 .alert--negative {
   --alert-color: light-dark(var(--red-600), var(--red-400));
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css

@@ -40,13 +40,17 @@
     inline-size: var(--size-full);
     justify-content: center;
     user-select: none;
-
-    .icon {
-      --icon-size: 1em;
-    }
   }
 }
 
+.avatar--sm {
+  --avatar-size: var(--size-6);
+}
+
+.avatar--lg {
+  --avatar-size: var(--size-10);
+}
+
 .avatar__badge {
   background-color: var(--avatar-badge-color, var(--color-primary));
   block-size: var(--avatar-badge-size);

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css

@@ -16,7 +16,7 @@
   white-space: nowrap;
 
   .icon {
-    --icon-size: 1em;
+    --icon-size: var(--size-3);
   }
 }
 
@@ -32,14 +32,8 @@
   --badge-color: var(--color-text);
 }
 
-.badge--positive {
-  --badge-background: var(--color-positive);
-  --badge-border-color: transparent;
-  --badge-color: white;
-}
-
 .badge--negative {
-  --badge-background: var(--color-negative);
+  --badge-background: var(--color-surface-negative);
   --badge-border-color: transparent;
-  --badge-color: white;
+  --badge-color: var(--color-text-negative);
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -17,6 +17,10 @@
   position: relative;
   white-space: nowrap;
 
+  .icon {
+    --icon-size: var(--btn-icon-size, 1rem);
+  }
+
   &:hover {
     background-color: var(--btn-hover-color, var(--color-border-light));
   }
@@ -31,6 +35,8 @@
   }
 }
 
+/* Variants */
+
 .btn--primary {
   --btn-background: var(--color-primary);
   --btn-border-color: transparent;
@@ -50,18 +56,11 @@
   --btn-box-shadow: none;
 }
 
-.btn--positive {
-  --btn-background: var(--color-positive);
-  --btn-border-color: transparent;
-  --btn-color: white;
-  --btn-hover-color: rgb(from var(--color-positive) r g b / .9);
-}
-
 .btn--negative {
-  --btn-background: var(--color-negative);
+  --btn-background: var(--color-surface-negative);
   --btn-border-color: transparent;
-  --btn-color: white;
-  --btn-hover-color: rgb(from var(--color-negative) r g b / .9);
+  --btn-color: var(--color-text-negative);
+  --btn-hover-color: rgb(from var(--color-surface-negative) r g b / .9);
 }
 
 .btn--plain {
@@ -76,6 +75,36 @@
   --btn-padding: var(--size-1_5);
 }
 
+/* Sizes */
+
+.btn--xs {
+  --btn-font-size: var(--text-xs);
+  --btn-padding: var(--size-0_5) var(--size-2);
+}
+
+.btn--icon-xs {
+  --btn-icon-size: var(--size-3_5);
+  --btn-padding: var(--size-1);
+}
+
+.btn--sm {
+  --btn-padding: var(--size-0_5) var(--size-2_5);
+}
+
+.btn--icon-sm {
+  --btn-padding: var(--size-1);
+}
+
+.btn--lg {
+  --btn-padding: var(--size-1_5) var(--size-3);
+}
+
+.btn--icon-lg {
+  --btn-padding: var(--size-2);
+}
+
+/* Extras */
+
 .btn--feedback {
   transition-duration: var(--time-150);
   transition-property: transform;

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/combobox.css

@@ -131,7 +131,7 @@
 }
 
 .invalid .ts-control {
-  border-color: var(--color-negative);
+  border-color: var(--color-text-negative);
 }
 
 [data-controller~="combobox"] {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dropzone.css

@@ -11,13 +11,15 @@
 }
 
 .dropzone .dz-preview .dz-error-message {
-  background: var(--color-negative);
+  background: var(--color-surface-negative);
+  color: var(--color-text-negative);
   text-align: center;
   text-wrap: balance;
+  overflow-wrap: anywhere;
 }
 
 .dropzone .dz-preview .dz-error-message::after {
-  border-bottom: 6px solid var(--color-negative);
+  border-bottom: 6px solid var(--color-surface-negative);
 }
 
 .dropzone .dz-preview:has(.dz-remove) .dz-error-message  {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -43,7 +43,7 @@
   }
 
   &:user-invalid {
-    border-color: var(--color-negative);
+    border-color: var(--color-text-negative);
   }
 
   &:user-invalid + [feedback] {
@@ -59,7 +59,7 @@
   }
 
   .field_with_errors & {
-    border-color: var(--color-negative);
+    border-color: var(--color-text-negative);
   }
 }
 

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css

@@ -44,3 +44,7 @@
     cursor: not-allowed; opacity: var(--opacity-50);
   }
 }
+
+.switch--sm {
+  --switch-size: var(--size-3);
+}

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css

@@ -20,6 +20,10 @@
     background-color: rgb(from var(--color-border-light) r g b / .5);
   }
 
+  tr:has(:checked) {
+    background-color: var(--color-border-light);
+  }
+
   th {
     font-weight: var(--font-medium);
     text-align: start;

data/lib/generators/css_zero/add/templates/app/javascript/controllers/sound_controller.js

@@ -2,69 +2,73 @@ import { Controller } from "@hotwired/stimulus"
 import { play } from "https://esm.sh/cuelume@0.2.2?standalone"
 
 export default class extends Controller {
-  static values = { connect: String, disconnect: String }
+  static values = { connect: String, disconnect: String, volume: { type: Number, default: 1 } }
 
   connect() {
-    this.hasConnectValue && play(this.connectValue)
+    this.hasConnectValue && this.#play(this.connectValue)
   }
 
   disconnect() {
-    this.hasDisconnectValue && play(this.disconnectValue)
+    this.hasDisconnectValue && this.#play(this.disconnectValue)
   }
 
   chime() {
-    play("chime")
+    this.#play("chime")
   }
 
   sparkle() {
-    play("sparkle")
+    this.#play("sparkle")
   }
 
   droplet() {
-    play("droplet")
+    this.#play("droplet")
   }
 
   bloom() {
-    play("bloom")
+    this.#play("bloom")
   }
 
   whisper() {
-    play("whisper")
+    this.#play("whisper")
   }
 
   tick() {
-    play("tick")
+    this.#play("tick")
   }
 
   press() {
-    play("press")
+    this.#play("press")
   }
 
   release() {
-    play("release")
+    this.#play("release")
   }
 
   toggle() {
-    play("toggle")
+    this.#play("toggle")
   }
 
   success() {
-    play("success")
+    this.#play("success")
   }
 
   error() {
-    play("error")
+    this.#play("error")
   }
 
   page() {
-    play("page")
+    this.#play("page")
   }
 
   loading() {
-    play("loading")
+    this.#play("loading")
   }
 
   ready() {
-    play("ready")
+    this.#play("ready")
+  }
+
+  #play(sound) {
+    play(sound, { volume: this.volumeValue })
   }
 }

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -1,9 +1,11 @@
 :root {
   --color-bg: light-dark(white, var(--zinc-950));
   --color-surface: light-dark(white, var(--zinc-900));
+  --color-surface-negative: light-dark(var(--red-100), var(--red-950));
   --color-text: light-dark(var(--zinc-950), white);
   --color-text-reversed: light-dark(white, var(--zinc-950));
   --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
+  --color-text-negative: light-dark(var(--red-600), var(--red-400));
   --color-link: light-dark(var(--blue-700), var(--blue-400));
   --color-border-light: light-dark(var(--zinc-100), var(--zinc-800));
   --color-border: light-dark(var(--zinc-200), var(--zinc-700));
@@ -13,8 +15,6 @@
   --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));
   --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
   --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
-  --color-negative: light-dark(var(--red-600), var(--red-600));
-  --color-positive: light-dark(var(--green-700), var(--green-700));
 }
 
 * {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 4.0.2
+  version: 4.1.0
 platform: ruby
 authors:
 - Lázaro Nixon