css-zero 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +2 -1
- data/app/assets/stylesheets/_reset.css +12 -4
- data/app/assets/stylesheets/zindex.css +13 -0
- data/app/assets/stylesheets/zutilities.css +32 -35
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/USAGE +1 -1
- data/lib/generators/css_zero/add/resources.yml +7 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/breadcrumb.css +0 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +2 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +0 -2
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css +22 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +10 -7
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css +0 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css +5 -0
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +1 -1
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js +7 -0
- data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +10 -0
- metadata +6 -2
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: 2a4abc591fd494e591052a0bc63cb46af6d9a0cbae7c126c07b914a15a097175
         | 
| 4 | 
            +
              data.tar.gz: d5ed800b2b6a0ef53ccb8f41a6a8706f63dbe0b92e266b3c606afbf21d143aef
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: fdf03752432fe469809a8299338cd0726022514b462cb0ab7523bfe533169cd47a6edc97fc7fb34e9ef31432f9c1470a257bcf15bca53eb40e905030f47dff3f
         | 
| 7 | 
            +
              data.tar.gz: 79397cb9785170dc47b34669592e67478159b2a75585155177174dd19951fc2325837af549a188d97e3e6dff26fcef87855f877e4889863f2a88e63fd1a673f3
         | 
    
        data/README.md
    CHANGED
    
    | @@ -19,7 +19,7 @@ bin/rails generate css_zero:install | |
| 19 19 | 
             
            Add only the components you need. (Optional)
         | 
| 20 20 |  | 
| 21 21 | 
             
            ```
         | 
| 22 | 
            -
            bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
         | 
| 22 | 
            +
            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
         | 
| 23 23 | 
             
            ```
         | 
| 24 24 |  | 
| 25 25 | 
             
            ### Requirements
         | 
| @@ -54,6 +54,7 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo | |
| 54 54 | 
             
            *= require typography
         | 
| 55 55 | 
             
            *= require_tree .
         | 
| 56 56 | 
             
            *= require_self
         | 
| 57 | 
            +
            *= require zindex
         | 
| 57 58 | 
             
            *= require zutilities
         | 
| 58 59 | 
             
            */
         | 
| 59 60 | 
             
            ```
         | 
| @@ -193,6 +193,14 @@ input:where([type='button'], [type='reset'], [type='submit']), | |
| 193 193 | 
             
              appearance: button;
         | 
| 194 194 | 
             
            }
         | 
| 195 195 |  | 
| 196 | 
            +
            /*
         | 
| 197 | 
            +
              Revert padding block, it can be noticed in select with multiple.
         | 
| 198 | 
            +
            */
         | 
| 199 | 
            +
             | 
| 200 | 
            +
            option {
         | 
| 201 | 
            +
              padding-block: revert;
         | 
| 202 | 
            +
            }
         | 
| 203 | 
            +
             | 
| 196 204 | 
             
            /*
         | 
| 197 205 | 
             
              Use the modern Firefox focus style for all focusable elements.
         | 
| 198 206 | 
             
            */
         | 
| @@ -336,9 +344,9 @@ video { | |
| 336 344 | 
             
            }
         | 
| 337 345 |  | 
| 338 346 | 
             
            /*
         | 
| 339 | 
            -
              Prevent page scroll when dialog is open
         | 
| 347 | 
            +
              Prevent page scroll when modal dialog is open
         | 
| 340 348 | 
             
            */
         | 
| 341 | 
            -
            html:has(dialog[open]) {
         | 
| 349 | 
            +
            html:has(dialog:modal[open]) {
         | 
| 342 350 | 
             
              overflow: hidden;
         | 
| 343 351 | 
             
            }
         | 
| 344 352 |  | 
| @@ -347,7 +355,7 @@ html:has(dialog[open]) { | |
| 347 355 | 
             
            */
         | 
| 348 356 |  | 
| 349 357 | 
             
            [hidden] {
         | 
| 350 | 
            -
              display: none | 
| 358 | 
            +
              display: none;
         | 
| 351 359 | 
             
            }
         | 
| 352 360 |  | 
| 353 361 | 
             
            /*
         | 
| @@ -355,5 +363,5 @@ html:has(dialog[open]) { | |
| 355 363 | 
             
            */
         | 
| 356 364 |  | 
| 357 365 | 
             
            [contents] {
         | 
| 358 | 
            -
              display: contents | 
| 366 | 
            +
              display: contents;
         | 
| 359 367 | 
             
            }
         | 
| @@ -0,0 +1,13 @@ | |
| 1 | 
            +
            /****************************************************************
         | 
| 2 | 
            +
            * Z-Index
         | 
| 3 | 
            +
            * Utilities for controlling the stack order of an element.
         | 
| 4 | 
            +
            * z-index: var(--z-10);
         | 
| 5 | 
            +
            *****************************************************************/
         | 
| 6 | 
            +
             | 
| 7 | 
            +
            :root {
         | 
| 8 | 
            +
              --z-10:	10;
         | 
| 9 | 
            +
              --z-20:	20;
         | 
| 10 | 
            +
              --z-30:	30;
         | 
| 11 | 
            +
              --z-40:	40;
         | 
| 12 | 
            +
              --z-50:	50;
         | 
| 13 | 
            +
            }
         | 
| @@ -1,5 +1,5 @@ | |
| 1 1 | 
             
            /****************************************************************
         | 
| 2 | 
            -
            * Flex | 
| 2 | 
            +
            * Flex
         | 
| 3 3 | 
             
            *****************************************************************/
         | 
| 4 4 | 
             
            .flex { display: flex; }
         | 
| 5 5 | 
             
            .flex-col { flex-direction: column; }
         | 
| @@ -28,6 +28,37 @@ | |
| 28 28 | 
             
            .gap { column-gap: var(--column-gap, 1rem); row-gap: var(--row-gap, 1rem); }
         | 
| 29 29 | 
             
            .gap-sm { column-gap: 0.5rem; row-gap: 0.5rem; }
         | 
| 30 30 |  | 
| 31 | 
            +
            /****************************************************************
         | 
| 32 | 
            +
            * Grid
         | 
| 33 | 
            +
            *****************************************************************/
         | 
| 34 | 
            +
            .grid { display: grid; }
         | 
| 35 | 
            +
             | 
| 36 | 
            +
            .grid-cols-1 { grid-template-columns: var(--grid-1); }
         | 
| 37 | 
            +
            .grid-cols-2 { grid-template-columns: var(--grid-2); }
         | 
| 38 | 
            +
            .grid-cols-3 { grid-template-columns: var(--grid-3); }
         | 
| 39 | 
            +
            .grid-cols-4 { grid-template-columns: var(--grid-4); }
         | 
| 40 | 
            +
            .grid-cols-5 { grid-template-columns: var(--grid-5); }
         | 
| 41 | 
            +
            .grid-cols-6 { grid-template-columns: var(--grid-6); }
         | 
| 42 | 
            +
            .grid-cols-7 { grid-template-columns: var(--grid-7); }
         | 
| 43 | 
            +
            .grid-cols-8 { grid-template-columns: var(--grid-8); }
         | 
| 44 | 
            +
            .grid-cols-9 { grid-template-columns: var(--grid-9); }
         | 
| 45 | 
            +
            .grid-cols-10 { grid-template-columns: var(--grid-10); }
         | 
| 46 | 
            +
            .grid-cols-11 { grid-template-columns: var(--grid-11); }
         | 
| 47 | 
            +
            .grid-cols-12 { grid-template-columns: var(--grid-12); }
         | 
| 48 | 
            +
             | 
| 49 | 
            +
            .col-span-1 { grid-column: var(--span-1); }
         | 
| 50 | 
            +
            .col-span-2 { grid-column: var(--span-2); }
         | 
| 51 | 
            +
            .col-span-3 { grid-column: var(--span-3); }
         | 
| 52 | 
            +
            .col-span-4 { grid-column: var(--span-4); }
         | 
| 53 | 
            +
            .col-span-5 { grid-column: var(--span-5); }
         | 
| 54 | 
            +
            .col-span-6 { grid-column: var(--span-6); }
         | 
| 55 | 
            +
            .col-span-7 { grid-column: var(--span-7); }
         | 
| 56 | 
            +
            .col-span-8 { grid-column: var(--span-8); }
         | 
| 57 | 
            +
            .col-span-9 { grid-column: var(--span-9); }
         | 
| 58 | 
            +
            .col-span-10 { grid-column: var(--span-10); }
         | 
| 59 | 
            +
            .col-span-11 { grid-column: var(--span-11); }
         | 
| 60 | 
            +
            .col-span-12 { grid-column: var(--span-12); }
         | 
| 61 | 
            +
             | 
| 31 62 | 
             
            /****************************************************************
         | 
| 32 63 | 
             
            * Text
         | 
| 33 64 | 
             
            *****************************************************************/
         | 
| @@ -127,8 +158,6 @@ | |
| 127 158 | 
             
            .rounded-md { border-radius: var(--rounded-md); }
         | 
| 128 159 | 
             
            .rounded-lg { border-radius: var(--rounded-lg); }
         | 
| 129 160 | 
             
            .rounded-xl { border-radius: var(--rounded-xl); }
         | 
| 130 | 
            -
            .rounded-2xl { border-radius: var(--rounded-2xl); }
         | 
| 131 | 
            -
            .rounded-3xl { border-radius: var(--rounded-3xl); }
         | 
| 132 161 | 
             
            .rounded-full { border-radius: var(--rounded-full); }
         | 
| 133 162 |  | 
| 134 163 | 
             
            /****************************************************************
         | 
| @@ -141,7 +170,6 @@ | |
| 141 170 | 
             
            .shadow-lg { box-shadow: var(--shadow-lg); }
         | 
| 142 171 | 
             
            .shadow-xl { box-shadow: var(--shadow-xl); }
         | 
| 143 172 | 
             
            .shadow-2xl { box-shadow: var(--shadow-2xl); }
         | 
| 144 | 
            -
            .shadow-inner { box-shadow: var(--shadow-inner); }
         | 
| 145 173 |  | 
| 146 174 | 
             
            /****************************************************************
         | 
| 147 175 | 
             
            * Layout
         | 
| @@ -308,37 +336,6 @@ | |
| 308 336 | 
             
            .pie-8 { padding-inline-end: var(--size-8); }
         | 
| 309 337 | 
             
            .pie-10 { padding-inline-end: var(--size-10); }
         | 
| 310 338 |  | 
| 311 | 
            -
            /****************************************************************
         | 
| 312 | 
            -
            * Grid system
         | 
| 313 | 
            -
            *****************************************************************/
         | 
| 314 | 
            -
            .grid { display: grid; }
         | 
| 315 | 
            -
             | 
| 316 | 
            -
            .grid-cols-1 { grid-template-columns: var(--grid-1); }
         | 
| 317 | 
            -
            .grid-cols-2 { grid-template-columns: var(--grid-2); }
         | 
| 318 | 
            -
            .grid-cols-3 { grid-template-columns: var(--grid-3); }
         | 
| 319 | 
            -
            .grid-cols-4 { grid-template-columns: var(--grid-4); }
         | 
| 320 | 
            -
            .grid-cols-5 { grid-template-columns: var(--grid-5); }
         | 
| 321 | 
            -
            .grid-cols-6 { grid-template-columns: var(--grid-6); }
         | 
| 322 | 
            -
            .grid-cols-7 { grid-template-columns: var(--grid-7); }
         | 
| 323 | 
            -
            .grid-cols-8 { grid-template-columns: var(--grid-8); }
         | 
| 324 | 
            -
            .grid-cols-9 { grid-template-columns: var(--grid-9); }
         | 
| 325 | 
            -
            .grid-cols-10 { grid-template-columns: var(--grid-10); }
         | 
| 326 | 
            -
            .grid-cols-11 { grid-template-columns: var(--grid-11); }
         | 
| 327 | 
            -
            .grid-cols-12 { grid-template-columns: var(--grid-12); }
         | 
| 328 | 
            -
             | 
| 329 | 
            -
            .col-span-1 { grid-column: var(--span-1); }
         | 
| 330 | 
            -
            .col-span-2 { grid-column: var(--span-2); }
         | 
| 331 | 
            -
            .col-span-3 { grid-column: var(--span-3); }
         | 
| 332 | 
            -
            .col-span-4 { grid-column: var(--span-4); }
         | 
| 333 | 
            -
            .col-span-5 { grid-column: var(--span-5); }
         | 
| 334 | 
            -
            .col-span-6 { grid-column: var(--span-6); }
         | 
| 335 | 
            -
            .col-span-7 { grid-column: var(--span-7); }
         | 
| 336 | 
            -
            .col-span-8 { grid-column: var(--span-8); }
         | 
| 337 | 
            -
            .col-span-9 { grid-column: var(--span-9); }
         | 
| 338 | 
            -
            .col-span-10 { grid-column: var(--span-10); }
         | 
| 339 | 
            -
            .col-span-11 { grid-column: var(--span-11); }
         | 
| 340 | 
            -
            .col-span-12 { grid-column: var(--span-12); }
         | 
| 341 | 
            -
             | 
| 342 339 | 
             
            /****************************************************************
         | 
| 343 340 | 
             
            * Accessibility
         | 
| 344 341 | 
             
            *****************************************************************/
         | 
    
        data/lib/css_zero/version.rb
    CHANGED
    
    
| @@ -2,7 +2,7 @@ Description: | |
| 2 2 | 
             
                This will add components into your project.
         | 
| 3 3 |  | 
| 4 4 | 
             
            Components:
         | 
| 5 | 
            -
              accordion alert avatar badge breadcrumb button card carousel collapsible dialog input pagination progress prose sheet switch table
         | 
| 5 | 
            +
              accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash input pagination progress prose sheet skeleton switch table
         | 
| 6 6 |  | 
| 7 7 | 
             
            Example:
         | 
| 8 8 | 
             
                bin/rails generate css_zero:add [components...]
         | 
| @@ -26,6 +26,9 @@ dialog: | |
| 26 26 | 
             
              - app/assets/stylesheets/dialog.css
         | 
| 27 27 | 
             
              - app/javascript/controllers/dialog_controller.js
         | 
| 28 28 | 
             
              - app/assets/images/x.svg
         | 
| 29 | 
            +
            flash:
         | 
| 30 | 
            +
              - app/assets/stylesheets/flash.css
         | 
| 31 | 
            +
              - app/javascript/controllers/element_removal_controller.js
         | 
| 29 32 | 
             
            input:
         | 
| 30 33 | 
             
              - app/assets/stylesheets/input.css
         | 
| 31 34 | 
             
              - app/assets/images/select-arrow.svg
         | 
| @@ -38,11 +41,13 @@ progress: | |
| 38 41 | 
             
              - app/assets/stylesheets/progress.css
         | 
| 39 42 | 
             
            prose:
         | 
| 40 43 | 
             
              - app/assets/stylesheets/prose.css
         | 
| 41 | 
            -
            switch:
         | 
| 42 | 
            -
              - app/assets/stylesheets/switch.css
         | 
| 43 44 | 
             
            sheet:
         | 
| 44 45 | 
             
              - app/assets/stylesheets/sheet.css
         | 
| 45 46 | 
             
              - app/javascript/controllers/dialog_controller.js
         | 
| 46 47 | 
             
              - app/assets/images/x.svg
         | 
| 48 | 
            +
            skeleton:
         | 
| 49 | 
            +
              - app/assets/stylesheets/skeleton.css
         | 
| 50 | 
            +
            switch:
         | 
| 51 | 
            +
              - app/assets/stylesheets/switch.css
         | 
| 47 52 | 
             
            table:
         | 
| 48 53 | 
             
              - app/assets/stylesheets/table.css
         | 
| @@ -47,7 +47,6 @@ | |
| 47 47 | 
             
                }
         | 
| 48 48 | 
             
              }
         | 
| 49 49 |  | 
| 50 | 
            -
              /* Small screens and below */
         | 
| 51 50 | 
             
              @media (width < 40rem) {
         | 
| 52 51 | 
             
                border-end-end-radius: 0;
         | 
| 53 52 | 
             
                border-end-start-radius: 0;
         | 
| @@ -61,7 +60,6 @@ | |
| 61 60 | 
             
              inset-inline-end: var(--size-4);
         | 
| 62 61 | 
             
              position: absolute;
         | 
| 63 62 |  | 
| 64 | 
            -
              /* Small screens and below */
         | 
| 65 63 | 
             
              @media (width < 40rem) {
         | 
| 66 64 | 
             
                display: none;
         | 
| 67 65 | 
             
              }
         | 
| @@ -0,0 +1,22 @@ | |
| 1 | 
            +
            .flash {
         | 
| 2 | 
            +
              animation: appear-then-fade 4s 300ms both;
         | 
| 3 | 
            +
              backdrop-filter: var(--blur) var(--contrast-75);
         | 
| 4 | 
            +
              background-color: hsl(from var(--color-text) h s l / .65);
         | 
| 5 | 
            +
              border-radius: var(--rounded-full);
         | 
| 6 | 
            +
              color: var(--color-text-reversed);
         | 
| 7 | 
            +
              margin-block-start: var(--size-4);
         | 
| 8 | 
            +
              margin-inline: auto;
         | 
| 9 | 
            +
              padding: var(--size-2) var(--size-4);
         | 
| 10 | 
            +
              position: fixed;
         | 
| 11 | 
            +
              text-align: center;
         | 
| 12 | 
            +
             | 
| 13 | 
            +
              img {
         | 
| 14 | 
            +
                display: inline;
         | 
| 15 | 
            +
                margin-block-end: var(--size-1);
         | 
| 16 | 
            +
              }
         | 
| 17 | 
            +
            }
         | 
| 18 | 
            +
             | 
| 19 | 
            +
            @keyframes appear-then-fade {
         | 
| 20 | 
            +
              0%, 100% { opacity: 0; }
         | 
| 21 | 
            +
              5%, 60%  { opacity: 1; }
         | 
| 22 | 
            +
            }
         | 
| @@ -8,10 +8,6 @@ | |
| 8 8 | 
             
              inline-size: var(--size-full);
         | 
| 9 9 | 
             
              padding: var(--size-2) var(--size-3);
         | 
| 10 10 |  | 
| 11 | 
            -
              option {
         | 
| 12 | 
            -
                padding-block: var(--size-1);
         | 
| 13 | 
            -
              }
         | 
| 14 | 
            -
             | 
| 15 11 | 
             
              &:is(textarea):not([rows]) {
         | 
| 16 12 | 
             
                field-sizing: content;
         | 
| 17 13 | 
             
                max-block-size: calc(10lh + var(--size-6));
         | 
| @@ -31,6 +27,11 @@ | |
| 31 27 | 
             
                margin-inline-end: var(--size-2);
         | 
| 32 28 | 
             
              }
         | 
| 33 29 |  | 
| 30 | 
            +
              &:autofill {
         | 
| 31 | 
            +
                -webkit-text-fill-color: var(--color-text);
         | 
| 32 | 
            +
                -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
         | 
| 33 | 
            +
              }
         | 
| 34 | 
            +
             | 
| 34 35 | 
             
              &::placeholder {
         | 
| 35 36 | 
             
                color: var(--color-text-subtle);
         | 
| 36 37 | 
             
              }
         | 
| @@ -39,6 +40,10 @@ | |
| 39 40 | 
             
                border-color: var(--color-negative);
         | 
| 40 41 | 
             
              }
         | 
| 41 42 |  | 
| 43 | 
            +
              &:user-invalid ~ .invalid-feedback {
         | 
| 44 | 
            +
                display: block;
         | 
| 45 | 
            +
              }
         | 
| 46 | 
            +
             | 
| 42 47 | 
             
              &:disabled {
         | 
| 43 48 | 
             
                cursor: not-allowed;
         | 
| 44 49 | 
             
                opacity: var(--opacity-50);
         | 
| @@ -55,13 +60,11 @@ | |
| 55 60 | 
             
            }
         | 
| 56 61 |  | 
| 57 62 | 
             
            :is(.input, .range, .checkbox, .radio) {
         | 
| 58 | 
            -
              /* Keyboard navigation */
         | 
| 59 63 | 
             
              &:focus-visible {
         | 
| 60 | 
            -
                outline: var(--border-2) solid var(--color- | 
| 64 | 
            +
                outline: var(--border-2) solid var(--color-selected-dark);
         | 
| 61 65 | 
             
                outline-offset: var(--border-2);
         | 
| 62 66 | 
             
              }
         | 
| 63 67 |  | 
| 64 | 
            -
              /* Server side validation */
         | 
| 65 68 | 
             
              .field_with_errors & {
         | 
| 66 69 | 
             
                border-color: var(--color-negative);
         | 
| 67 70 | 
             
              }
         | 
| @@ -4,9 +4,12 @@ | |
| 4 4 | 
             
              --color-text: black;
         | 
| 5 5 | 
             
              --color-text-reversed: white;
         | 
| 6 6 | 
             
              --color-text-subtle: var(--zinc-500);
         | 
| 7 | 
            +
              --color-link: var(--blue-700);
         | 
| 7 8 | 
             
              --color-border-light: var(--zinc-100);
         | 
| 8 9 | 
             
              --color-border: var(--zinc-200);
         | 
| 9 10 | 
             
              --color-border-dark: var(--zinc-400);
         | 
| 11 | 
            +
              --color-selected: var(--blue-100);
         | 
| 12 | 
            +
              --color-selected-dark: var(--blue-300);
         | 
| 10 13 |  | 
| 11 14 | 
             
              /* Accent colors */
         | 
| 12 15 | 
             
              --color-primary: var(--zinc-900);
         | 
| @@ -27,9 +30,12 @@ | |
| 27 30 | 
             
                --color-text: white;
         | 
| 28 31 | 
             
                --color-text-reversed: black;
         | 
| 29 32 | 
             
                --color-text-subtle: var(--zinc-400);
         | 
| 33 | 
            +
                --color-link: var(--sky-400);
         | 
| 30 34 | 
             
                --color-border-light: var(--zinc-800);
         | 
| 31 35 | 
             
                --color-border: var(--zinc-800);
         | 
| 32 36 | 
             
                --color-border-dark: var(--zinc-600);
         | 
| 37 | 
            +
                --color-selected: var(--blue-950);
         | 
| 38 | 
            +
                --color-selected-dark: var(--blue-800);
         | 
| 33 39 |  | 
| 34 40 | 
             
                /* Accent colors */
         | 
| 35 41 | 
             
                --color-primary: var(--zinc-50);
         | 
| @@ -60,3 +66,7 @@ body { | |
| 60 66 | 
             
              font-synthesis-weight: none;
         | 
| 61 67 | 
             
              text-rendering: optimizeLegibility;
         | 
| 62 68 | 
             
            }
         | 
| 69 | 
            +
             | 
| 70 | 
            +
            ::selection {
         | 
| 71 | 
            +
              background-color: var(--color-selected);
         | 
| 72 | 
            +
            }
         | 
    
        metadata
    CHANGED
    
    | @@ -1,14 +1,14 @@ | |
| 1 1 | 
             
            --- !ruby/object:Gem::Specification
         | 
| 2 2 | 
             
            name: css-zero
         | 
| 3 3 | 
             
            version: !ruby/object:Gem::Version
         | 
| 4 | 
            -
              version: 0.0. | 
| 4 | 
            +
              version: 0.0.26
         | 
| 5 5 | 
             
            platform: ruby
         | 
| 6 6 | 
             
            authors:
         | 
| 7 7 | 
             
            - Lázaro Nixon
         | 
| 8 8 | 
             
            autorequire:
         | 
| 9 9 | 
             
            bindir: bin
         | 
| 10 10 | 
             
            cert_chain: []
         | 
| 11 | 
            -
            date: 2024-07- | 
| 11 | 
            +
            date: 2024-07-23 00:00:00.000000000 Z
         | 
| 12 12 | 
             
            dependencies: []
         | 
| 13 13 | 
             
            description:
         | 
| 14 14 | 
             
            email: lazaronixon@hotmail.com
         | 
| @@ -29,6 +29,7 @@ files: | |
| 29 29 | 
             
            - app/assets/stylesheets/transform.css
         | 
| 30 30 | 
             
            - app/assets/stylesheets/transition.css
         | 
| 31 31 | 
             
            - app/assets/stylesheets/typography.css
         | 
| 32 | 
            +
            - app/assets/stylesheets/zindex.css
         | 
| 32 33 | 
             
            - app/assets/stylesheets/zutilities.css
         | 
| 33 34 | 
             
            - app/helpers/dialog_helper.rb
         | 
| 34 35 | 
             
            - lib/css-zero.rb
         | 
| @@ -56,16 +57,19 @@ files: | |
| 56 57 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
         | 
| 57 58 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/carousel.css
         | 
| 58 59 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css
         | 
| 60 | 
            +
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css
         | 
| 59 61 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
         | 
| 60 62 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/pagination.css
         | 
| 61 63 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
         | 
| 62 64 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
         | 
| 63 65 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
         | 
| 66 | 
            +
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/skeleton.css
         | 
| 64 67 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
         | 
| 65 68 | 
             
            - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
         | 
| 66 69 | 
             
            - lib/generators/css_zero/add/templates/app/javascript/controllers/carousel_controller.js
         | 
| 67 70 | 
             
            - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
         | 
| 68 71 | 
             
            - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
         | 
| 72 | 
            +
            - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
         | 
| 69 73 | 
             
            - lib/generators/css_zero/install/USAGE
         | 
| 70 74 | 
             
            - lib/generators/css_zero/install/install_generator.rb
         | 
| 71 75 | 
             
            - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
         |