css-zero 0.0.23 → 0.0.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 384e68aee1868c3f50f08a62b7f8f7dfa8ccbef7ebcfb8237758f9089c2ca817
-  data.tar.gz: df90558a73aaf3470093c6eddf9d20ce8372a1d7503809c23544cdd6b7d4b0dd
+  metadata.gz: b904762be7cdca0956aa0340d32bdaf524ce2f10b106e30f2487104904ce23cf
+  data.tar.gz: cd968a19dfbd06001ba9b009c73cc513d2a5440c0d53146b062e4561e4c5c187
 SHA512:
-  metadata.gz: 928d0dd662bd67da78146d1356dcacd04946a57fccb25aaf861224e79f6028fe87888520142c5cb56d492be3367b12c512739871e76e8608f56563216926dc83
-  data.tar.gz: 55578a5d4ef3a5a6cf1f2e987223bfdf99e2493fd7d649e1a56765859dbe96a9b83d75fa4321159992e04347b3c7dfd9eeec2e25f9b00f18dc0c32cdf0dd801d
+  metadata.gz: e2c9fbae5418104337666b1302c9ae824f72adcce8009cde01ed5df1a12e770726598d16d3cf1dd885a0d318328e0889922dc4230975b06129a7f72f8a7ee45d
+  data.tar.gz: 1a65d184ce40cce70efcb94afc23100e0c2019668a4aba36eee69b1abae86fd7beb966f061ec15d71c6acf8ecf18e3eef3587535da320497e1d8d086aee17ff9

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose switch table
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
 ```
 
 ### Requirements

data/app/assets/stylesheets/_reset.css

@@ -234,6 +234,14 @@ progress {
   line-height: 1em;
 }
 
+/*
+  Correct empty date field height on safari IOS.
+*/
+
+::-webkit-date-and-time-value {
+  height: 1.5em;
+}
+
 /*
   Remove the inner padding in Chrome and Safari on macOS.
 */
@@ -242,6 +250,19 @@ progress {
   -webkit-appearance: none;
 }
 
+/*
+  Remove the increment cursor for step any.
+*/
+
+input[step='any']::-webkit-inner-spin-button,
+input[step='any']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+input[step='any'] {
+  -moz-appearance: textfield;
+}
+
 /*
   Add the correct display in Chrome and Safari.
 */
@@ -314,12 +335,19 @@ video {
   block-size: auto;
 }
 
+/*
+  Prevent page scroll when modal dialog is open
+*/
+html:has(dialog:modal[open]) {
+  overflow: hidden;
+}
+
 /*
   Make elements with the HTML hidden attribute stay hidden by default.
 */
 
 [hidden] {
-  display: none !important;
+  display: none;
 }
 
 /*
@@ -327,5 +355,5 @@ video {
 */
 
 [contents] {
-  display: contents !important;
+  display: contents;
 }

data/app/assets/stylesheets/zutilities.css

@@ -1,5 +1,5 @@
 /****************************************************************
-* Flex and Grid
+* Flex
 *****************************************************************/
 .flex { display: flex; }
 .flex-col { flex-direction: column; }
@@ -28,6 +28,37 @@
 .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
 .gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
 
+/****************************************************************
+* Grid
+*****************************************************************/
+.grid { display: grid; }
+
+.grid-cols-1 { grid-template-columns: var(--grid-1); }
+.grid-cols-2 { grid-template-columns: var(--grid-2); }
+.grid-cols-3 { grid-template-columns: var(--grid-3); }
+.grid-cols-4 { grid-template-columns: var(--grid-4); }
+.grid-cols-5 { grid-template-columns: var(--grid-5); }
+.grid-cols-6 { grid-template-columns: var(--grid-6); }
+.grid-cols-7 { grid-template-columns: var(--grid-7); }
+.grid-cols-8 { grid-template-columns: var(--grid-8); }
+.grid-cols-9 { grid-template-columns: var(--grid-9); }
+.grid-cols-10 { grid-template-columns: var(--grid-10); }
+.grid-cols-11 { grid-template-columns: var(--grid-11); }
+.grid-cols-12 { grid-template-columns: var(--grid-12); }
+
+.col-span-1 { grid-column: var(--span-1); }
+.col-span-2 { grid-column: var(--span-2); }
+.col-span-3 { grid-column: var(--span-3); }
+.col-span-4 { grid-column: var(--span-4); }
+.col-span-5 { grid-column: var(--span-5); }
+.col-span-6 { grid-column: var(--span-6); }
+.col-span-7 { grid-column: var(--span-7); }
+.col-span-8 { grid-column: var(--span-8); }
+.col-span-9 { grid-column: var(--span-9); }
+.col-span-10 { grid-column: var(--span-10); }
+.col-span-11 { grid-column: var(--span-11); }
+.col-span-12 { grid-column: var(--span-12); }
+
 /****************************************************************
 * Text
 *****************************************************************/
@@ -127,8 +158,6 @@
 .rounded-md { border-radius: var(--rounded-md); }
 .rounded-lg { border-radius: var(--rounded-lg); }
 .rounded-xl { border-radius: var(--rounded-xl); }
-.rounded-2xl { border-radius: var(--rounded-2xl); }
-.rounded-3xl { border-radius: var(--rounded-3xl); }
 .rounded-full { border-radius: var(--rounded-full); }
 
 /****************************************************************
@@ -141,7 +170,6 @@
 .shadow-lg { box-shadow: var(--shadow-lg); }
 .shadow-xl { box-shadow: var(--shadow-xl); }
 .shadow-2xl { box-shadow: var(--shadow-2xl); }
-.shadow-inner { box-shadow: var(--shadow-inner); }
 
 /****************************************************************
 * Layout
@@ -308,37 +336,6 @@
 .pie-8 { padding-inline-end: var(--size-8); }
 .pie-10 { padding-inline-end: var(--size-10); }
 
-/****************************************************************
-* Grid system
-*****************************************************************/
-.grid { display: grid; }
-
-.grid-cols-1 { grid-template-columns: var(--grid-1); }
-.grid-cols-2 { grid-template-columns: var(--grid-2); }
-.grid-cols-3 { grid-template-columns: var(--grid-3); }
-.grid-cols-4 { grid-template-columns: var(--grid-4); }
-.grid-cols-5 { grid-template-columns: var(--grid-5); }
-.grid-cols-6 { grid-template-columns: var(--grid-6); }
-.grid-cols-7 { grid-template-columns: var(--grid-7); }
-.grid-cols-8 { grid-template-columns: var(--grid-8); }
-.grid-cols-9 { grid-template-columns: var(--grid-9); }
-.grid-cols-10 { grid-template-columns: var(--grid-10); }
-.grid-cols-11 { grid-template-columns: var(--grid-11); }
-.grid-cols-12 { grid-template-columns: var(--grid-12); }
-
-.col-span-1 { grid-column: var(--span-1); }
-.col-span-2 { grid-column: var(--span-2); }
-.col-span-3 { grid-column: var(--span-3); }
-.col-span-4 { grid-column: var(--span-4); }
-.col-span-5 { grid-column: var(--span-5); }
-.col-span-6 { grid-column: var(--span-6); }
-.col-span-7 { grid-column: var(--span-7); }
-.col-span-8 { grid-column: var(--span-8); }
-.col-span-9 { grid-column: var(--span-9); }
-.col-span-10 { grid-column: var(--span-10); }
-.col-span-11 { grid-column: var(--span-11); }
-.col-span-12 { grid-column: var(--span-12); }
-
 /****************************************************************
 * Accessibility
 *****************************************************************/

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.23"
+  VERSION = "0.0.25"
 end

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose switch table
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -26,6 +26,9 @@ dialog:
   - app/assets/stylesheets/dialog.css
   - app/javascript/controllers/dialog_controller.js
   - app/assets/images/x.svg
+flash:
+  - app/assets/stylesheets/flash.css
+  - app/javascript/controllers/element_removal_controller.js
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg
@@ -38,6 +41,12 @@ progress:
   - app/assets/stylesheets/progress.css
 prose:
   - app/assets/stylesheets/prose.css
+sheet:
+  - app/assets/stylesheets/sheet.css
+  - app/javascript/controllers/dialog_controller.js
+  - app/assets/images/x.svg
+skeleton:
+  - app/assets/stylesheets/skeleton.css
 switch:
   - app/assets/stylesheets/switch.css
 table:

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

@@ -27,7 +27,7 @@
     }
 
     &:focus-visible {
-      outline: var(--border-2) solid var(--color-primary);
+      outline: var(--border-2) solid var(--color-selected-dark);
       outline-offset: var(--border-2);
     }
 

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

@@ -20,7 +20,7 @@
   }
 
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-primary);
+    outline: var(--border-2) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 

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

@@ -1,6 +1,8 @@
 .card {
+  background-color: var(--color-bg);
   border-radius: var(--rounded-lg);
   border-width: var(--border);
+  color: var(--color-text);
   padding: var(--size-6);
   box-shadow: var(--shadow-sm);
 }

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

@@ -13,7 +13,7 @@
   scroll-snap-type: x mandatory;
 
   > * {
-    flex: 1 0 100%;
+    flex: 0 0 100%;
     scroll-snap-stop: always;
     scroll-snap-align: center;
   }

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

@@ -66,8 +66,3 @@
     display: none;
   }
 }
-
-/* Prevent page scroll when dialog is open */
-html:has(.dialog[open]) {
-  overflow: hidden;
-}

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

@@ -0,0 +1,22 @@
+.flash {
+  animation: appear-then-fade 4s 300ms both;
+  backdrop-filter: var(--blur) var(--contrast-75);
+  background-color: hsl(from var(--color-text) h s l / .65);
+  border-radius: var(--rounded-full);
+  color: var(--color-text-reversed);
+  margin-block-start: var(--size-4);
+  margin-inline: auto;
+  padding: var(--size-2) var(--size-4);
+  position: fixed;
+  text-align: center;
+
+  img {
+    display: inline;
+    margin-block-end: var(--size-1);
+  }
+}
+
+@keyframes appear-then-fade {
+  0%, 100% { opacity: 0; }
+  5%, 60%  { opacity: 1; }
+}

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

@@ -31,6 +31,11 @@
     margin-inline-end: var(--size-2);
   }
 
+  &:autofill {
+    -webkit-text-fill-color: var(--color-text);
+    -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
+  }
+
   &::placeholder {
     color: var(--color-text-subtle);
   }
@@ -39,6 +44,10 @@
     border-color: var(--color-negative);
   }
 
+  &:user-invalid ~ .invalid-feedback {
+    display: block;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: var(--opacity-50);
@@ -57,7 +66,7 @@
 :is(.input, .range, .checkbox, .radio) {
   /* Keyboard navigation */
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-primary);
+    outline: var(--border-2) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 

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

@@ -131,7 +131,7 @@
   }
 
   a {
-    font-weight: 500;
+    color: var(--color-link);
     text-decoration: underline;
     text-decoration-skip-ink: auto;
   }

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

@@ -0,0 +1,61 @@
+.sheet {
+  background-color: var(--color-bg);
+  border-inline-start-width: var(--border);
+  box-shadow: var(--shadow-lg);
+  block-size: 100%;
+  color: var(--color-text);
+  inline-size: var(--size-3-4);
+  margin-inline-start: auto;
+  max-block-size: none;
+  max-inline-size: var(--width-sm);
+  padding: var(--size-6);
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, .8);
+  }
+
+  /* Setup animation */
+  transform: translateX(100%);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-500);
+  transition-property: display, overlay, transform;
+
+  &::backdrop {
+    opacity: 0;
+    transition-behavior: allow-discrete;
+    transition-duration: var(--time-150);
+    transition-property: display, overlay, opacity;
+  }
+
+  /* In animation */
+  &[open] {
+    transform: translateX(0);
+  }
+
+  &[open]::backdrop {
+    opacity: 1;
+  }
+
+  /* Out animation */
+  @starting-style {
+    &[open] {
+      transform: translateX(100%);
+    }
+
+    &[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Small screens and below */
+  @media (width < 40rem) {
+    max-inline-size: none;
+    text-align: center;
+  }
+}
+
+.sheet__close {
+  inset-block-start: var(--size-4);
+  inset-inline-end: var(--size-4);
+  position: absolute;
+}

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

@@ -0,0 +1,5 @@
+.skeleton {
+  animation: var(--animate-blink);
+  border-radius: var(--rounded-md);
+  background-color: var(--color-border-light);
+}

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

@@ -30,7 +30,7 @@
   }
 
   &:focus-visible {
-    outline: var(--border-2) solid var(--color-primary);
+    outline: var(--border-2) solid var(--color-selected-dark);
     outline-offset: var(--border-2);
   }
 

data/lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  remove() {
+    this.element.remove()
+  }
+}

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

@@ -4,9 +4,12 @@
   --color-text: black;
   --color-text-reversed: white;
   --color-text-subtle: var(--zinc-500);
+  --color-link: var(--blue-700);
   --color-border-light: var(--zinc-100);
   --color-border: var(--zinc-200);
   --color-border-dark: var(--zinc-400);
+  --color-selected: var(--blue-100);
+  --color-selected-dark: var(--blue-300);
 
   /* Accent colors */
   --color-primary: var(--zinc-900);
@@ -27,9 +30,12 @@
     --color-text: white;
     --color-text-reversed: black;
     --color-text-subtle: var(--zinc-400);
+    --color-link: var(--sky-400);
     --color-border-light: var(--zinc-800);
     --color-border: var(--zinc-800);
     --color-border-dark: var(--zinc-600);
+    --color-selected: var(--blue-950);
+    --color-selected-dark: var(--blue-800);
 
     /* Accent colors */
     --color-primary: var(--zinc-50);
@@ -60,3 +66,7 @@ body {
   font-synthesis-weight: none;
   text-rendering: optimizeLegibility;
 }
+
+::selection {
+  background-color: var(--color-selected);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.23
+  version: 0.0.25
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-20 00:00:00.000000000 Z
+date: 2024-07-23 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -56,15 +56,19 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
 - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css