css-zero 0.0.64 → 0.0.66

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5483177d44d6ba1b3a5f033017ae681360166d6e1c2b4bdaf6a41d7373c46d9
-  data.tar.gz: cb16ccb3d8ffff3f2a82ee73f204f1dd2f8d92a94d5be855968f805d118eaa19
+  metadata.gz: 8195f9b90919258a5ca6a46c93bb2d75cc6142e22f0040b021ae75067ccb1e98
+  data.tar.gz: d7bdfd732b027d74495b1924aa15e783c69ab497462981f309e2aa11c6f3803b
 SHA512:
-  metadata.gz: b4e3ae5405e34810acb529b1defa6c4734d92e161aaad77a0acd2f7e62e0134302b99995104e8ba83653cfa46654ac8e4a7fefcc684570e25d123bc2cda94bb1
-  data.tar.gz: d551b14fe407408d8b30844138169477b0b2e896409f4a611339d70be237b223473368ac5af35865b687980a73fef180aebd49a3a5d8894ed9a93e19e802c3cd
+  metadata.gz: 3c440da9a275a5967e1ef77f363408c60aaf3c79b50016f71d87eb0987b9a169c6cccadde923e4e4a92bc5fd3f6481c401bea1cc1eff8bc3970d112e65fb9411
+  data.tar.gz: a784b89273f04e43caed45ebc8a63eaa97879a3c66deb9a7778dc22a59836b5d3ad578c8c5b44250f8de041eade07c7b8ffb5052b0e2be93bdb42d913b3aa8f6

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.64"
+  VERSION = "0.0.66"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs tooltip trix upload_preview toggle web_share
+  accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs tooltip trix upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

data/lib/generators/css_zero/add/resources.yml

@@ -3,6 +3,8 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+autoanimate:
+  - app/javascript/controllers/autoanimate_controller.js
 autosave:
   - app/javascript/controllers/autosave_controller.js
 avatar:

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

@@ -1,6 +1,10 @@
+:root {
+  --btn-background: var(--color-bg);
+}
+
 .btn {
   align-items: center;
-  background-color: var(--btn-background, var(--color-bg));
+  background-color: var(--btn-background);
   border-radius: var(--btn-radius, var(--rounded-md));
   border: 1px solid var(--btn-border-color, var(--color-border));
   color: var(--btn-color, var(--color-text));
@@ -20,9 +24,7 @@
   }
 
   &:hover {
-    --hover-color-from: var(--btn-background, var(--color-bg));
-    --hover-color: oklch(from var(--hover-color-from) calc(l * .96) c h);
-    background-color: var(--btn-hover-color, var(--hover-color));
+    background-color: var(--btn-hover-color, oklch(from var(--btn-background) calc(l * .95) c h));
   }
 
   &:focus-visible {
@@ -55,14 +57,14 @@
 .btn--positive {
   --btn-background: var(--color-positive);
   --btn-border-color: transparent;
-  --btn-color: var(--color-text-reversed);
+  --btn-color: white;
   --btn-icon-color: var(--color-filter-text-reversed);
 }
 
 .btn--negative {
   --btn-background: var(--color-negative);
   --btn-border-color: transparent;
-  --btn-color: var(--color-text-reversed);
+  --btn-color: white;
   --btn-icon-color: var(--color-filter-text-reversed);
 }
 

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

@@ -2,7 +2,7 @@
   align-items: center;
   animation: appear-then-fade 4s 300ms both;
   backdrop-filter: var(--blur) var(--contrast-75);
-  background-color: hsl(from var(--color-text) h s l / .65);
+  background-color: rgb(from var(--color-text) r g b / .65);
   border-radius: var(--rounded-full);
   color: var(--color-text-reversed);
   display: flex;

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

@@ -122,12 +122,12 @@
   }
 
   del {
-    background-color: hsl(from var(--color-negative) h s l / .1);
+    background-color: rgb(from var(--color-negative) r g b / .1);
     color: var(--color-negative);
   }
 
   ins {
-    background-color: hsl(from var(--color-positive) h s l / .1);
+    background-color: rgb(from var(--color-positive) r g b / .1);
     color: var(--color-positive);
   }
 

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

@@ -11,7 +11,7 @@
   }
 
   tr:hover {
-    background-color: hsl(from var(--color-border-light) h s l / .5);
+    background-color: rgb(from var(--color-border-light) r g b / .5);
   }
 
   th {

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

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus"
+import autoAnimate from "https://cdn.skypack.dev/@formkit/auto-animate@0.8.2"
+
+export default class extends Controller {
+  connect() {
+    autoAnimate(this.element)
+  }
+}

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

@@ -14,7 +14,7 @@ export default class extends Controller {
   }
 
   #submit({ item, newIndex, to }) {
-    put(item.dataset.urlValue, { responseKind: "plain", query: { position: newIndex, parent_id: to.dataset.parentId } })
+    put(item.dataset.urlValue, { query: { position: newIndex, parent_id: to.dataset.parentId } })
   }
 
   get #options() {

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

@@ -41,14 +41,14 @@
     /* Accent colors */
     --color-primary: var(--zinc-50);
     --color-secondary: var(--zinc-800);
-    --color-negative: var(--red-400);
-    --color-positive: var(--green-400);
+    --color-negative: var(--red-900);
+    --color-positive: var(--green-900);
 
     /* SVG color values */
     --color-filter-text: invert(1);
     --color-filter-text-reversed: invert(0);
-    --color-filter-negative: invert(54%) sepia(16%) saturate(2119%) hue-rotate(313deg) brightness(111%) contrast(94%);
-    --color-filter-positive: invert(81%) sepia(23%) saturate(1237%) hue-rotate(80deg) brightness(95%) contrast(83%);
+    --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
+    --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%);
   }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.64
+  version: 0.0.66
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-17 00:00:00.000000000 Z
+date: 2024-11-23 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -86,6 +86,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/zdatepicker.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css
+- lib/generators/css_zero/add/templates/app/javascript/controllers/autoanimate_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/autoselect_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js