css-zero 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 06fbbf313570aa8314a8d4a3fe447220f2642a468c44a0910c82e2e1da7fcfd4
-  data.tar.gz: 96f848c73205fd3a031094148d0595e944c2390d50cdbb5c7c39c234e1661423
+  metadata.gz: e4b91f7cfe11150ba5eea2a4d3cffa4097f5a2cfb746d7dbb58e44c8ed344b05
+  data.tar.gz: f8702fe3a28fc2b93714b310e449eb0e54d2bf4b90815abdd7a9a5b1b3a19eac
 SHA512:
-  metadata.gz: 241c0d3d460b9cb9b35a7f3f58efab830ae390bab038823ad52388e29c414fe4a27fa3670148ce37c05dbddd2efc1123aae9a4e76eecb25801e5e12f4085327c
-  data.tar.gz: fd56376c326bd18dc4ec2bee6d45e4c89e5919b3b1869ce70d4fb38af150c04cf1b95203f28300e6ef26b4c628cb890d73b79ffb925322438222c3a137018e93
+  metadata.gz: 70980bc8b30c9c76babd5d37b3802cb9f2fd8f5c0dfef67fc67aa519050c8253431210a76ed153f4e82b3c14bb61715ecf0043254593320000d9a8c5247b95b0
+  data.tar.gz: 98fa14f8b800ca3daf3411834249372646b18d3a41bb5dd0d84204de983a192376c195163a2e4b16aa71873c027a5d387ae9258f3b39a97d51b0236b6c0fa6ff

data/README.md

@@ -12,25 +12,25 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
 
 ## Usage
 
+```html
+<h1 class="text-xl font-bold mb-md">
+  Write most page content using utility classes. Use what is available or add more when needed.
+</h1>
+
+<div class="component">
+  Write custom CSS using predefined variables for more complex stuff.
+</div>
+```
+
 ```css
 .component {
-  background-color: var(--red-500);  
+  background-color: var(--red-500);
   border-radius: var(--rounded);
   height: var(--size-4);
-
-  @media (min-width: 48rem) {
-    display: none;
-  }
 }
 ```
 
-```html
-  <div class="component mbe-md">
-    <p>content here...</p>
-  </div>
-```
-
-## Files
+## Reference
 
 - [Sizes](app/assets/stylesheets/sizes.css)
 - [Colors](app/assets/stylesheets/colors.css)
@@ -44,6 +44,27 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
 - [Animations](app/assets/stylesheets/animations.css)
 - [Utilities](app/assets/stylesheets/zutilities.css)
 
+## Customization
+
+```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-border: var(--zinc-200);
+}
+```
+
+```html
+<div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
+  More HTML tags here...
+</div>
+```
+
 ## 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/colors.css

@@ -1,4 +1,5 @@
 :root {
+  /* Named color values */
   --slate-50:  #f8fafc;
   --slate-100: #f1f5f9;
   --slate-200: #e2e8f0;
@@ -262,4 +263,25 @@
   --rose-800: #9f1239;
   --rose-900: #881337;
   --rose-950: #4c0519;
+
+  /* Abstractions */
+  --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-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-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.1);
+  }
 }

data/app/assets/stylesheets/sizes.css

@@ -70,19 +70,20 @@
   /****************************************************************
   * Widths
   *****************************************************************/
-  --width-3xs: 16rem; /* 256px */
-  --width-2xs: 18rem; /* 288px */
-  --width-xs:  20rem; /* 320px */
-  --width-sm:  24rem; /* 384px */
-  --width-md:  28rem; /* 448px */
-  --width-lg:  32rem; /* 512px */
-  --width-xl:  36rem; /* 576px */
-  --width-2xl: 42rem; /* 672px */
-  --width-3xl: 48rem; /* 768px */
-  --width-4xl: 56rem; /* 896px */
-  --width-5xl: 64rem; /* 1024px */
-  --width-6xl: 72rem; /* 1152px */
-  --width-7xl: 80rem; /* 1280px */
+  --width-3xs:   16rem; /* 256px */
+  --width-2xs:   18rem; /* 288px */
+  --width-xs:    20rem; /* 320px */
+  --width-sm:    24rem; /* 384px */
+  --width-md:    28rem; /* 448px */
+  --width-lg:    32rem; /* 512px */
+  --width-xl:    36rem; /* 576px */
+  --width-2xl:   42rem; /* 672px */
+  --width-3xl:   48rem; /* 768px */
+  --width-4xl:   56rem; /* 896px */
+  --width-5xl:   64rem; /* 1024px */
+  --width-6xl:   72rem; /* 1152px */
+  --width-7xl:   80rem; /* 1280px */
+  --width-prose: 65ch;
 
   /****************************************************************
   * Breakpoints

data/app/assets/stylesheets/zutilities.css

@@ -47,7 +47,7 @@
 /****************************************************************
 * Text
 *****************************************************************/
-.font-normal { font-weight: var(--font-normal); }
+.font-normal { font-weight: var(--font-normal); font-style: normal; }
 .font-medium { font-weight: var(--font-medium); }
 .font-bold { font-weight: var(--font-bold); }
 
@@ -71,7 +71,11 @@
 .leading-tight { line-height: var(--leading-tight); }
 .leading-normal { line-height: var(--leading-normal); }
 
-.text-inherit { color: inherit; }
+.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); }
@@ -83,16 +87,33 @@
 .text-4xl { font-size: var(--text-4xl); }
 .text-5xl { font-size: var(--text-5xl); }
 
+/****************************************************************
+* Background
+*****************************************************************/
+.bg-main { background-color: var(--color-bg); }
+.bg-white { background-color: var(--color-text-reversed); }
+.bg-surface { background-color: var(--color-bg-surface); }
+.bg-transparent { background-color: transparent; }
+
 /****************************************************************
 * Border
 *****************************************************************/
-.border-0 { border-width: 0px; }
-.border-t { border-top-width: 1px; }
-.border-b { border-bottom-width: 1px; }
-.border-l { border-left-width: 1px; }
-.border-r { border-right-width: 1px; }
-.border { border-width: 1px; }
-.rounded-full { border-radius: 9999px; }
+.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); }
+
+/****************************************************************
+* Shadow
+*****************************************************************/
+.shadow { box-shadow: var(--shadow); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
 
 /****************************************************************
 * Layout

data/lib/css_zero/version.rb

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

metadata

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