css-zero 0.0.9 → 0.0.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1f5501303185bf9a119ea52aaaf5cbc03cef023cb3cd3fc2f3f884239d130e5
-  data.tar.gz: 49ca85bd7206b421c6ea37b5ad672beeaa0824843d3d4e9c7c97077d8044c75d
+  metadata.gz: 1627717e8a9e7cedf50a2bf68f7fff9eb3b9a36991d6b9a68dc54271d6a035a2
+  data.tar.gz: 6a5fbdf78fe2d73522011672a7b3b536a001e0eeb5953a4ffc7171aca361bfab
 SHA512:
-  metadata.gz: 7a5bd42832b1db0e2be98bea5421743311af95e1252f62a4b71497bee8e487172b914fe999b9dfecf507d267d4f4b8fb2292c4d18f967341550bb235acfa61ee
-  data.tar.gz: 99d987f57ca8c09000ac836ed175c6ad288af18d50b8a54fc8eff06523f7fb354e71208fcc40e6a4c99c12cb7932564698746124805639b69830bc602537514e
+  metadata.gz: 4efd2234d0690ea705ccd894db2b5d89bce059177f7620d65f0e1d998bf41e94a6470a626b4600e96b1cb99ea9c2e77d95c8e7961569c3a8908045ee1bc2a8af
+  data.tar.gz: 83c1cef52f7a3f328af20e97720464c8043d63da94b8694d20b74fdd80762a5c838f624fc4b52ef9224d3e4fcf49fe4993ffc1bc010a49d248af24ba21a821d0

data/README.md

@@ -70,15 +70,20 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
 
 ## Inputs
 
-<img width="469" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/987201b3-2583-43af-b1f2-db6af1eabbaa">
+<img width="436" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/9935df82-606f-4ebb-bfd7-d18c9bc8b5f5">
 
-```html+erb
+```html
 <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>
 
+  <div class="flex flex-col grow gap-small">
+    <label for="date_field" class="text-sm font-medium">Date picker</label>
+    <input type="date" id="date_field" class="input">
+  </div>
+
   <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">
@@ -106,21 +111,20 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
 
 ## Buttons
 
-<img width="779" alt="Buttons" src="https://github.com/lazaronixon/css-zero/assets/2651240/ea0bdafe-7bd9-46a4-a87c-b11dd0836707">
+<img width="783" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/4e6a6829-5dd0-4eff-9b2f-33c9de85d3ef">
 
-```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>
+```html
+<div class="flex justify-center gap">
+  <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--positive">Positive</button>
+  <button class="btn btn--negative">Negative</button>
 
   <button class="btn">
     <%= image_tag "plus.svg", role: "presentation", size: 20 %>
-    <span>Icon button</span>
-  </button>
-
-  <button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
-    Custom button
+    <span>With icon</span>
   </button>
 </div>
 ```
@@ -129,7 +133,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository for reference.
 
 <img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
 
-```html+erb
+```html
 <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>

data/app/assets/stylesheets/buttons.css

@@ -18,12 +18,23 @@
     filter: var(--btn-icon-color, var(--color-filter-text-reversed));
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--color-selected);
+    outline-offset: var(--border-2);
+  }
+
   &:disabled {
     opacity: var(--opacity-50);
     pointer-events: none;
   }
 }
 
+.btn--secondary {
+  --btn-background: var(--color-secondary);
+  --btn-color: var(--color-text);
+  --btn-icon-color: var(--color-filter-text);
+}
+
 .btn--outline {
   --btn-background: transparent;
   --btn-border-color: var(--color-border);
@@ -39,8 +50,10 @@
 
 .btn--positive {
   --btn-background: var(--color-positive);
+  --btn-color: white;
 }
 
 .btn--negative {
   --btn-background: var(--color-negative);
+  --btn-color: white;
 }

data/app/assets/stylesheets/colors.css

@@ -271,13 +271,14 @@
   --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-selected:      light-dark(var(--zinc-400), var(--zinc-300));
   --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));
+  --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));
 
   /* Filtered color values */
   --color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);

data/app/assets/stylesheets/dialog.css

@@ -3,7 +3,6 @@
   border: 1px solid var(--dialog-border-color, var(--color-border));
   border-radius: var(--dialog-border-radius, var(--rounded-lg));
   box-shadow: var(--dialog-shadow, var(--shadow-lg));
-  color: var(--dialog-color, var(--color-text));
   margin: auto; inline-size: 100%;
   max-inline-size: var(--dialog-size, var(--width-lg));
   padding: var(--dialog-padding, var(--size-6));

data/app/assets/stylesheets/inputs.css

@@ -4,6 +4,7 @@
   border-radius: var(--input-border-radius, var(--rounded-md));
   border: 1px solid var(--input-border-color, var(--color-border));
   box-shadow: var(--input-shadow, var(--shadow-xs));
+  color: var(--input-color, var(--color-text));
   font-size: var(--input-font-size, var(--text-sm));
   inline-size: 100%;
   padding: var(--input-padding, .5rem .75rem);
@@ -26,6 +27,11 @@
     background-repeat: no-repeat;
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--color-selected);
+    outline-offset: var(--border-2);
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: var(--opacity-50);
@@ -37,7 +43,12 @@
 }
 
 [type="checkbox"], [type="radio"] {
-  accent-color: var(--color-primary);
+  accent-color: var(--check-color, var(--color-primary));
   height: var(--check-size, var(--size-4));
   width:  var(--check-size, var(--size-4));
+
+  &:focus-visible {
+    outline: 2px solid var(--color-selected);
+    outline-offset: var(--border-2);
+  }
 }

data/app/assets/stylesheets/zutilities.css

@@ -84,7 +84,6 @@
 .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-border-light); }
 .bg-transparent { background-color: transparent; }
 
 /****************************************************************

data/lib/css_zero/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.9
+  version: 0.0.10
 platform: ruby
 authors:
 - Lázaro Nixon
@@ -20,7 +20,6 @@ files:
 - Rakefile
 - app/assets/stylesheets/_reset.css
 - app/assets/stylesheets/animations.css
-- app/assets/stylesheets/base.css
 - app/assets/stylesheets/borders.css
 - app/assets/stylesheets/buttons.css
 - app/assets/stylesheets/colors.css
@@ -29,7 +28,6 @@ files:
 - app/assets/stylesheets/filters.css
 - app/assets/stylesheets/grid.css
 - app/assets/stylesheets/inputs.css
-- app/assets/stylesheets/separators.css
 - app/assets/stylesheets/sizes.css
 - app/assets/stylesheets/transform.css
 - app/assets/stylesheets/transition.css

data/app/assets/stylesheets/base.css

@@ -1,4 +0,0 @@
-html, body {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-}

data/app/assets/stylesheets/separators.css

@@ -1,4 +0,0 @@
-.separator {
-  border-block-start: 1px var(--separator-style, solid) var(--separator-color, var(--color-border));
-  inline-size: 100%;
-}