css-zero 0.0.11 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4876a943502a072ea16fdf3b98641d336fcd3a284993d6a52ece9570bff8ef31
-  data.tar.gz: 660128733f0131cc9b6e6a57f82b6fe17bd6a4b0dc8b5cb1517a7c401f89b583
+  metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
+  data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
 SHA512:
-  metadata.gz: ac3b0c1bcc189e57e7bc36f39effc2214c081c6541be194a387eec2d17f5ce5eca27942bf10b0a0d46dbca2ee785e619270806fa8e6fc040ee0f74676dc047be
-  data.tar.gz: f5024cc9427dc53deb71772a641498eb44e01d32303acb4707851c9694312bb24e7a11e89a62c1050e3cea1682de2c47f7a54e4d8b48ef9439f59b7645a8c8f8
+  metadata.gz: f6c36eb3cc7eb625ee8ed8255bac1aaa409e30ae6202a3e1e6683df5f3be36c74f052d011ba49ed7fda0a1d91dc5fea3ef24aa15392e9ccf0b7c3b1431280dcb
+  data.tar.gz: 52f6d8133c48e4b9e6fd0e6c57f844a7121a516d6cbef6fefac54a0db69759cf42224d9963431eabb05158d802b6a4f1271d869abf056988d034b9bced5d2120

data/README.md

@@ -4,12 +4,6 @@ An opinionated CSS starter kit for your application. You can think of it like a
 
 ## Installation
 
-Is recommended to use [Propshaft](https://github.com/rails/propshaft), make sure to load all the CSS files in your `layout.html.erb`.
-
-```html+erb
-<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
-```
-
 Add this gem to your project.
 
 ```
@@ -28,6 +22,45 @@ Add only the components you need. (Optional)
 bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
 ```
 
+### Requirements
+
+If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
+
+<details>
+  <summary>Click here to see how</summary>
+
+```html+erb
+<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
+```
+</details>
+
+If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
+
+<details>
+  <summary>Click here to see how</summary>
+
+```
+/*
+*= require _reset
+*= require animations
+*= require borders
+*= require colors
+*= require effects
+*= require filters
+*= require grid
+*= require sizes
+*= require transform
+*= require transition
+*= require typography
+*= require_tree .
+*= require_self
+*= require zutilities
+*/
+```
+</details>
+
+Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
+
 ## Usage
 
 ```html
@@ -61,7 +94,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <div class="accordion">
@@ -86,7 +119,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html+erb
 <div class="alert alert--negative flex items-start gap">
@@ -104,7 +137,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <div>
@@ -130,7 +163,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <div class="flex justify-start gap">
@@ -145,10 +178,10 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ### Button
 
-<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/0c2ee625-9e6b-4f9c-8437-8d6751e4e508">
+<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <div class="flex flex-wrap items-center gap" aria-busy>
@@ -156,10 +189,11 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
   <button class="btn btn--secondary">Secondary</button>
   <button class="btn btn--outline">Outline</button>
   <button class="btn btn--plain">Plain</button>
+  <button class="btn btn--positive">Positive</button>
   <button class="btn btn--negative">Negative</button>
 
   <button class="btn">
-    <%= image_tag "circle-alert.svg", role: "presentation", size: 16 %>
+    <%= image_tag "circle-plus.svg", role: "presentation", size: 16 %>
     <span>With icon</span>
   </button>
 
@@ -175,7 +209,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
@@ -214,7 +248,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
@@ -261,7 +295,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html+erb
 <%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
@@ -298,7 +332,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <label>
@@ -313,7 +347,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html+erb
 <div class="flex items-center gap-sm">
@@ -328,7 +362,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
 
 <details>
-<summary>Show me the code!</summary>
+<summary>Show me the code</summary>
 
 ```html
 <table class="table">

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.11"
+  VERSION = "0.0.13"
 end

data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>

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

@@ -11,6 +11,12 @@
   }
 }
 
+.alert--positive {
+  --alert-border-color: var(--color-positive);
+  --alert-color: var(--color-positive);
+  --alert-icon-color: var(--color-filter-positive);
+}
+
 .alert--negative {
   --alert-border-color: var(--color-negative);
   --alert-color: var(--color-negative);

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

@@ -49,9 +49,16 @@
   --btn-icon-color: var(--color-filter-text);
 }
 
+.btn--positive {
+  --btn-background: var(--color-positive);
+  --btn-color: white;
+  --btn-icon-color: var(--color-filter-positive);
+}
+
 .btn--negative {
   --btn-background: var(--color-negative);
   --btn-color: white;
+  --btn-icon-color: var(--color-filter-negative);
 }
 
 .btn--loading {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.11
+  version: 0.0.13
 platform: ruby
 authors:
 - Lázaro Nixon
@@ -37,6 +37,7 @@ files:
 - lib/generators/css_zero/add/add_generator.rb
 - lib/generators/css_zero/add/resources.yml
 - lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg
+- lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
 - lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg