css-zero 0.0.15 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
-  data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
+  metadata.gz: 25eac2e80a7b075843033e5db405786dd14e9f802cb47ce2fd1f0375e7841565
+  data.tar.gz: 52cd0c2ed8d8eb740d44e29210ff8652088cac7509ccf024a957f837ada2cfc2
 SHA512:
-  metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
-  data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da
+  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
 
@@ -413,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.15"
+  VERSION = "0.0.16"
 end

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

@@ -7,7 +7,6 @@
   inline-size: var(--size-full);
   margin: auto;
   max-inline-size: var(--width-lg);
-  overflow: hidden;
   padding: var(--size-6);
 
   &::backdrop {
@@ -19,13 +18,13 @@
   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 */
@@ -55,8 +54,9 @@
 }
 
 .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 */

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

@@ -12,7 +12,7 @@ export default class extends Controller {
   }
 
   close() {
-    this.boxTarget.close("dismiss")
+    this.boxTarget.close()
   }
 
   closeOnClickOutside({ target }) {

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.15
+  version: 0.0.16
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-03 00:00:00.000000000 Z
+date: 2024-07-04 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com