css-zero 0.0.17 → 0.0.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92f6b9adffe56fbbd63cc59f9d80869e8fd52f01dc43285e2a4fca1478099a83
-  data.tar.gz: 48bc41e660292ebcd1f9fec79a0c791cbfec06ba9e698711ab211bec155950c3
+  metadata.gz: e634509687f5553344bef169e20e981f450b6b07df35aa6dd274392858ed3834
+  data.tar.gz: 3d16de104cfa4eeb9265a4738cf472e222b95354b9097e92030f61bbd51538bd
 SHA512:
-  metadata.gz: a3ff2ead3a52606d129f09bc0c9aa9039b4cd155ea0e87d6b2b07ceedb77b346d044004f906376dccd796fa63f2fd28341c6b4339547238e202465fc16c12beb
-  data.tar.gz: e7f2b6b8b2cf02729a57051cdb7d3827ee5803bb6af9257fa8b6e968eafcd40163e671f24f3b8c4fcfebea2663d825bb483a86a7911c8e8425210f3214628010
+  metadata.gz: 306343a85beba9d8d8b94686a00278ad037ff1682f2420b69e05d82fb4c57e051d973903e3ee764f856e8e85f5ff38b366c7466f192ad20d2f7b5c3cadd6071f
+  data.tar.gz: 2b4f9569b4f006aedaf62fbbaddcce87d98ebc4b03e0fcb922efaf72d1c45e5be0af9ced635f3b5d9b7bb874c3f7c0cd92969683c6ca5a7261665257f672cef9

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 avatar badge breadcrumb button card collapsible dialog input progress switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card collapsible dialog input pagination progress prose switch table
 ```
 
 ### Requirements
@@ -89,399 +89,9 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ## Components
 
-### Accordion
+[<img src="https://github.com/user-attachments/assets/989b0ddd-064a-4ac6-8aee-f9eaaf07ff38">](https://css-zero-showcase.onrender.com/lookbook)
 
-<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>
-
-```html+erb
-<div class="accordion">
-  <details name="my_accordion">
-    <summary>Is it accessible?</summary>
-    <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
-  </details>
-  <details name="my_accordion">
-    <summary>Is it styled?</summary>
-    <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
-  </details>
-  <details name="my_accordion">
-    <summary>Is it animated?</summary>
-    <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
-  </details>
-</div>
-```
-</details>
-
-### Alert
-
-<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>
-
-```html+erb
-<div class="alert alert--negative flex items-start gap">
-  <%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>
-  <div class="flex flex-col">
-    <h1 class="font-medium leading-none mbe-1">Error</h1>
-    <p class="text-sm">Your session has expired. Please log in again.</p>
-  </div>
-</div>
-```
-</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">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex justify-start gap">
-  <div class="badge">Badge</div>
-  <div class="badge badge--secondary">Secondary</div>
-  <div class="badge badge--outline">Outline</div>
-  <div class="badge badge--positive">Positive</div>
-  <div class="badge badge--negative">Negative</div>
-</div>
-```
-</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">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div class="flex flex-wrap items-center gap" aria-busy>
-  <button class="btn">Primary</button>
-  <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-plus.svg", role: "presentation", size: 16 %>
-    <span>With icon</span>
-  </button>
-
-  <button class="btn btn--loading" disabled>
-    <span>Please wait</span>
-  </button>
-</div>
-```
-</details>
-
-### Card
-
-<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>
-
-```html+erb
-<div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
-  <div class="flex flex-col gap-sm">
-    <h1 class="text-2xl font-semibold leading-none">Create project</h1>
-    <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
-  </div>
-
-  <div class="flex flex-col gap">
-    <div class="flex flex-col gap-sm">
-      <label for="name" class="text-sm font-medium">Name</label>
-      <input type="text" id="name" placeholder="Name of your project" class="input">
-    </div>
-
-    <div class="flex flex-col gap-sm">
-      <label for="framework" class="text-sm font-medium">Framework</label>
-      <select id="framework" class="input">
-        <option value="">Select</option>
-        <option value="rails">Ruby on Rails</option>
-        <option value="laravel">Laravel</option>
-        <option value="next">Next</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="flex justify-between">
-    <button class="btn btn--outline">Cancel</button>
-    <button class="btn">Destroy</button>
-  </div>
-</div>
-```
-</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
-
-<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>
-
-```html+erb
-<div data-controller="dialog">
-  <dialog data-dialog-target="box" class="dialog">
-    <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
-    <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
-
-    <div class="flex justify-end gap-sm mbs-4">
-      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
-      <button class="btn btn--primary">Continue</button>
-    </div>
-  </dialog>
-
-  <button class="btn" data-action="dialog#showModal">
-    Show dialog
-  </button>
-</div>
-```
-</details>
-
-#### Dismissible Dialog
-
-<img width="400" alt="dismissible_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
-
-<details>
-<summary>Show me the code</summary>
-
-```html+erb
-<div data-controller="dialog">
-  <dialog data-dialog-target="box" data-action="click->dialog#closeOnClickOutside" class="dialog" style="max-inline-size: 430px;">
-    <form method="dialog">
-      <button class="btn btn--plain p-0 dialog__close">
-        <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
-        <span class="sr-only">Close</span>
-      </button>
-    </form>
-
-    <div class="flex flex-col gap">
-      <div class="flex flex-col gap-sm">
-        <h1 class="text-lg leading-none font-semibold">Edit profile</h1>
-        <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
-      </div>
-
-      <div class="flex flex-col mb-4 gap">
-        <div class="grid grid-cols-4 items-center gap">
-          <label for="name" class="text-sm font-medium text-end">Name</label>
-          <input type="text" id="name" value="Lázaro Nixon" class="input col-span-3">
-        </div>
-
-        <div class="grid grid-cols-4 items-center gap">
-          <label for="username" class="text-sm font-medium text-end">Username</label>
-          <input type="text" id="username" value="@lazaronixon" class="input col-span-3">
-        </div>
-      </div>
-
-      <div class="flex items-center justify-end">
-        <input type="submit" value= "Save changes" class="btn"/>
-      </div>
-    </div>
-  </dialog>
-
-  <button class="btn" data-action="dialog#showModal">
-    Show dialog
-  </button>
-</div>
-```
-</details>
-
-### Input
-
-<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>
-
-```html+erb
-<%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
-  <div class="flex flex-col gap-sm">
-    <%= form.label :name, class: "text-sm font-medium" %>
-    <%= form.text_field :name, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :pick_a_date, class: "text-sm font-medium" %>
-    <%= form.date_field :pick_a_date, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :age_range, class: "text-sm font-medium" %>
-    <%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
-  </div>
-
-  <div class="flex flex-col gap-sm">
-    <%= form.label :comment, class: "text-sm font-medium" %>
-    <%= form.text_area :comment, rows: 3, class: "input" %>
-  </div>
-
-  <div class="flex items-center gap-sm">
-    <%= form.check_box :status, class: "checkbox" %>
-    <%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
-  </div>
-<% end %>
-```
-</details>
-
-### Progress
-
-<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>
-
-```html
-<label>
-  <span class="sr-only">Loading progress</span>
-  <progress value="75" max="100" class="progress"></progress>
-</label>
-```
-</details>
-
-### Switch
-
-<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>
-
-```html+erb
-<div class="flex items-center gap-sm">
-  <input type="checkbox" class="switch">
-  <label for="status" class="text-sm font-medium">Airplane Mode</label>
-</div>
-```
-</details>
-
-### Table
-
-<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>
-
-```html+erb
-<table class="table">
-  <thead>
-    <tr>
-      <th>Invoice</th>
-      <th>Status</th>
-      <th>Method</th>
-      <th class="text-end">Amount</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th>INV001</th>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-end">$250.00</td>
-    </tr>
-    <tr>
-      <th>INV002</th>
-      <td>Pending</td>
-      <td>PayPal</td>
-      <td class="text-end">$150.00</td>
-    </tr>
-    <tr>
-      <th>INV003</th>
-      <td>Unpaid</td>
-      <td>Transfer</td>
-      <td class="text-end">$350.00</td>
-    </tr>
-    <tr>
-      <th>INV004</th>
-      <td>Paid</td>
-      <td>Credit Card</td>
-      <td class="text-end">$450.00</td>
-    </tr>
-  </tbody>
-  <tfoot>
-      <tr>
-        <td colspan="3">Paid</td>
-        <td class="text-end">$2,500.00</td>
-      </tr>
-  </tfoot>
-</table>
-```
-</details>
-
-### More components soon...
+More components soon...
 
 ## Development
 

data/app/assets/stylesheets/_reset.css

@@ -30,16 +30,7 @@ html,
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   tab-size: 4; /* 3 */
-  font-family: var(
-    --default-font-family,
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji'
-  ); /* 4 */
+  font-family: var(--default-font-family, system-ui, sans-serif); /* 4 */
   font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
@@ -118,17 +109,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: var(
-    --default-mono-font-family,
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    'Liberation Mono',
-    'Courier New',
-    monospace
-  ); /* 4 */
+  font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 4 */
   font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
   font-size: 1em; /* 4 */
@@ -245,6 +226,14 @@ progress {
   block-size: auto;
 }
 
+/*
+  Correct the arrow style of datalist in Chrome.
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1em;
+}
+
 /*
   Remove the inner padding in Chrome and Safari on macOS.
 */

data/app/assets/stylesheets/animations.css

@@ -1,36 +1,164 @@
 /****************************************************************
 * Animation
 * Variables for animating elements with CSS animations.
-* animation: var(--animate-pulse);
+* animation: var(--animate-fade-in) forwards;
 *****************************************************************/
 
 :root {
-  --animate-spin: spin 1s linear infinite;
-  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-bounce: bounce 1s infinite;
+  --animate-fade-in: fade-in .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-fade-in-bloom: fade-in-bloom 2s cubic-bezier(.25, 0, .3, 1);
+  --animate-fade-out: fade-out .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-fade-out-bloom: fade-out-bloom 2s cubic-bezier(.25, 0, .3, 1);
+  --animate-scale-up: scale-up .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-scale-down: scale-down .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-out-up: slide-out-up .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-out-down: slide-out-down .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-out-right: slide-out-right .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-out-left: slide-out-left .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-in-up: slide-in-up .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-in-down: slide-in-down .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-in-right: slide-in-right .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-slide-in-left: slide-in-left .5s cubic-bezier(.25, 0, .3, 1);
+  --animate-shake-x: shake-x .75s cubic-bezier(0, 0, 0, 1);
+  --animate-shake-y: shake-y .75s cubic-bezier(0, 0, 0, 1);
+  --animate-shake-z: shake-z 1s cubic-bezier(0, 0, 0, 1);
+  --animate-spin: spin 2s linear infinite;
+  --animate-ping: ping 5s cubic-bezier(0, 0, .3, 1) infinite;
+  --animate-blink: blink 1s cubic-bezier(0, 0, .3, 1) infinite;
+  --animate-float: float 3s cubic-bezier(0, 0, 0, 1) infinite;
+  --animate-bounce: bounce 2s cubic-bezier(.5, -.3, .1, 1.5) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0, 0, .3, 1) infinite;
+}
+
+@keyframes fade-in {
+  to { opacity: 1 }
+}
+
+@keyframes fade-in-bloom {
+    0% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(2) blur(10px) }
+  100% { opacity: 1; filter: brightness(1) blur(0) }
+}
+
+@keyframes fade-out {
+  to { opacity: 0 }
+}
+
+@keyframes fade-out-bloom {
+  100% { opacity: 0; filter: brightness(1) blur(20px) }
+   10% { opacity: 1; filter: brightness(2) blur(10px) }
+    0% { opacity: 1; filter: brightness(1) blur(0) }
+}
+@keyframes scale-up {
+  to { transform: scale(1.25) }
+}
+
+@keyframes scale-down {
+  to { transform: scale(.75) }
+}
+
+@keyframes slide-out-up {
+  to { transform: translateY(-100%) }
+}
+
+@keyframes slide-out-down {
+  to { transform: translateY(100%) }
+}
+
+@keyframes slide-out-right {
+  to { transform: translateX(100%) }
+}
+
+@keyframes slide-out-left {
+  to { transform: translateX(-100%) }
+}
+
+@keyframes slide-in-up {
+  from { transform: translateY(100%) }
+}
+
+@keyframes slide-in-down {
+  from { transform: translateY(-100%) }
+}
+
+@keyframes slide-in-right {
+  from { transform: translateX(-100%) }
+}
+
+@keyframes slide-in-left {
+  from { transform: translateX(100%) }
+}
+
+@keyframes shake-x {
+  0%, 100% { transform: translateX(0%) }
+  20% { transform: translateX(-5%) }
+  40% { transform: translateX(5%) }
+  60% { transform: translateX(-5%) }
+  80% { transform: translateX(5%) }
+}
+
+@keyframes shake-y {
+  0%, 100% { transform: translateY(0%) }
+  20% { transform: translateY(-5%) }
+  40% { transform: translateY(5%) }
+  60% { transform: translateY(-5%) }
+  80% { transform: translateY(5%) }
+}
+
+@keyframes shake-z {
+  0%, 100% { transform: rotate(0deg) }
+  20% { transform: rotate(-2deg) }
+  40% { transform: rotate(2deg) }
+  60% { transform: rotate(-2deg) }
+  80% { transform: rotate(2deg) }
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to { transform: rotate(1turn) }
 }
 
 @keyframes ping {
-  75%, 100% { transform: scale(2); opacity: 0; }
+  90%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
 }
 
-@keyframes pulse {
-  50% { opacity: 0.5; }
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
+
+@keyframes float {
+  50% { transform: translateY(-25%) }
 }
 
 @keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
+  25% { transform: translateY(-20%) }
+  40% { transform: translateY(-3%) }
+  0%, 60%, 100% { transform: translateY(0) }
+}
 
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+@keyframes pulse {
+  50% { transform: scale(.9,.9) }
+}
+
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-in-bloom {
+      0% { opacity: 0; filter: brightness(1) blur(20px) }
+     10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+    100% { opacity: 1; filter: brightness(1) blur(0) }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  @keyframes fade-out-bloom {
+    100% { opacity: 0; filter: brightness(1) blur(20px) }
+     10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+      0% { opacity: 1; filter: brightness(1) blur(0) }
+  }
+}

data/app/assets/stylesheets/effects.css

@@ -4,7 +4,6 @@
   * Variables for controlling the box shadow of an element.
   * box-shadow: var(--shadow);
   ****************************************************************/
-  --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);