css-zero 0.0.14 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 534451ca0aee9a1bf1b81e3831c6716e7ac071dbf0ec5f0c2e4805ef86cf9638
-  data.tar.gz: a9a70ae47d1253368e596483adab0134242292465b8b2e4dc20df18b246c7852
+  metadata.gz: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
+  data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
 SHA512:
-  metadata.gz: ffd516034332e7b6092dfa659536321295a5047d7e4ab745725c6ea3e9b03611caf8913a89417f680bf0a660c924eaf93264b29d0b4e57681556b3b87568e380
-  data.tar.gz: 8104a1a8a350126a5d5dbe74276ffaafd76aa4f85d8156e45aaf4630edf7fc9c0add9972e21c68392deb88666697117d52a01b02f077129910e729578b65b483
+  metadata.gz: 39e8b29cb429cf7e8d4d180682c17cef15e5105f51fc9c0b88ece548f688a41558569f2aeda76bf9365df202b6e01f791dd7520b5225ef0357a80e1d0a39ed70
+  data.tar.gz: 52d7914ad684c3b27766979afa42834796a361846dc679d2a44300ed1858a92490f1f5c09665b0bb40a0e4671303de8402dc4127eda6ab25d8cebc7df389318c

data/README.md

@@ -1,6 +1,6 @@
 # CSS Zero
 
-An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.
+An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
 
 ## Installation
 
@@ -227,8 +227,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <summary>Show me the code</summary>
 
 ```html+erb
-<div>
-  <dialog id="alert_dialog" class="dialog">
+<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>
 
@@ -238,8 +238,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
     </div>
   </dialog>
 
-  <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="alert_dialog" data-action="dialog-control#showModal">
-    Show alert dialog
+  <button class="btn" data-action="dialog#showModal">
+    Show dialog
   </button>
 </div>
 ```
@@ -247,18 +247,20 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 #### Dismissible Dialog
 
-<img width="400" alt="dismissible dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
+<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>
-  <dialog id="dismissible_dialog" class="dialog" style="max-inline-size: 430px;" popover>
-    <button class="btn btn--plain p-0 dialog__close" popovertarget="dismissible_dialog" popovertargetaction="hide">
-      <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
-      <span class="sr-only">Close</span>
-    </button>
+<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">
@@ -284,8 +286,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
     </div>
   </dialog>
 
-  <button class="btn" popovertarget="dismissible_dialog">
-    Show dismissible dialog
+  <button class="btn" data-action="dialog#showModal">
+    Show dialog
   </button>
 </div>
 ```
@@ -411,6 +413,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
+### More components soon...
+
 ## Development
 
 To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/app/assets/stylesheets/_reset.css

@@ -60,7 +60,7 @@ body {
 */
 
 hr {
-  height: 0; /* 1 */
+  block-size: 0; /* 1 */
   color: inherit; /* 2 */
   border-block-start-width: 1px; /* 3 */
 }
@@ -155,11 +155,11 @@ sup {
 }
 
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+  inset-block-start: -0.5em;
 }
 
 /*
@@ -242,7 +242,7 @@ progress {
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
+  block-size: auto;
 }
 
 /*
@@ -321,8 +321,8 @@ object {
 
 img,
 video {
-  max-width: 100%;
-  height: auto;
+  max-inline-size: 100%;
+  block-size: auto;
 }
 
 /*

data/app/assets/stylesheets/zutilities.css

@@ -16,6 +16,9 @@
 .items-center { align-items: center; }
 
 .grow { flex-grow: 1; }
+.grow-0	{ flex-grow: 0; }
+
+.shrink { flex-shrink: 1; }
 .shrink-0 { flex-shrink: 0; }
 
 .self-start { align-self: start; }
@@ -85,6 +88,7 @@
 .bg-main { background-color: var(--color-bg); }
 .bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
+.bg-shade { background-color: var(--color-secondary); }
 .bg-transparent { background-color: transparent; }
 
 /****************************************************************

data/lib/css_zero/version.rb

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

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

@@ -13,7 +13,7 @@ card:
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg
-  - app/javascript/controllers/dialog_control_controller.js
+  - app/javascript/controllers/dialog_controller.js
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg

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

@@ -11,9 +11,9 @@
   font-weight: var(--font-medium);
   gap: var(--size-2);
   justify-content: center;
+  min-inline-size: fit-content;
   padding: var(--size-2) var(--size-4);
   text-align: center;
-  white-space: nowrap;
 
   img:not([class]) {
     filter: var(--btn-icon-color, var(--color-filter-text-reversed));

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

@@ -18,31 +18,31 @@
   transform: var(--scale-95);
   transition-behavior: allow-discrete;
   transition-duration: var(--time-150);
-  transition-property: display overlay opacity transform;
+  transition-property: display, overlay, opacity, transform;
 
   &::backdrop {
     opacity: 0;
     transition-behavior: allow-discrete;
     transition-duration: var(--time-150);
-    transition-property: display overlay opacity;
+    transition-property: display, overlay, opacity;
   }
 
   /* In animation */
-  &:is([open], :popover-open) {
+  &[open] {
     opacity: 1; transform: var(--scale-100);
   }
 
-  &:is([open], :popover-open)::backdrop {
+  &[open]::backdrop {
     opacity: 1;
   }
 
   /* Out animation */
   @starting-style {
-    &:is([open], :popover-open) {
+    &[open] {
       opacity: 0; transform: var(--scale-95);
     }
 
-    &:is([open], :popover-open)::backdrop {
+    &[open]::backdrop {
       opacity: 0;
     }
   }
@@ -54,11 +54,12 @@
 }
 
 .dialog__close {
+  inset-block-start: var(--size-4);
+  inset-inline-end: var(--size-4);
   position: absolute;
-  inset: var(--size-4) var(--size-4) auto auto;
 }
 
 /* Prevent page scroll when dialog is open */
-html:has(.dialog:is([open], :popover-open)) {
+html:has(.dialog[open]) {
   overflow: hidden;
 }

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

@@ -12,7 +12,7 @@
 
   th {
     font-weight: var(--font-medium);
-    text-align: left;
+    text-align: start;
   }
 
   th, td {

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

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "box" ]
+
+  show() {
+    this.boxTarget.show()
+  }
+
+  showModal() {
+    this.boxTarget.showModal()
+  }
+
+  close() {
+    this.boxTarget.close()
+  }
+
+  closeOnClickOutside({ target }) {
+    if (target.nodeName === "DIALOG") this.close()
+  }
+}

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

@@ -1,20 +1,17 @@
 :root {
-  /* Color Scheme */
-  color-scheme: light dark;
-
   /* Abstractions */
-  --color-bg: light-dark(white, var(--zinc-950));
-  --color-text: light-dark(black, white);
-  --color-text-reversed: light-dark(white, black);
-  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
-  --color-border: light-dark(var(--zinc-200), var(--zinc-800));
-  --color-border-darker: light-dark(var(--zinc-400), var(--zinc-300));
+  --color-bg: white;
+  --color-text: black;
+  --color-text-reversed: white;
+  --color-text-subtle: var(--zinc-500);
+  --color-border: var(--zinc-200);
+  --color-border-darker: var(--zinc-400);
 
   /* Accent colors */
-  --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
-  --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
-  --color-negative: light-dark(var(--red-600), var(--red-900));
-  --color-positive: light-dark(var(--green-600), var(--green-900));
+  --color-primary: var(--zinc-900);
+  --color-secondary: var(--zinc-100);
+  --color-negative: var(--red-600);
+  --color-positive: var(--green-600);
 
   /* SVG color values */
   --color-filter-text: invert(0);
@@ -23,6 +20,21 @@
   --color-filter-positive: invert(48%) sepia(74%) saturate(520%) hue-rotate(90deg) brightness(89%) contrast(90%);
 
   @media (prefers-color-scheme: dark) {
+    /* Abstractions */
+    --color-bg: var(--zinc-950);
+    --color-text: white;
+    --color-text-reversed: black;
+    --color-text-subtle: var(--zinc-400);
+    --color-border: var(--zinc-800);
+    --color-border-darker: var(--zinc-300);
+
+    /* Accent colors */
+    --color-primary: var(--zinc-50);
+    --color-secondary: var(--zinc-800);
+    --color-negative: var(--red-900);
+    --color-positive: var(--green-900);
+
+    /* SVG color values */
     --color-filter-text: invert(100%);
     --color-filter-text-reversed: invert(0);
     --color-filter-negative: invert(15%) sepia(83%) saturate(2066%) hue-rotate(345deg) brightness(87%) contrast(88%);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.16
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-02 00:00:00.000000000 Z
+date: 2024-07-04 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -51,7 +51,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/dialog_control_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
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

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

@@ -1,17 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static values = { target: String }
-
-  close() {
-    document.getElementById(this.targetValue).close()
-  }
-
-  show() {
-    document.getElementById(this.targetValue).show()
-  }
-
-  showModal() {
-    document.getElementById(this.targetValue).showModal()
-  }
-}