css-zero 0.0.27 → 0.0.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6042a247b900f1c53ca209d67a3cd9de65cea06889a70ad5b13643b915195a08
-  data.tar.gz: 5cd927896caf176105f857803a676f26e802041578a255777f371b79b8df8555
+  metadata.gz: 3cda5cb9b3086b51114cccdb4a7a10902beac2812c1998c4cae31ae3563c5b47
+  data.tar.gz: c6d552de01e769780b38865095f24ad74a14a1abfbdaff41fe93d8d88af025da
 SHA512:
-  metadata.gz: 4adc0e6555602ace413d7da7205bbff33de92a2372130f7f3646f05f6951deb04b858746115adce32bdda70bd52497b85a12cff03afa21beeff4751a3639beae
-  data.tar.gz: 14a8a5733e07206451923270e5e042635a40edbcacda8225ce80f1fe8a4387d490dd4fea58d204d31b0f9494ea1f09644d3fe3ddaeb27a5ca0a84f045d7f7aae
+  metadata.gz: c24dd54fb996f9e988fe204c48c60118d1de4a68effcd67cbda29e821fc00a6b16cacfda5e6e642d8bc3fbffa6497ee098d2c1c1930924d65c4856383a0ea786
+  data.tar.gz: 9a085d56fe698c68c736788ae62f193adab29d03761f77c8d03f8246d32c6c423aef5780a940d6fddb210e480d18e92a21bfb3df2df2f57185d1d39707c61520

data/README.md

@@ -52,7 +52,6 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
 *= require transform
 *= require transition
 *= require typography
-*= require zindex
 *= require_tree .
 *= require_self
 *= require zutilities

data/app/assets/stylesheets/_reset.css

@@ -44,7 +44,6 @@ html:has(dialog:modal[open]) {
   overflow: hidden;
 }
 
-
 /*
   Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
@@ -202,14 +201,6 @@ input:where([type='button'], [type='reset'], [type='submit']),
   appearance: button;
 }
 
-/*
-  Revert padding block, it can be noticed in select with multiple.
-*/
-
-option {
-  padding-block: revert;
-}
-
 /*
   Use the modern Firefox focus style for all focusable elements.
 */
@@ -303,14 +294,6 @@ textarea {
   color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
 }
 
-/*
-  Make sure disabled buttons don't get the pointer cursor.
-*/
-
-:disabled {
-  cursor: default;
-}
-
 /*
   1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
   2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)

data/app/assets/stylesheets/filters.css

@@ -106,27 +106,27 @@
   /****************************************************************
   * Opacity
   * Utilities for applying backdrop opacity filters to an element.
-  * backdrop-filter: var(--opaqueness-45);
+  * backdrop-filter: var(--alpha-45);
   *****************************************************************/
-  --opaqueness-0:	  opacity(0);
-  --opaqueness-5:	  opacity(0.05);
-  --opaqueness-10:	opacity(0.1);
-  --opaqueness-15:	opacity(0.15);
-  --opaqueness-20:	opacity(0.2);
-  --opaqueness-25:	opacity(0.25);
-  --opaqueness-30:	opacity(0.3);
-  --opaqueness-35:	opacity(0.35);
-  --opaqueness-40:	opacity(0.4);
-  --opaqueness-45:	opacity(0.45);
-  --opaqueness-50:	opacity(0.5);
-  --opaqueness-55:	opacity(0.55);
-  --opaqueness-60:	opacity(0.6);
-  --opaqueness-65:	opacity(0.65);
-  --opaqueness-70:	opacity(0.7);
-  --opaqueness-75:	opacity(0.75);
-  --opaqueness-80:	opacity(0.8);
-  --opaqueness-85:	opacity(0.85);
-  --opaqueness-90:	opacity(0.9);
-  --opaqueness-95:	opacity(0.95);
-  --opaqueness-100: opacity(1);
+  --alpha-0:	 opacity(0);
+  --alpha-5:	 opacity(0.05);
+  --alpha-10:	 opacity(0.1);
+  --alpha-15:	 opacity(0.15);
+  --alpha-20:	 opacity(0.2);
+  --alpha-25:	 opacity(0.25);
+  --alpha-30:	 opacity(0.3);
+  --alpha-35:	 opacity(0.35);
+  --alpha-40:	 opacity(0.4);
+  --alpha-45:	 opacity(0.45);
+  --alpha-50:	 opacity(0.5);
+  --alpha-55:	 opacity(0.55);
+  --alpha-60:	 opacity(0.6);
+  --alpha-65:	 opacity(0.65);
+  --alpha-70:	 opacity(0.7);
+  --alpha-75:	 opacity(0.75);
+  --alpha-80:	 opacity(0.8);
+  --alpha-85:	 opacity(0.85);
+  --alpha-90:	 opacity(0.9);
+  --alpha-95:	 opacity(0.95);
+  --alpha-100: opacity(1);
 }

data/app/assets/stylesheets/sizes.css

@@ -88,11 +88,7 @@
   * Aspect Ratio
   *****************************************************************/
   --aspect-square: 1/1;
-  --aspect-landscape: 4/3;
-  --aspect-portrait: 3/4;
   --aspect-widescreen: 16/9;
-  --aspect-ultrawide: 18/5;
-  --aspect-golden: 1.6180/1;
 
   /****************************************************************
   * Breakpoints

data/app/assets/stylesheets/transition.css

@@ -4,8 +4,8 @@
   * Variables for controlling which CSS properties transition.
   * transition-property: var(--transition);
   *****************************************************************/
-  --transition:        background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-  --transition-colors: background-color, border-color, color, fill, stroke;
+  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
+  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
 
   /****************************************************************
   * Transition Timing
@@ -24,9 +24,8 @@
   /****************************************************************
   * Transition Timing Function
   * Variables for controlling the easing of CSS transitions.
-  * transition-timing-function: var(--ease-linear);
+  * transition-timing-function: var(--ease-in);
   *****************************************************************/
-  --ease-linear: linear;
   --ease-in:     cubic-bezier(0.4, 0, 1, 1);
   --ease-out:    cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

data/app/assets/stylesheets/zutilities.css

@@ -28,37 +28,6 @@
 .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
 *****************************************************************/
@@ -151,6 +120,7 @@
 
 .border-solid { border-style: solid; }
 .border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
 
 .rounded-none { border-radius: none; }
 .rounded-sm { border-radius: var(--rounded-sm); }
@@ -340,11 +310,10 @@
 * Accessibility
 *****************************************************************/
 .sr-only {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  position: absolute;
   white-space: nowrap;
-  border-width: 0;
 }

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.27"
+  VERSION = "0.0.29"
 end

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

@@ -1,12 +1,16 @@
 :where(.accordion) {
-  inline-size: var(--size-full);
-
   details {
     border-block-end-width: var(--border);
-    transition: padding var(--time-150) var(--ease-in-out);
 
-    &[open] {
-      padding-block-end: var(--size-4);
+    &::details-content {
+      block-size: 0; overflow: hidden;
+      transition-behavior: allow-discrete;
+      transition-duration: var(--time-150);
+      transition-property: content-visibility height;
+    }
+
+    &[open]::details-content {
+      block-size: calc-size(auto);
     }
 
     &[open] summary::after {
@@ -42,7 +46,7 @@
       content: "";
       filter: var(--color-filter-text);
       inline-size: var(--size-4);
-      transition: transform var(--time-200) var(--ease-in-out);
+      transition: transform var(--time-200);
     }
   }
 }

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

@@ -1,5 +1,4 @@
 .badge {
-  align-items: center;
   background-color: var(--badge-background, var(--color-primary));
   border-radius: var(--rounded-full);
   border-width: var(--badge-border-width, 0);

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

@@ -10,7 +10,7 @@
   font-weight: var(--font-medium);
   gap: var(--size-2);
   justify-content: center;
-  min-inline-size: fit-content;
+  white-space: nowrap;
   padding: var(--size-2) var(--size-4);
   text-align: center;
 
@@ -60,25 +60,19 @@
   --btn-icon-color: var(--color-filter-negative);
 }
 
-.btn--loading {
-  [aria-busy] &:disabled {
-    position: relative;
-
-    > * {
-      visibility: hidden;
-    }
+[aria-busy] .btn--loading:disabled {
+  > * {
+    visibility: hidden;
+  }
 
-    &::after {
-      animation: var(--animate-spin);
-      animation-duration: 1s;
-      background-image: url("loader-circle.svg");
-      background-size: cover;
-      block-size: var(--size-6);
-      content: "";
-      filter: var(--btn-icon-color, var(--color-filter-text-reversed));
-      inline-size: var(--size-6);
-      margin-inline: auto;
-      position: absolute;
-    }
+  &::after {
+    animation: spin 1s linear infinite;
+    background-image: url("loader-circle.svg");
+    background-size: cover;
+    block-size: var(--size-4);
+    content: "";
+    filter: var(--btn-icon-color, var(--color-filter-text-reversed));
+    inline-size: var(--size-4);
+    position: absolute;
   }
 }

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

@@ -1,8 +1,6 @@
 .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

@@ -12,6 +12,10 @@
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   > * {
     flex: 0 0 100%;
     scroll-snap-stop: always;

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

@@ -51,7 +51,7 @@
     border-end-end-radius: 0;
     border-end-start-radius: 0;
     margin-block-end: 0;
-    max-inline-size: none !important;
+    max-inline-size: none;
   }
 }
 

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

@@ -7,6 +7,10 @@
   inline-size: var(--size-full);
   padding: var(--size-2) var(--size-3);
 
+  option {
+    padding-block: revert;
+  }
+
   &:is(textarea):not([rows]) {
     field-sizing: content;
     max-block-size: calc(10lh + var(--size-6));
@@ -26,15 +30,11 @@
     margin-inline-end: var(--size-2);
   }
 
-  &:autofill {
+  &:-webkit-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);
-  }
-
   &:user-invalid {
     border-color: var(--color-negative);
   }
@@ -49,16 +49,16 @@
   }
 }
 
-.range {
+.checkbox, .radio {
   accent-color: var(--color-primary);
+  transform: scale(1.15);
 }
 
-.checkbox, .radio {
+.range {
   accent-color: var(--color-primary);
-  transform: scale(1.15);
 }
 
-:is(.input, .range, .checkbox, .radio) {
+:is(.input, .checkbox, .radio, .range) {
   &:focus-visible {
     outline: var(--border-2) solid var(--color-selected-dark);
     outline-offset: var(--border-2);

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

@@ -15,7 +15,6 @@
     font-weight: var(--font-medium);
     gap: var(--size-2);
     justify-content: center;
-    min-inline-size: fit-content;
     padding: var(--size-2) var(--size-4);
   }
 

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

@@ -49,7 +49,6 @@
 
   @media (width < 40rem) {
     max-inline-size: none;
-    text-align: center;
   }
 }
 

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

@@ -9,7 +9,6 @@
   inline-size: var(--size-11);
   transition-duration: var(--time-150);
   transition-property: var(--transition-colors);
-  transition-timing-function: var(--ease-in-out);
 
   &:checked {
     background-color: var(--color-primary);
@@ -26,7 +25,7 @@
     border-radius: var(--rounded-full);
     content: "";
     display: block;
-    transition: margin var(--time-150) var(--ease-in-out);
+    transition: margin var(--time-150);
   }
 
   &:focus-visible {

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

@@ -1,6 +1,5 @@
 .toggle {
   display: inline-flex;
-  position: relative;
 
   &:has(:focus-visible) .btn {
     outline: var(--border-2) solid var(--color-selected-dark);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.27
+  version: 0.0.29
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-25 00:00:00.000000000 Z
+date: 2024-08-07 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -24,12 +24,10 @@ files:
 - app/assets/stylesheets/colors.css
 - app/assets/stylesheets/effects.css
 - app/assets/stylesheets/filters.css
-- app/assets/stylesheets/grid.css
 - app/assets/stylesheets/sizes.css
 - app/assets/stylesheets/transform.css
 - app/assets/stylesheets/transition.css
 - app/assets/stylesheets/typography.css
-- app/assets/stylesheets/zindex.css
 - app/assets/stylesheets/zutilities.css
 - app/helpers/dialog_helper.rb
 - lib/css-zero.rb

data/app/assets/stylesheets/grid.css

@@ -1,38 +0,0 @@
-:root {
-  /****************************************************************
-  * Grid Template
-  * Variables for specifying the columns/rows in a grid layout.
-  * grid-template-columns|grid-template-rows: var(--grid-1);
-  *****************************************************************/
-  --grid-1:  repeat(1, minmax(0, 1fr));
-  --grid-2:  repeat(2, minmax(0, 1fr));
-  --grid-3:  repeat(3, minmax(0, 1fr));
-  --grid-4:  repeat(4, minmax(0, 1fr));
-  --grid-5:  repeat(5, minmax(0, 1fr));
-  --grid-6:  repeat(6, minmax(0, 1fr));
-  --grid-7:  repeat(7, minmax(0, 1fr));
-  --grid-8:  repeat(8, minmax(0, 1fr));
-  --grid-9:  repeat(9, minmax(0, 1fr));
-  --grid-10: repeat(10, minmax(0, 1fr));
-  --grid-11: repeat(11, minmax(0, 1fr));
-  --grid-12: repeat(12, minmax(0, 1fr));
-
-  /****************************************************************
-  * Grid Start / End
-  * Variables for controlling how elements are sized and placed across grid columns/rows.
-  * grid-column|grid-row: var(--span-1);
-  *****************************************************************/
-  --span-1:  span 1 / span 1;
-  --span-2:  span 2 / span 2;
-  --span-3:  span 3 / span 3;
-  --span-4:  span 4 / span 4;
-  --span-5:  span 5 / span 5;
-  --span-6:  span 6 / span 6;
-  --span-7:  span 7 / span 7;
-  --span-8:  span 8 / span 8;
-  --span-9:  span 9 / span 9;
-  --span-10: span 10 / span 10;
-  --span-11: span 11 / span 11;
-  --span-12: span 12 / span 12;
-  --span-full: 1 / -1;
-}

data/app/assets/stylesheets/zindex.css

@@ -1,13 +0,0 @@
-/****************************************************************
-* Z-Index
-* Utilities for controlling the stack order of an element.
-* z-index: var(--z-10);
-*****************************************************************/
-
-:root {
-  --z-10:	10;
-  --z-20:	20;
-  --z-30:	30;
-  --z-40:	40;
-  --z-50:	50;
-}