css-zero 0.0.92 → 0.0.93

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c1c919ca22e297fc9aed948e7f9eda8a17d341dd32c8b4df5c70b4bb1823cda
-  data.tar.gz: b3feb5c0d25ae33d70f76cdfded1a64ac65b562784fdaab32412c1b7f043e825
+  metadata.gz: 32342c2b786487ee68c9b3a1d894d94b85b89607da1abb1d2f5a75ed9effc53c
+  data.tar.gz: '02517761054609b9014ef3fb4194a8d4405b7875c87dc42abe000b085577dddc'
 SHA512:
-  metadata.gz: 1e784e20f4e8cf7878e68400fd3c9eb72cdf1d5314e73f897fd606c28f05b8c9bd5f5d43805125ec246bcfed81c2ddcff108a0b3731c09897b4c621c69c02fb3
-  data.tar.gz: e2326b48f1d6261f90d33688d6b69e0791610e456790fb8ed737508e0c35f683d20e058f0d37bcbc396a95f5d66d4aad69534018ff37785c83b1f82854f76195
+  metadata.gz: 75bdcf3780aac15921ccead84e9abec3629b6dd9f84751aa21d15e82781050e3cedb924925db75c1a1bd1387986dde849a02734be9e20873dfa44cf2b4f48751
+  data.tar.gz: 7fd76a723cb4be4d92243f1ed3faa5882fb96f76dfe2e184d7708bf1da9b6141925d0875cf12ccfe8a46bf924daeea117eda7d157ba235ef50a44beaada385e2

data/README.md

@@ -24,41 +24,27 @@ bin/rails generate css_zero:add --help
 
 ## Usage
 
-```html
-<h1 class="text-xl font-bold mb-4">
-  Write most page content using utility classes.
-</h1>
-
-<div class="custom-component">
-  Create components using CSS variables.
-</div>
-
-<div class="card">
-  Optionally, copy pre-built components into your application.
-</div>
-```
-
-```css
-.custom-component {
-  background-color: var(--red-500);
-  border-radius: var(--rounded);
-  block-size: var(--size-4);
-}
-```
-
 Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
 
 ## Components
 
 [<img src="https://github.com/user-attachments/assets/3a7fbd1e-5cc8-4476-a60c-52bc28efca29">](https://csszero.lazaronixon.com)
 
+## Scaffold
+
+This gem implements custom templates for scaffolds and authentication.
+
+```
+bin/rails generate scaffold contacts name email phone
+```
+
 ## Icons
 
 Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
 
-## Scaffold
+## Figma
 
-This gem implements custom templates for scaffolds and authentication.
+[shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
 
 ## Development
 

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.92"
+  VERSION = "0.0.93"
 end

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

@@ -48,7 +48,8 @@
       content: "";
       filter: var(--color-filter-text);
       inline-size: var(--size-4);
-      transition: transform var(--time-200);
+      transition-duration: var(--time-200);
+      transition-property: transform;
     }
   }
 }

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

@@ -26,7 +26,7 @@
     transition-property: display, overlay, opacity;
   }
 
-  /* In animation */
+  /* Animation end */
   &[open] {
     opacity: 1; transform: var(--scale-100);
   }
@@ -35,7 +35,7 @@
     opacity: 1;
   }
 
-  /* Out animation */
+  /* Animation start */
   @starting-style {
     &[open] {
       opacity: 0; transform: var(--scale-95);
@@ -60,7 +60,7 @@
 }
 
 .dialog__close {
-  inset-block-start: var(--size-4);
-  inset-inline-end: var(--size-4);
+  inset-block-start: var(--size-3);
+  inset-inline-end:  var(--size-3);
   position: absolute;
 }

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

@@ -13,19 +13,15 @@
   transition-duration: var(--time-150);
   transition-property: display, overlay, opacity, transform;
 
-  /* In animation */
+  /* Animation end */
   &:popover-open {
     opacity: 1; transform: var(--scale-100);
   }
 
-  /* Out animation */
+  /* Animation start */
   @starting-style {
     &:popover-open {
       opacity: 0; transform: var(--scale-95);
     }
   }
 }
-
-.popover--tooltip {
-  font-size: var(--text-sm); padding: var(--size-1_5) var(--size-3);
-}

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

@@ -25,7 +25,7 @@
     transition-property: display, overlay, opacity;
   }
 
-  /* In animation */
+  /* Animation end */
   &[open] {
     transform: translateX(0);
   }
@@ -34,7 +34,7 @@
     opacity: 1;
   }
 
-  /* Out animation */
+  /* Animation start */
   @starting-style {
     &[open] {
       transform: var(--sheet-transform);
@@ -66,7 +66,7 @@
 }
 
 .sheet__close {
-  inset-block-start: var(--size-4);
-  inset-inline-end: var(--size-4);
+  inset-block-start: var(--size-3);
+  inset-inline-end:  var(--size-3);
   position: absolute;
 }

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

@@ -25,7 +25,8 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition: margin var(--time-150);
+    transition-duration: var(--time-150);
+    transition-property: margin;
   }
 
   &:focus-visible {

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

@@ -1,7 +1,13 @@
 :where(.table) {
+  caption-side: bottom;
   font-size: var(--text-sm);
   inline-size: var(--size-full);
 
+  caption {
+    color: var(--color-text-subtle);
+    margin-block-start: var(--size-4);
+  }
+
   thead {
     color: var(--color-text-subtle);
   }

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

@@ -32,13 +32,12 @@
   transition-duration: var(--time-150);
   transition-property: display, opacity, transform;
 
-  /* In animation */
+  /* Animation end */
   .dropdown-active & {
-    opacity: 1;
-    transform: var(--scale-100);
+    opacity: 1; transform: var(--scale-100);
   }
 
-  /* Out animation */
+  /* Animation start */
   @starting-style {
     .dropdown-active & {
       opacity: 0; transform: var(--scale-95);

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

@@ -55,7 +55,7 @@ trix-toolbar {
     color: var(--color-text-reversed);
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 48rem) {
     .trix-button-group--history-tools { display: none; }
   }
 }

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

@@ -5,6 +5,8 @@ export default class extends Controller {
   static targets = [ "button", "menu" ]
   static values  = { placement: { type: String, default: "bottom" } }
 
+  #showTimer = null
+
   initialize() {
     this.orient = this.orient.bind(this)
   }
@@ -21,12 +23,12 @@ export default class extends Controller {
     this.menuTarget.showPopover()
   }
 
-  showLater() {
-    setTimeout(() => this.show(), 700)
+  hide() {
+    clearTimeout(this.#showTimer); this.menuTarget.hidePopover()
   }
 
-  hide() {
-    this.menuTarget.hidePopover()
+  showLater() {
+    this.#showTimer = setTimeout(() => this.show(), 700)
   }
 
   orient() {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.92
+  version: 0.0.93
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-16 00:00:00.000000000 Z
+date: 2025-01-17 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com