css-zero 0.0.16 → 0.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
-  data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
+  metadata.gz: 92f6b9adffe56fbbd63cc59f9d80869e8fd52f01dc43285e2a4fca1478099a83
+  data.tar.gz: 48bc41e660292ebcd1f9fec79a0c791cbfec06ba9e698711ab211bec155950c3
 SHA512:
-  metadata.gz: 39e8b29cb429cf7e8d4d180682c17cef15e5105f51fc9c0b88ece548f688a41558569f2aeda76bf9365df202b6e01f791dd7520b5225ef0357a80e1d0a39ed70
-  data.tar.gz: 52d7914ad684c3b27766979afa42834796a361846dc679d2a44300ed1858a92490f1f5c09665b0bb40a0e4671303de8402dc4127eda6ab25d8cebc7df389318c
+  metadata.gz: a3ff2ead3a52606d129f09bc0c9aa9039b4cd155ea0e87d6b2b07ceedb77b346d044004f906376dccd796fa63f2fd28341c6b4339547238e202465fc16c12beb
+  data.tar.gz: e7f2b6b8b2cf02729a57051cdb7d3827ee5803bb6af9257fa8b6e968eafcd40163e671f24f3b8c4fcfebea2663d825bb483a86a7911c8e8425210f3214628010

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert badge button card dialog input progress switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
 ```
 
 ### Requirements
@@ -132,6 +132,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Avatar
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<div class="flex item-center gap">
+  <div class="avatar">
+    <%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>
+  </div>
+
+  <div class="avatar">
+    <span class="avatar__fallback">CN</span>
+  </div>
+</div>
+```
+</details>
+
 ### Badge
 
 <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
@@ -150,6 +168,24 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Breadcrumb
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<nav class="breadcrumb">
+  <a href="#">Home</a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#"><%= image_tag "ellipsis.svg", size: 14 %></a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#">Components</a>
+  <%= image_tag "chevron-right.svg", size: 14 %>
+  <a href="#" class="text-primary">Breadcrumb</a>
+</nav>
+```
+</details>
+
 ### Button
 
 <img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/df78c11e-9167-4fd3-a779-24729cb24715">
@@ -217,6 +253,38 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### Collapsible
+
+<details>
+<summary>Show me the code</summary>
+
+```html+erb
+<div data-controller="collapsible" style="max-inline-size: 350px">
+  <div class="flex items-center justify-between gap pi-4 pb-3">
+    <h4 class="text-sm font-semibold">
+      @lazaronixon starred 3 repositories
+    </h4>
+    <button data-action="collapsible#toggle" class="btn btn--plain p-0">
+      <%= image_tag "chevrons-up-down.svg", size: 16 %>
+      <span class="sr-only">Toggle</span>
+    </button>
+  </div>
+  <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+    @rails/rails
+  </div>
+  <details>
+    <summary data-collapsible-target="summary" hidden></summary>
+    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+      @rails/jbuilder
+    </div>
+    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
+      @rails/jsbundling-rails
+    </div>
+  </details>
+</div>
+```
+</details>
+
 ### Dialog
 
 #### Alert Dialog

data/app/assets/stylesheets/zutilities.css

@@ -45,7 +45,7 @@
 .whitespace-nowrap { white-space: nowrap; }
 .whitespace-normal { white-space: normal; }
 
-.break-words { word-break: break-word; }
+.break-words { overflow-wrap: break-word; }
 .break-all { word-break: break-all; }
 
 .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
@@ -96,6 +96,7 @@
 *****************************************************************/
 .colorize-black { filter: var(--color-filter-text); }
 .colorize-white { filter: var(--color-filter-text-reversed); }
+.colorize-shade { filter: var(--color-filter-text-subtle); }
 .colorize-negative { filter: var(--color-filter-negative); }
 .colorize-positive { filter: var(--color-filter-positive); }
 
@@ -158,6 +159,7 @@
 .m-0\.5 { margin: var(--size-0_5); }
 .m-1 { margin: var(--size-1); }
 .m-2 { margin: var(--size-2); }
+.m-3 { margin: var(--size-3); }
 .m-4 { margin: var(--size-4); }
 .m-6 { margin: var(--size-6); }
 .m-8 { margin: var(--size-8); }
@@ -168,6 +170,7 @@
 .mb-0\.5 { margin-block: var(--size-0_5); }
 .mb-1 { margin-block: var(--size-1); }
 .mb-2 { margin-block: var(--size-2); }
+.mb-3 { margin-block: var(--size-3); }
 .mb-4 { margin-block: var(--size-4); }
 .mb-6 { margin-block: var(--size-6); }
 .mb-8 { margin-block: var(--size-8); }
@@ -178,6 +181,7 @@
 .mbs-0\.5 { margin-block-start: var(--size-0_5); }
 .mbs-1 { margin-block-start: var(--size-1); }
 .mbs-2 { margin-block-start: var(--size-2); }
+.mbs-3 { margin-block-start: var(--size-3); }
 .mbs-4 { margin-block-start: var(--size-4); }
 .mbs-6 { margin-block-start: var(--size-6); }
 .mbs-8 { margin-block-start: var(--size-8); }
@@ -188,6 +192,7 @@
 .mbe-0\.5 { margin-block-end: var(--size-0_5); }
 .mbe-1 { margin-block-end: var(--size-1); }
 .mbe-2 { margin-block-end: var(--size-2); }
+.mbe-3 { margin-block-end: var(--size-3); }
 .mbe-4 { margin-block-end: var(--size-4); }
 .mbe-6 { margin-block-end: var(--size-6); }
 .mbe-8 { margin-block-end: var(--size-8); }
@@ -198,6 +203,7 @@
 .mi-0\.5 { margin-inline: var(--size-0_5); }
 .mi-1 { margin-inline: var(--size-1); }
 .mi-2 { margin-inline: var(--size-2); }
+.mi-3 { margin-inline: var(--size-3); }
 .mi-4 { margin-inline: var(--size-4); }
 .mi-6 { margin-inline: var(--size-6); }
 .mi-8 { margin-inline: var(--size-8); }
@@ -208,6 +214,7 @@
 .mis-0\.5 { margin-inline-start: var(--size-0_5); }
 .mis-1 { margin-inline-start: var(--size-1); }
 .mis-2 { margin-inline-start: var(--size-2); }
+.mis-3 { margin-inline-start: var(--size-3); }
 .mis-4 { margin-inline-start: var(--size-4); }
 .mis-6 { margin-inline-start: var(--size-6); }
 .mis-8 { margin-inline-start: var(--size-8); }
@@ -218,6 +225,7 @@
 .mie-0\.5 { margin-inline-end: var(--size-0_5); }
 .mie-1 { margin-inline-end: var(--size-1); }
 .mie-2 { margin-inline-end: var(--size-2); }
+.mie-3 { margin-inline-end: var(--size-3); }
 .mie-4 { margin-inline-end: var(--size-4); }
 .mie-6 { margin-inline-end: var(--size-6); }
 .mie-8 { margin-inline-end: var(--size-8); }
@@ -231,6 +239,7 @@
 .p-0\.5 { padding: var(--size-0_5); }
 .p-1 { padding: var(--size-1); }
 .p-2 { padding: var(--size-2); }
+.p-3 { padding: var(--size-3); }
 .p-4 { padding: var(--size-4); }
 .p-6 { padding: var(--size-6); }
 .p-8 { padding: var(--size-8); }
@@ -240,6 +249,7 @@
 .pb-0\.5 { padding-block: var(--size-0_5); }
 .pb-1 { padding-block: var(--size-1); }
 .pb-2 { padding-block: var(--size-2); }
+.pb-3 { padding-block: var(--size-3); }
 .pb-4 { padding-block: var(--size-4); }
 .pb-6 { padding-block: var(--size-6); }
 .pb-8 { padding-block: var(--size-8); }
@@ -249,6 +259,7 @@
 .pbs-0\.5 { padding-block-start: var(--size-0_5); }
 .pbs-1 { padding-block-start: var(--size-1); }
 .pbs-2 { padding-block-start: var(--size-2); }
+.pbs-3 { padding-block-start: var(--size-3); }
 .pbs-4 { padding-block-start: var(--size-4); }
 .pbs-6 { padding-block-start: var(--size-6); }
 .pbs-8 { padding-block-start: var(--size-8); }
@@ -258,6 +269,7 @@
 .pbe-0\.5 { padding-block-end: var(--size-0_5); }
 .pbe-1 { padding-block-end: var(--size-1); }
 .pbe-2 { padding-block-end: var(--size-2); }
+.pbe-3 { padding-block-end: var(--size-3); }
 .pbe-4 { padding-block-end: var(--size-4); }
 .pbe-6 { padding-block-end: var(--size-6); }
 .pbe-8 { padding-block-end: var(--size-8); }
@@ -267,6 +279,7 @@
 .pi-0\.5 { padding-inline: var(--size-0_5); }
 .pi-1 { padding-inline: var(--size-1); }
 .pi-2 { padding-inline: var(--size-2); }
+.pi-3 { padding-inline: var(--size-3); }
 .pi-4 { padding-inline: var(--size-4); }
 .pi-6 { padding-inline: var(--size-6); }
 .pi-8 { padding-inline: var(--size-8); }
@@ -276,6 +289,7 @@
 .pis-0\.5 { padding-inline-start: var(--size-0_5); }
 .pis-1 { padding-inline-start: var(--size-1); }
 .pis-2 { padding-inline-start: var(--size-2); }
+.pis-3 { padding-inline-start: var(--size-3); }
 .pis-4 { padding-inline-start: var(--size-4); }
 .pis-6 { padding-inline-start: var(--size-6); }
 .pis-8 { padding-inline-start: var(--size-8); }
@@ -285,6 +299,7 @@
 .pie-0\.5 { padding-inline-end: var(--size-0_5); }
 .pie-1 { padding-inline-end: var(--size-1); }
 .pie-2 { padding-inline-end: var(--size-2); }
+.pie-3 { padding-inline-end: var(--size-3); }
 .pie-4 { padding-inline-end: var(--size-4); }
 .pie-6 { padding-inline-end: var(--size-6); }
 .pie-8 { padding-inline-end: var(--size-8); }

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.16"
+  VERSION = "0.0.17"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert badge button card dialog input progress switch table
+  accordion alert avatar badge breadcrumb button card collapsible dialog input progress switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -3,13 +3,20 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
+avatar:
+  - app/assets/stylesheets/avatar.css
 badge:
   - app/assets/stylesheets/badge.css
+breadcrumb:
+  - app/assets/stylesheets/breadcrumb.css
+  - app/assets/images/chevron-right.svg
 button:
   - app/assets/stylesheets/button.css
   - app/assets/images/loader-circle.svg
 card:
   - app/assets/stylesheets/card.css
+collapsible:
+  - app/javascript/controllers/collapsible_controller.js
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg

data/lib/generators/css_zero/add/templates/app/assets/images/chevron-right.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"><path d="m9 18 6-6-6-6"/></svg>

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

@@ -6,7 +6,7 @@
   padding: var(--size-4);
   inline-size: var(--size-full);
 
-  img:not([class]) {
+  img {
     filter: var(--alert-icon-color, var(--color-filter-text-reversed));
   }
 }

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

@@ -0,0 +1,31 @@
+:root {
+  --avatar-size: var(--size-10);
+}
+
+.avatar {
+  block-size: var(--avatar-size);
+  border-radius: var(--rounded-full);
+  display: flex;
+  flex-shrink: 0;
+  inline-size: var(--avatar-size);
+  overflow: hidden;
+
+  img {
+    aspect-ratio: 1;
+    block-size: var(--size-full);
+    inline-size: var(--size-full);
+    object-fit: cover;
+  }
+}
+
+.avatar__fallback {
+  align-items: center;
+  background-color: var(--color-secondary);
+  block-size: var(--size-full);
+  border-radius: var(--rounded-full);
+  display: flex;
+  font-size: calc(var(--avatar-size) * .4);
+  inline-size: var(--size-full);
+  justify-content: center;
+  user-select: none;
+}

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

@@ -0,0 +1,22 @@
+.breadcrumb {
+  align-items: center;
+  color: var(--color-text-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  gap: var(--size-2_5);
+  overflow-wrap: break-word;
+
+  img {
+    filter: var(--color-filter-text-subtle);
+  }
+
+  a:hover {
+    color: var(--color-text);
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    gap: var(--size-1_5);
+  }
+}

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

@@ -15,7 +15,7 @@
   padding: var(--size-2) var(--size-4);
   text-align: center;
 
-  img:not([class]) {
+  img {
     filter: var(--btn-icon-color, var(--color-filter-text-reversed));
   }
 

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

@@ -47,7 +47,7 @@
     }
   }
 
-  /* Small screens */
+  /* Small screens and below */
   @media (width < 40rem) {
     border-radius: 0;
   }

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "summary" ]
+
+  toggle() {
+    this.summaryTarget.click()
+  }
+}

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

@@ -16,6 +16,7 @@
   /* SVG color values */
   --color-filter-text: invert(0);
   --color-filter-text-reversed: invert(100%);
+  --color-filter-text-subtle: invert(43%) sepia(8%) saturate(340%) hue-rotate(202deg) brightness(99%) contrast(85%);
   --color-filter-negative: invert(31%) sepia(96%) saturate(4646%) hue-rotate(350deg) brightness(91%) contrast(89%);
   --color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
 
@@ -37,6 +38,7 @@
     /* SVG color values */
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(0);
+    --color-filter-text-subtle: invert(55%) sepia(98%) saturate(0%) hue-rotate(299deg) brightness(96%) contrast(94%);
     --color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);
     --color-filter-positive: invert(23%) sepia(74%) saturate(495%) hue-rotate(91deg) brightness(88%) contrast(89%);
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.16
+  version: 0.0.17
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-04 00:00:00.000000000 Z
+date: 2024-07-06 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -37,13 +37,16 @@ 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/chevron-right.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
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/avatar.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
@@ -51,6 +54,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
+- lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb