frutjam/dist/components/checkbox.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;.checkbox{--radius-checkbox:calc(var(--border-radius)*1.5);--color-checkbox:var(--color-base);@supports (color:color-mix(in lab,red,red)){--color-checkbox:color-mix(in oklab,var(--color-base) 50%,transparent)}--color-on-checkbox:var(--color-on-base);--color-checkbox-active:var(--color-base-active);--checkbox--box-shadow:0 0 0 0px var(--color-base-100),0 0 0 1px var(--color-checkbox-active),0 0 var(--color-base-100);background-color:var(--color-checkbox);color:var(--color-on-checkbox);box-shadow:var(--checkbox--box-shadow);aspect-ratio:var(--checkbox--aspect-ratio);border-radius:var(--checkbox--radius,var(--radius-checkbox));padding:var(--checkbox--padding,.3125rem);width:var(--checkbox--width,1.25rem);height:var(--checkbox--height,1.25rem);position:relative;transition-duration:.35s;flex-shrink:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;vertical-align:middle;&:before{content:var(--tw-content);content:none;opacity:0;background-color:currentcolor;transform:rotate(45deg);transition:transform .3s,background-color .1s;display:block;width:100%;height:100%;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0,70% 0,70% 100%);font-size:1rem;line-height:.75}&:focus-visible{outline-width:2px;outline-style:solid;outline-color:light-dark(var(--color-base-950,currentColor),var(--color-base-50,currentColor));outline-offset:3px}&:checked,&[aria-checked=true]{--checkbox--bg-color:light-dark(var(--color-base-600),var(--color-base-400));@supports (color:color-mix(in lab,red,red)){--checkbox--bg-color:light-dark(color-mix(in oklab,var(--color-base-600) 20%,transparent),color-mix(in oklab,var(--color-base-400) 20%,transparent))}background-color:var(--checkbox--bg-color);transition:background-color .1s,box-shadow .1s;&:before{content:var(--tw-content);content:"✔︎";opacity:100%}@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-base-600),var(--color-base-200));content:"✔︎";transform:rotate(0deg);background-color:var(--checkbox--bg-color);clip-path:none}}}&:indeterminate{&:before{content:var(--tw-content);content:"";opacity:100%;transform:rotate(0deg) translateY(-35%);clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%)}}&:is(:disabled,[disabled],.checkbox-disabled){--checkbox--cursor:not-allowed;--checkbox--opacity:20%;cursor:var(--checkbox--cursor);opacity:var(--checkbox--opacity)}}.checkbox-disabled{cursor:var(--checkbox--cursor);opacity:var(--checkbox--opacity)}.checkbox-accent{--color-checkbox:light-dark(var(--color-accent-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-accent-50),color-mix(in oklch,#000 10%,var(--color-accent-400) 20%))}--color-on-checkbox:var(--color-on-accent);--color-checkbox-active:var(--color-accent-active);--checkbox--box-shadow:0 0 0 0px var(--color-accent-50),0 0 0 1px var(--color-accent-600),0 0 var(--color-accent-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-accent-50),0 0 0 1px var(--color-accent-700),0 0 var(--color-accent-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-accent);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-accent-600),var(--color-accent-200))}}}}.checkbox-error{--color-checkbox:light-dark(var(--color-error-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-error-50),color-mix(in oklch,#000 10%,var(--color-error-400) 20%))}--color-on-checkbox:var(--color-on-error);--color-checkbox-active:var(--color-error-active);--checkbox--box-shadow:0 0 0 0px var(--color-error-50),0 0 0 1px var(--color-error-600),0 0 var(--color-error-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-error-50),0 0 0 1px var(--color-error-700),0 0 var(--color-error-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-error);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-error-600),var(--color-error-200))}}}}.checkbox-info{--color-checkbox:light-dark(var(--color-info-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-info-50),color-mix(in oklch,#000 10%,var(--color-info-400) 20%))}--color-on-checkbox:var(--color-on-info);--color-checkbox-active:var(--color-info-active);--checkbox--box-shadow:0 0 0 0px var(--color-info-50),0 0 0 1px var(--color-info-600),0 0 var(--color-info-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-info-50),0 0 0 1px var(--color-info-700),0 0 var(--color-info-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-info);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-info-600),var(--color-info-200))}}}}.checkbox-neutral{--color-checkbox:light-dark(var(--color-neutral-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-neutral-50),color-mix(in oklch,#000 10%,var(--color-neutral-400) 20%))}--color-on-checkbox:var(--color-on-neutral);--color-checkbox-active:var(--color-neutral-active);--checkbox--box-shadow:0 0 0 0px var(--color-neutral-50),0 0 0 1px var(--color-neutral-600),0 0 var(--color-neutral-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-neutral-50),0 0 0 1px var(--color-neutral-700),0 0 var(--color-neutral-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-neutral);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-neutral-600),var(--color-neutral-200))}}}}.checkbox-primary{--color-checkbox:light-dark(var(--color-primary-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-primary-50),color-mix(in oklch,#000 10%,var(--color-primary-400) 20%))}--color-on-checkbox:var(--color-on-primary);--color-checkbox-active:var(--color-primary-active);--checkbox--box-shadow:0 0 0 0px var(--color-primary-50),0 0 0 1px var(--color-primary-600),0 0 var(--color-primary-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-primary-50),0 0 0 1px var(--color-primary-700),0 0 var(--color-primary-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-primary);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-primary-600),var(--color-primary-200))}}}}.checkbox-secondary{--color-checkbox:light-dark(var(--color-secondary-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-secondary-50),color-mix(in oklch,#000 10%,var(--color-secondary-400) 20%))}--color-on-checkbox:var(--color-on-secondary);--color-checkbox-active:var(--color-secondary-active);--checkbox--box-shadow:0 0 0 0px var(--color-secondary-50),0 0 0 1px var(--color-secondary-600),0 0 var(--color-secondary-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-secondary-50),0 0 0 1px var(--color-secondary-700),0 0 var(--color-secondary-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-secondary);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-secondary-600),var(--color-secondary-200))}}}}.checkbox-success{--color-checkbox:light-dark(var(--color-success-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-success-50),color-mix(in oklch,#000 10%,var(--color-success-400) 20%))}--color-on-checkbox:var(--color-on-success);--color-checkbox-active:var(--color-success-active);--checkbox--box-shadow:0 0 0 0px var(--color-success-50),0 0 0 1px var(--color-success-600),0 0 var(--color-success-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-success-50),0 0 0 1px var(--color-success-700),0 0 var(--color-success-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-success);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-success-600),var(--color-success-200))}}}}.checkbox-warning{--color-checkbox:light-dark(var(--color-warning-50),#000);@supports (color:color-mix(in lab,red,red)){--color-checkbox:light-dark(var(--color-warning-50),color-mix(in oklch,#000 10%,var(--color-warning-400) 20%))}--color-on-checkbox:var(--color-on-warning);--color-checkbox-active:var(--color-warning-active);--checkbox--box-shadow:0 0 0 0px var(--color-warning-50),0 0 0 1px var(--color-warning-600),0 0 var(--color-warning-50);&:focus-visible{--checkbox--box-shadow:0 0 0 0px var(--color-warning-50),0 0 0 1px var(--color-warning-700),0 0 var(--color-warning-50)}&:checked,&[aria-checked=true]{--checkbox--bg-color:var(--color-warning);@media (forced-colors:active){&:before{content:var(--tw-content);--checkbox--bg-color:light-dark(var(--color-warning-600),var(--color-warning-200))}}}}.checkbox-2xl{--checkbox--padding:0.5rem;--checkbox--width:2rem;--checkbox--height:2rem}.checkbox-lg{--checkbox--padding:0.375rem;--checkbox--width:1.5rem;--checkbox--height:1.5rem}.checkbox-md{--checkbox--padding:0.3125rem;--checkbox--width:1.25rem;--checkbox--height:1.25rem}.checkbox-sm{--checkbox--padding:0.25rem;--checkbox--width:1rem;--checkbox--height:1rem}.checkbox-xl{--checkbox--padding:0.4375rem;--checkbox--width:1.75rem;--checkbox--height:1.75rem}.checkbox-xs{--checkbox--padding:0.1875rem;--checkbox--width:0.75rem;--checkbox--height:0.75rem}.checkbox-circle,.checkbox-rounded{--checkbox--radius:calc(infinity*1px);--checkbox--aspect-ratio:1/1}.checkbox-square{--checkbox--radius:var(--radius-checkbox);--checkbox--aspect-ratio:1/1}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}