css-zero 0.0.9 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1f5501303185bf9a119ea52aaaf5cbc03cef023cb3cd3fc2f3f884239d130e5
-  data.tar.gz: 49ca85bd7206b421c6ea37b5ad672beeaa0824843d3d4e9c7c97077d8044c75d
+  metadata.gz: 4876a943502a072ea16fdf3b98641d336fcd3a284993d6a52ece9570bff8ef31
+  data.tar.gz: 660128733f0131cc9b6e6a57f82b6fe17bd6a4b0dc8b5cb1517a7c401f89b583
 SHA512:
-  metadata.gz: 7a5bd42832b1db0e2be98bea5421743311af95e1252f62a4b71497bee8e487172b914fe999b9dfecf507d267d4f4b8fb2292c4d18f967341550bb235acfa61ee
-  data.tar.gz: 99d987f57ca8c09000ac836ed175c6ad288af18d50b8a54fc8eff06523f7fb354e71208fcc40e6a4c99c12cb7932564698746124805639b69830bc602537514e
+  metadata.gz: ac3b0c1bcc189e57e7bc36f39effc2214c081c6541be194a387eec2d17f5ce5eca27942bf10b0a0d46dbca2ee785e619270806fa8e6fc040ee0f74676dc047be
+  data.tar.gz: f5024cc9427dc53deb71772a641498eb44e01d32303acb4707851c9694312bb24e7a11e89a62c1050e3cea1682de2c47f7a54e4d8b48ef9439f59b7645a8c8f8

data/README.md

@@ -4,47 +4,29 @@ 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.
+
 ```
 bundle add css-zero
 ```
 
-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>
+Add the base.css file to your application.
 
-```html+erb
-<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
 ```
-</details>
+bin/rails generate css_zero:install
+```
 
-If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
+Add only the components you need. (Optional)
 
-<details>
-  <summary>Click here to see how</summary>
-
-  ```css
-  *= require _reset
-  *= require animations
-  *= require base
-  *= require borders
-  *= require buttons
-  *= require colors
-  *= require dialog
-  *= require effects
-  *= require filters
-  *= require grid
-  *= require inputs
-  *= require separators
-  *= require sizes
-  *= require transform
-  *= require transition
-  *= require typography
-  *= require_tree .
-  *= require_self
-  *= require zutilities
-  ```
-</details>
+```
+bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
+```
 
 ## Usage
 
@@ -53,126 +35,346 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
   Write most page content using utility classes.
 </h1>
 
-<div class="component">
-  Write custom CSS using predefined variables for components.
+<div class="custom-component">
+  Create components using CSS variables.
+</div>
+
+<div class="card">
+  Optionally, copy pre-built components into your application.
 </div>
 ```
 
 ```css
-.component {
+.custom-component {
   background-color: var(--red-500);
   border-radius: var(--rounded);
-  height: var(--size-4);
+  block-size: var(--size-4);
 }
 ```
 
-Check the [CSS files](app/assets/stylesheets) in the repository for reference.
+Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
+
+## Components
+
+### Accordion
+
+<img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
 
-## Inputs
+<details>
+<summary>Show me the code!</summary>
+
+```html
+<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>
 
-<img width="469" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/987201b3-2583-43af-b1f2-db6af1eabbaa">
+### 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="flex flex-col w-full gap" style="max-inline-size: 24rem;">
-  <div class="flex flex-col grow gap-small">
-    <label for="name_field" class="text-sm font-medium">Full name</label>
-    <input type="text" id="name_field" class="input">
+<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>
 
-  <div class="flex flex-col grow gap-small">
-    <label for="file_field" class="text-sm font-medium">File</label>
-    <input type="file" id="file_field" class="input">
-  </div>
+### Alert Dialog
 
-  <div class="flex flex-col grow gap-small">
-    <label for="age_range_Field" class="text-sm font-medium">Age Range</label>
-    <select id="age_range_Field" class="input">
-      <option value="0-13">0-13</option>
-      <option value="14-17">14-17</option>
-    </select>
-  </div>
+<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
 
-  <div class="flex flex-col grow gap-small">
-    <label for="comment_field" class="text-sm font-medium">Comment</label>
-    <textarea id="comment_field" class="input"></textarea>
-  </div>
+<details>
+<summary>Show me the code!</summary>
 
-  <div class="flex items-center gap-small">
-    <input type="checkbox" id="terms">
-    <label for="terms" class="text-sm font-medium">Accept terms and conditions</label>
-  </div>
+```html
+<div>
+  <dialog id="my_alert_dialog" class="alert-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-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
+    Show alert dialog
+  </button>
 </div>
 ```
+</details>
 
-## Buttons
+### Badge
 
-<img width="779" alt="Buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ea0bdafe-7bd9-46a4-a87c-b11dd0836707">
+<img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
 
-```html+erb
-<div class="flex items-center gap">
-  <button class="btn">Primary button</button>
-  <button class="btn btn--outline">Outline button</button>
-  <button class="btn btn--plain">Plain button</button>
+<details>
+<summary>Show me the code!</summary>
+
+```html
+<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>
+
+### Button
+
+<img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/0c2ee625-9e6b-4f9c-8437-8d6751e4e508">
+
+<details>
+<summary>Show me the code!</summary>
+
+```html
+<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--negative">Negative</button>
 
   <button class="btn">
-    <%= image_tag "plus.svg", role: "presentation", size: 20 %>
-    <span>Icon button</span>
+    <%= image_tag "circle-alert.svg", role: "presentation", size: 16 %>
+    <span>With icon</span>
   </button>
 
-  <button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
-    Custom 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
+<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>
 
-## Dialog
+  <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>
 
-<img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
+  <div class="flex justify-between">
+    <button class="btn btn--outline">Cancel</button>
+    <button class="btn">Destroy</button>
+  </div>
+</div>
+```
+</details>
+
+### Dialog
+
+<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>
+
+```html
+<artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
+<div>
+  <dialog id="my_dialog" class="dialog" style="max-inline-size: 430px;" popover>
+    <button class="btn btn--plain p-0 dialog__close" popovertarget="my_dialog" popovertargetaction="hide">
+      <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
+      <span class="sr-only">Close</span>
+    </button>
+
+    <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" popovertarget="my_dialog">
+    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
-<dialog id="my_modal" 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>
+<%= 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 gap-small justify-end mbs-4">
-    <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
-    <button class="btn">Continue</button>
+  <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>
-</dialog>
 
-<button class="btn" onClick="my_modal.showModal();">Show modal</button>
+  <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>
 
-## Customization
+### Progress
 
-### Root level
+<img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
 
-```css
-:root {
-  --color-bg: white;
-  --color-text: var(--zinc-950);
-  --color-text-reversed: white;
-  --color-text-subtle: var(--zinc-500);
-  --color-border: var(--zinc-200);
-}
+<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>
 
-### Class level
+### Switch
 
-```css
-.btn--colored {
-  --btn-background: var(--cyan-500);
-  --btn-color: var(--cyan-950);
-}
+<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
 
-### Style level
+<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
-<button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
-  Colored button
-</button>
+<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>
 
 ## Development
 

data/app/assets/stylesheets/_reset.css

@@ -62,7 +62,7 @@ body {
 hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
+  border-block-start-width: 1px; /* 3 */
 }
 
 /*

data/app/assets/stylesheets/colors.css

@@ -1,5 +1,4 @@
 :root {
-  /* Named color values */
   --slate-50:  #f8fafc;
   --slate-100: #f1f5f9;
   --slate-200: #e2e8f0;
@@ -263,28 +262,4 @@
   --rose-800: #9f1239;
   --rose-900: #881337;
   --rose-950: #4c0519;
-
-  color-scheme: light dark;
-
-  /* Abstractions */
-  --color-bg:            light-dark(white, var(--zinc-950));
-  --color-text:          light-dark(var(--zinc-950), var(--zinc-50));
-  --color-text-reversed: light-dark(var(--zinc-50), var(--zinc-950));
-  --color-text-subtle:   light-dark(var(--zinc-500), var(--zinc-400));
-  --color-border-light:  light-dark(var(--zinc-100), var(--zinc-900));
-  --color-border:        light-dark(var(--zinc-200), var(--zinc-800));
-
-  /* Accent colors */
-  --color-primary:  light-dark(var(--zinc-900), var(--zinc-50));
-  --color-negative: light-dark(var(--red-600), var(--red-900));
-  --color-positive: light-dark(var(--green-600), var(--green-900));
-
-  /* Filtered color values */
-  --color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
-  --color-filter-text-reversed: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
-
-  @media (prefers-color-scheme: dark) {
-    --color-filter-text: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
-    --color-filter-text-reversed: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
-  }
 }

data/app/assets/stylesheets/transform.css

@@ -2,56 +2,48 @@
   /****************************************************************
   * Scale
   * Variables for scaling elements with transform.
-  * transform: var(--scale-0);
+  * transform: scale(--scale-100);
   *****************************************************************/
-  --scale-0:   0;
-  --scale-50:  0.50;
-  --scale-75:  0.75;
-  --scale-90:  0.90;
-  --scale-95:  0.95;
-  --scale-100: 1;
-  --scale-105: 1.05;
-  --scale-110: 1.10;
-  --scale-125: 1.25;
-  --scale-150: 1.50;
+  --scale-50:  scale(0.50);
+  --scale-75:  scale(0.75);
+  --scale-90:  scale(0.90);
+  --scale-95:  scale(0.95);
+  --scale-100: scale(1);
+  --scale-105: scale(1.05);
+  --scale-110: scale(1.10);
+  --scale-125: scale(1.25);
+  --scale-150: scale(1.50);
 
   /****************************************************************
   * Rotate
   * Variables for rotating elements with transform.
   * transform: var(--rotate-45);
   *****************************************************************/
-  --rotate-0:   0deg;
-  --rotate-1:   1deg;
-  --rotate-2:   2deg;
-  --rotate-3:   3deg;
-  --rotate-6:   6deg;
-  --rotate-12:  12deg;
-  --rotate-45:  45deg;
-  --rotate-90:  90deg;
-  --rotate-180: 180deg;
-
-  /****************************************************************
-  * Translate
-  * Variables for translating elements with transform.
-  * transform: var(--translate-1-2);
-  *****************************************************************/
-  --translate-1-2:  50%;
-  --translate-1-3:  33.333333%;
-  --translate-2-3:  66.666667%;
-  --translate-1-4:  25%;
-  --translate-2-4:  50%;
-  --translate-3-4:  75%;
-  --translate-full: 100%;
+  --rotate-0:   rotate(0deg);
+  --rotate-1:   rotate(1deg);
+  --rotate-2:   rotate(2deg);
+  --rotate-3:   rotate(3deg);
+  --rotate-6:   rotate(6deg);
+  --rotate-12:  rotate(12deg);
+  --rotate-45:  rotate(45deg);
+  --rotate-90:  rotate(90deg);
+  --rotate-180: rotate(180deg);
 
   /****************************************************************
   * Skew
   * Varibles for skewing elements with transform.
-  * transform: var(--skew-3);
+  * transform: var(--skew-x-3);
   *****************************************************************/
-  --skew-0:  0deg;
-  --skew-1:  1deg;
-  --skew-2:  2deg;
-  --skew-3:  3deg;
-  --skew-6:  6deg;
-  --skew-12: 12deg;
+  --skew-x-0:  skewX(0deg);
+  --skew-y-0:  skewY(0deg);
+  --skew-x-1:  skewX(1deg);
+  --skew-y-1:  skewY(1deg);
+  --skew-x-2:  skewX(2deg);
+  --skew-y-2:  skewY(2deg);
+  --skew-x-3:  skewX(3deg);
+  --skew-y-3:  skewY(3deg);
+  --skew-x-6:  skewX(6deg);
+  --skew-y-6:  skewY(6deg);
+  --skew-x-12: skewX(12deg);
+  --skew-y-12: skewY(12deg);
 }

data/app/assets/stylesheets/transition.css

@@ -4,13 +4,8 @@
   * Variables for controlling which CSS properties transition.
   * transition-property: var(--transition);
   *****************************************************************/
-  --transition-none:      none;
-  --transition-all:       all;
-  --transition:           background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-  --transition-colors:    background-color, border-color, color, fill, stroke;
-  --transition-opacity:   opacity;
-  --transition-shadow:    box-shadow;
-  --transition-transform: transform;
+  --transition:        background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  --transition-colors: background-color, border-color, color, fill, stroke;
 
   /****************************************************************
   * Transition Timing