css-zero 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2543882ee28f358c8e32084ce02eb912b3c52d07cf3d71c3f8f02bf622d4d036
-  data.tar.gz: c7d87cc7daecaf84976ed9079eef1af562583125bfbf43ab85eb270343fba589
+  metadata.gz: 5b048fb340838c3565b28feb61f03eb45b47e263da4d61870b9139fabdfc32cb
+  data.tar.gz: 5f90621c345a20caa5ef5f2f29fb25de6a2410aa39f796a2bb0144fa1fed4fb2
 SHA512:
-  metadata.gz: 5876999cd7a670a39f0fd96cca3c36bde45bf8e753af5c324a5a501b776a8e5cf4191f90843971b716829fb762c3b8837f255ce372f6feee59b583b2a88a16dd
-  data.tar.gz: b3a44196688b7145ccaa3ae738f124b0334c9511e70198c674d3353852b10eb0a43061d4506ec0175eb15d73532a63b28daa9d78a9e083cfefe2ab4572a65d46
+  metadata.gz: 23cb9762d9420521fcf3b2c66282bd0836673b73690e5ada0500106b7af9d7d4687b78d782eb3ad6968f2e69da6404b18b12a7ab532cb3269407dae899622306
+  data.tar.gz: 8033263c2ad3c3468ee5b0156f0418795891ab215e8c5804500933993a80a92aaef60566083c7c5942560f474f7eb1d109f7cbc9a8cda38442e0bd099c1910d2

data/README.md

@@ -66,7 +66,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
 
 ## Buttons
 
-<img width="1010" alt="Buttons Light" src="https://github.com/lazaronixon/css-zero/assets/2651240/df0870ae-86e5-43c4-98c5-86946a467f0c">
+<img width="1010" alt="buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ec073c9d-d3b7-4a1e-8e7f-d772ff0e0cb8">
 
 ```html+erb
 <div class="flex items-center gap">
@@ -76,7 +76,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
   <button class="btn" disabled>Disabled button</button>
 
   <button class="btn btn--primary">
-    <%= image_tag "plus.svg", class: "invert" %> <span>Icon Button</span>
+    <%= image_tag "plus.svg", role: "presentation", class: "invert" %>
+    <span>Icon button</span>
   </button>
 
   <button class="btn btn--primary" style="--btn-background: #67e8f9; --btn-color: #083344;">
@@ -104,7 +105,6 @@ Soon...
 ```css
 :root {
   --color-bg: white;
-  --color-bg-surface: var(--zinc-100);
   --color-text: var(--zinc-950);
   --color-text-reversed: white;
   --color-text-subtle: var(--zinc-500);

data/app/assets/stylesheets/buttons.css

@@ -5,7 +5,7 @@
   border: 1px solid var(--btn-border-color, var(--color-border));
   box-shadow: var(--btn-shadow, var(--shadow-sm));
   color: var(--btn-color, var(--color-text));
-  column-gap: var(--btn-column-gap, var(--size-1));
+  column-gap: var(--size-2);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-font-size, var(--text-sm));
@@ -16,7 +16,7 @@
   text-align: center;
 
   &:hover {
-    filter: var(--brightness-90);
+    filter: contrast(0.85);
   }
 
   &:disabled {

data/app/assets/stylesheets/colors.css

@@ -267,10 +267,9 @@
   /* Abstractions */
   --color-primary: var(--zinc-900);
   --color-bg: white;
-  --color-bg-surface: var(--zinc-100);
   --color-text: var(--zinc-950);
   --color-text-reversed: white;
-  --color-text-subtle: var(--zinc-600);
+  --color-text-subtle: var(--zinc-500);
   --color-border: var(--zinc-200);
 
   /* Filtered color values */
@@ -281,10 +280,10 @@
   @media (prefers-color-scheme: dark) {
     --color-primary: var(--zinc-600);
     --color-bg: var(--zinc-900);
-    --color-bg-surface: var(--zinc-950);
     --color-text: white;
     --color-text-reversed: var(--zinc-950);
-    --color-border: rgba(255, 255, 255, 0.15);
+    --color-text-subtle: var(--zinc-400);
+    --color-border: var(--zinc-700);
     --color-filter-black: var(--invert);
     --color-filter-white: var(--invert-0);
   }

data/app/assets/stylesheets/zutilities.css

@@ -6,23 +6,24 @@
 .flex-wrap { flex-wrap: wrap; }
 .inline-flex { display: inline-flex; }
 
-.justify-end { justify-content: end; }
 .justify-start { justify-content: start; }
 .justify-center { justify-content: center; }
+.justify-end { justify-content: end; }
 .justify-between { justify-content: space-between; }
 
-.items-end { align-items: end; }
 .items-start { align-items: start; }
+.items-end { align-items: end; }
 .items-center { align-items: center; }
 
 .grow { flex-grow: 1; }
 .shrink-0 { flex-shrink: 0; }
 
-.self-end { align-self: end; }
 .self-start { align-self: start; }
+.self-end { align-self: end; }
 .self-center { align-self: center; }
 
 .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
+.gap-half { column-gap: 0.5rem); row-gap: 0.5rem); }
 
 /****************************************************************
 * Text
@@ -44,7 +45,8 @@
 .break-words { word-break: break-word; }
 .break-all { word-break: break-all; }
 
-.truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
+.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
+.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
 
 .opacity-75 { opacity: var(--opacity-75); }
 .opacity-50 { opacity: var(--opacity-50); }
@@ -78,8 +80,9 @@
 * Background
 *****************************************************************/
 .bg-main { background-color: var(--color-bg); }
+.bg-black { background-color: var(--color-text); }
 .bg-white { background-color: var(--color-text-reversed); }
-.bg-surface { background-color: var(--color-bg-surface); }
+.bg-shade { background-color: var(--color-border); }
 .bg-transparent { background-color: transparent; }
 
 .invert { filter: var(--invert); }
@@ -89,13 +92,14 @@
 /****************************************************************
 * Border
 *****************************************************************/
+.border-0 { border: 0; }
 .border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
 .border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
 .border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
 .border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
 .border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
-.border-0 { border: 0; }
 
+.rounded-none { border-radius: none; }
 .rounded-sm { border-radius: var(--rounded-sm); }
 .rounded { border-radius: var(--rounded); }
 .rounded-md { border-radius: var(--rounded-md); }
@@ -104,11 +108,11 @@
 .rounded-2xl { border-radius: var(--rounded-2xl); }
 .rounded-3xl { border-radius: var(--rounded-3xl); }
 .rounded-full { border-radius: var(--rounded-full); }
-.rounded-none { border-radius: none; }
 
 /****************************************************************
 * Shadow
 *****************************************************************/
+.shadow-none { box-shadow: none; }
 .shadow-xs { box-shadow: var(--shadow-xs); }
 .shadow-sm { box-shadow: var(--shadow-sm); }
 .shadow { box-shadow: var(--shadow); }
@@ -116,7 +120,6 @@
 .shadow-lg { box-shadow: var(--shadow-lg); }
 .shadow-xl { box-shadow: var(--shadow-xl); }
 .shadow-2xl { box-shadow: var(--shadow-2xl); }
-.shadow-none { box-shadow: none; }
 
 /****************************************************************
 * Layout
@@ -126,6 +129,7 @@
 .inline-block { display: inline-block; }
 
 .relative { position: relative; }
+.sticky	{ position: sticky; }
 
 .min-w-0 { min-inline-size: 0; }
 .max-w-full { max-inline-size: 100%; }
@@ -133,9 +137,20 @@
 .h-full { block-size: 100%; }
 .w-full { inline-size: 100%; }
 
-.overflow-auto { overflow: auto; }
+.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
+.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
 .overflow-hidden { overflow: hidden; }
 
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 /****************************************************************
 * Margin
 *****************************************************************/
@@ -147,6 +162,7 @@
 .m-6 { margin: var(--size-6); }
 .m-8 { margin: var(--size-8); }
 .m-10 { margin: var(--size-10); }
+.m-auto { margin: auto; }
 
 .mb-0 { margin-block: 0; }
 .mb-0\.5 { margin-block: var(--size-0_5); }

data/lib/css_zero/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CssZero
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-12 00:00:00.000000000 Z
+date: 2024-06-14 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com