css-zero 0.0.33 → 0.0.35

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b786d5d38b248a7289f4dcce1246ddcdffebc21deb4327dc8ac575c1466ba5b9
-  data.tar.gz: 4364538047fdcd11f323687ed346662b334651404bdabf2c125d822c3f96cc3f
+  metadata.gz: 1860fb6136673d380985cf9fe42371a58d99bbda6c64f3c506a1412e6447e163
+  data.tar.gz: 27595e7ed7052f1cd5f05fe4e5c807738224530328062d41b09f1d5327478289
 SHA512:
-  metadata.gz: a9efa1df9e4643f47ef0dd2cf9d334a02ddfcbfcf1979819acdada8068aefe81c22347180d392151b6d8699ca6022253763cb7438bba59c20fec123f5d7ff0d8
-  data.tar.gz: fd75ca1525671ceb6ffcb24c3fd4291e0f044366999c2958c3fb33c84973fff0ca32e35c509cfce4b7e5ead3218706787fc29763096a1b30ad8c438d281a76ed
+  metadata.gz: 39143697d27bd095e2c9c238ad36f69dec5d6733113a58096e14c454ea2dddc5f295a7a1b2035875447e7173da89fbebfc06488c8f4f4a9ef23739270e339c6c
+  data.tar.gz: df3d03f4cc537150251d0971108a2ae0a2c26f7e07f6a40b1474bdab48c64aa629b483a0092b7d4ee1a493b2eaaeea82bb02a779cad3c926096b889736480322

data/app/assets/stylesheets/zutilities.css

@@ -25,8 +25,8 @@
 .self-end { align-self: end; }
 .self-center { align-self: center; }
 
-.gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
-.gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
+.gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
+.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }
 
 /****************************************************************
 * Text

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.33"
+  VERSION = "0.0.35"
 end

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

@@ -34,6 +34,7 @@ input:
   - app/assets/images/select-arrow.svg
 layouts:
   - app/assets/stylesheets/layouts.css
+  - app/assets/images/menu.svg
 pagination:
   - app/assets/stylesheets/pagination.css
   - app/assets/images/chevron-right.svg

data/lib/generators/css_zero/add/templates/app/assets/images/menu.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"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>

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

@@ -65,13 +65,16 @@
     visibility: hidden;
   }
 
+  &::after {
+    filter: var(--btn-icon-color, var(--color-filter-text-reversed));
+  }
+
   &::after {
     animation: spin 1s linear infinite;
     background-image: url("loader-circle.svg");
     background-size: cover;
     block-size: var(--size-4);
     content: "";
-    filter: var(--btn-icon-color, var(--color-filter-text-reversed));
     inline-size: var(--size-4);
     position: absolute;
   }

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(--dialog-width, var(--width-lg));
-  padding: var(--size-6);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);
@@ -55,6 +54,10 @@
   }
 }
 
+.dialog__content {
+  padding: var(--size-6);
+}
+
 .dialog__close {
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);

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

@@ -11,11 +11,10 @@
     padding-block: revert;
   }
 
-  &:is(textarea):not([rows]) {
+  &:is(textarea[rows=auto]) {
     field-sizing: content;
     max-block-size: calc(10lh + var(--size-6));
     min-block-size: calc(3lh  + var(--size-6));
-    resize: none;
   }
 
   &:is(select):not([multiple], [size]) {
@@ -44,18 +43,23 @@
   }
 }
 
+/* Hide invalid feedback by default */
+.invalid-feedback {
+  display: none;
+}
+
 /* Containers that act like (and contain) inputs */
 .input--actor {
-  &:focus-within {
-    outline: var(--border-2) solid var(--color-selected-dark);
-    outline-offset: var(--border-2);
-  }
-
   &:has(:-webkit-autofill) {
     -webkit-text-fill-color: var(--color-text);
     -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
   }
 
+  &:focus-within {
+    outline: var(--border-2) solid var(--color-selected-dark);
+    outline-offset: var(--border-2);
+  }
+
   .input__character {
     border: 0; inline-size: 100%; outline: 0;
   }

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

@@ -14,6 +14,10 @@
   }
 }
 
+.sidebar__toggle {
+  @media (width >= 48rem) { display: none; }
+}
+
 .layout-pancake {
   display: grid;
   grid-template-rows: auto 1fr auto;

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

@@ -8,7 +8,6 @@
   margin-inline: var(--sheet-margin);
   max-block-size: none;
   max-inline-size: var(--width-sm);
-  padding: var(--size-6);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);
@@ -62,6 +61,11 @@
   --sheet-transform: translateX(100%);
 }
 
+.sheet__content {
+  block-size: var(--size-full);
+  padding: var(--size-6);
+}
+
 .sheet__close {
   inset-block-start: var(--size-4);
   inset-inline-end: var(--size-4);

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

@@ -1,7 +1,7 @@
 :root {
   /* Abstractions */
   --color-bg: white;
-  --color-text: black;
+  --color-text: var(--zinc-950);
   --color-text-reversed: white;
   --color-text-subtle: var(--zinc-500);
   --color-link: var(--blue-700);
@@ -18,17 +18,17 @@
   --color-positive: var(--green-600);
 
   /* SVG color values */
-  --color-filter-text: invert(0);
+  --color-filter-text: invert(2%) sepia(3%) saturate(3904%) hue-rotate(201deg) brightness(98%) contrast(97%);
   --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%);
+  --color-filter-text-subtle: invert(46%) sepia(8%) saturate(371%) hue-rotate(202deg) brightness(93%) contrast(85%);
+  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
+  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);
 
   @media (prefers-color-scheme: dark) {
     /* Abstractions */
     --color-bg: var(--zinc-950);
     --color-text: white;
-    --color-text-reversed: black;
+    --color-text-reversed: var(--zinc-950);
     --color-text-subtle: var(--zinc-400);
     --color-link: var(--sky-400);
     --color-border-light: var(--zinc-800);
@@ -45,10 +45,10 @@
 
     /* 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%);
+    --color-filter-text-reversed: invert(2%) sepia(3%) saturate(3904%) hue-rotate(201deg) brightness(98%) contrast(97%);
+    --color-filter-text-subtle: invert(76%) sepia(8%) saturate(230%) hue-rotate(201deg) brightness(84%) contrast(87%);
+    --color-filter-negative: invert(16%) sepia(62%) saturate(2100%) hue-rotate(337deg) brightness(92%) contrast(100%);
+    --color-filter-positive: invert(21%) sepia(62%) saturate(549%) hue-rotate(91deg) brightness(101%) contrast(91%);
   }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.33
+  version: 0.0.35
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-30 00:00:00.000000000 Z
+date: 2024-09-10 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -29,8 +29,6 @@ files:
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
 - app/assets/stylesheets/zutilities.css
-- app/helpers/dialog_helper.rb
-- app/helpers/tabs_helper.rb
 - lib/css-zero.rb
 - lib/css_zero/engine.rb
 - lib/css_zero/version.rb
@@ -45,6 +43,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg
 - lib/generators/css_zero/add/templates/app/assets/images/ellipsis.svg
 - lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg
+- lib/generators/css_zero/add/templates/app/assets/images/menu.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

data/app/helpers/dialog_helper.rb

@@ -1,5 +0,0 @@
-module DialogHelper
-  def button_to_close_dialog(content = nil, **, &)
-    tag.form tag.button(content, **, &), method: :dialog
-  end
-end

data/app/helpers/tabs_helper.rb

@@ -1,9 +0,0 @@
-module TabsHelper
-  def tab_button(content = nil, id:, value:, **, &)
-    tag.button(content, id:, class: "btn", role: "tab", aria: { controls: value }, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
-  end
-
-  def tab_panel(id, labelled_by:, **, &)
-    tag.div(id:, role: "tabpanel", aria: { labelledby: labelled_by }, data: { tabs_target: "tab" }, **, &)
-  end
-end