css-zero 0.0.3 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4b91f7cfe11150ba5eea2a4d3cffa4097f5a2cfb746d7dbb58e44c8ed344b05
-  data.tar.gz: f8702fe3a28fc2b93714b310e449eb0e54d2bf4b90815abdd7a9a5b1b3a19eac
+  metadata.gz: 6ffc5f62e22b31b31e16f686c8b0bfa28f0705883feba2c8a1e0ee3c3fba899b
+  data.tar.gz: d95a6605554c3edaa33467c21f5d3f3c6a444d4d2b52b959b93ead0ba21a82e2
 SHA512:
-  metadata.gz: 70980bc8b30c9c76babd5d37b3802cb9f2fd8f5c0dfef67fc67aa519050c8253431210a76ed153f4e82b3c14bb61715ecf0043254593320000d9a8c5247b95b0
-  data.tar.gz: 98fa14f8b800ca3daf3411834249372646b18d3a41bb5dd0d84204de983a192376c195163a2e4b16aa71873c027a5d387ae9258f3b39a97d51b0236b6c0fa6ff
+  metadata.gz: c44ca53734614ef31bc070444a9fe428bb8c74a20b2b067737c81d1dde48e06af1720ae648887757caa70af0ea9959cddf48eb0221dd7e445451997efc1fa960
+  data.tar.gz: a65c232a3e2d7e94457572f45ffba5663faabba287a485e9d318e3638d216b82c1e31b3a61e45adaaaad7a8c48e2c30c21cd41de26a88d7f3e6452cf6d4597ac

data/README.md

@@ -42,23 +42,35 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
 - [Transform](app/assets/stylesheets/transform.css)
 - [Transition](app/assets/stylesheets/transition.css)
 - [Animations](app/assets/stylesheets/animations.css)
+- [Buttons](app/assets/stylesheets/buttons.css)
 - [Utilities](app/assets/stylesheets/zutilities.css)
 
 ## Customization
 
+Global level
+
 ```css
 :root {
-  --color-negative: var(--pink-700);
-  --color-postive: var(--lime-700);
   --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);
 }
 ```
 
+Component level
+
+```css
+.btn--colored {
+  --btn-background: var(--cyan-500);
+  --btn-color: var(--cyan-950);
+}
+```
+
+Style level
+
 ```html
 <div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
   More HTML tags here...

data/app/assets/stylesheets/buttons.css

@@ -0,0 +1,32 @@
+.btn {
+  align-items: center;
+  background-color: var(--btn-background, var(--color-primary));
+  border-radius: var(--btn-border-radius, var(--rounded-lg));
+  border: 1px solid var(--btn-border-color, transparent);
+  color: var(--btn-color, white);
+  column-gap: var(--btn-column-gap, var(--size-1));
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--btn-font-size, var(--text-sm));
+  font-weight: var(--btn-font-weight, var(--font-semibold));
+  justify-content: center;
+  line-height: var(--btn-line-height, var(--leading-6));
+  padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
+  text-align: center;
+
+  &:disabled {
+    pointer-events: none;
+    filter: var(--grayscale) opacity(0.5);
+  }
+}
+
+.btn--plain {
+  --btn-background: transparent;
+  --btn-border-color: var(--color-border);
+  --btn-color: var(--color-text);
+}
+
+.btn--outline {
+  --btn-background: transparent;
+  --btn-color: var(--color-text);
+}

data/app/assets/stylesheets/colors.css

@@ -265,23 +265,22 @@
   --rose-950: #4c0519;
 
   /* Abstractions */
-  --color-negative: var(--pink-700);
-  --color-postive: var(--lime-700);
+  --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);
 
   /* Redefine named color values for dark mode */
   @media (prefers-color-scheme: dark) {
-    --color-negative: var(--pink-400);
-    --color-postive: var(--lime-300);
+    --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-text-subtle: var(--zinc-400);
     --color-border: rgba(255, 255, 255, 0.1);
   }
 }

data/app/assets/stylesheets/zutilities.css

@@ -74,8 +74,6 @@
 .text-primary { color: var(--color-text); }
 .text-reversed { color: var(--color-text-reversed); }
 .text-subtle { color: var(--color-text-subtle); }
-.text-negative { color: var(--color-negative); }
-.text-positive { color: var(--color-positive); }
 
 .text-xs { font-size: var(--text-xs); }
 .text-sm { font-size: var(--text-sm); }
@@ -98,14 +96,17 @@
 /****************************************************************
 * Border
 *****************************************************************/
+.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; }
-.border { border: var(--border-size, 1px) solid var(--color-border); }
-.border-t { border-top: var(--border-size, 1px) solid var(--color-border); }
-.border-b { border-bottom: var(--border-size, 1px) solid var(--color-border); }
-.border-l { border-left: var(--border-size, 1px) solid var(--color-border); }
-.border-r { border-right: var(--border-size, 1px) solid var(--color-border); }
 
-.border-radius { border-radius: var(--border-radius, 0.5rem); }
+.rounded-sm { border-radius: var(--rounded-sm); }
+.rounded { border-radius: var(--rounded); }
+.rounded-lg { border-radius: var(--rounded-lg); }
+.rounded-full { border-radius: var(--rounded-full); }
 
 /****************************************************************
 * Shadow

data/lib/css_zero/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-10 00:00:00.000000000 Z
+date: 2024-06-11 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -21,6 +21,7 @@ files:
 - app/assets/stylesheets/_reset.css
 - app/assets/stylesheets/animations.css
 - app/assets/stylesheets/borders.css
+- app/assets/stylesheets/buttons.css
 - app/assets/stylesheets/colors.css
 - app/assets/stylesheets/effects.css
 - app/assets/stylesheets/filters.css