Next: , Previous: , Up: API  


1.20 (olive-css main)

1.20.1 Parameters

Parameter: border-radius

Default value:

(#<rule selector: ".rounded-none" declarations: (#<declaration property: border-radius value: 0>)> #<rule selector: ".rounded-full" declarations: (#<declaration property: border-radius value: "9999px">)> #<rule selector: ".rounded-0" declarations: (#<declaration property: border-radius value: "0.00rem">)> #<rule selector: ".rounded-1" declarations: (#<declaration property: border-radius value: "0.16rem">)> #<rule selector: ".rounded-2" declarations: (#<declaration property: border-radius value: "0.32rem">)> #<rule selector: ".rounded-3" declarations: (#<declaration property: border-radius value: "0.48rem">)> #<rule selector: ".rounded-4" declarations: (#<declaration property: border-radius value: "0.64rem">)> #<rule selector: ".rounded-5" declarations: (#<declaration property: border-radius value: "0.80rem">)> #<rule selector: ".rounded-6" declarations: (#<declaration property: border-radius value: "0.96rem">)> #<rule selector: ".rounded-7" declarations: (#<declaration property: border-radius value: "1.12rem">)> #<rule selector: ".rounded-8" declarations: (#<declaration property: border-radius value: "1.28rem">)> #<rule selector: ".rounded-9" declarations: (#<declaration property: border-radius value: "1.44rem">)> #<rule selector: ".rounded-10" declarations: (#<declaration property: border-radius value: "1.60rem">)> #<rule selector: ".rounded-12" declarations: (#<declaration property: border-radius value: "1.92rem">)> #<rule selector: ".rounded-14" declarations: (#<declaration property: border-radius value: "2.24rem">)> #<rule selector: ".rounded-16" declarations: (#<declaration property: border-radius value: "2.56rem">)> #<rule selector: ".rounded-20" declarations: (#<declaration property: border-radius value: "3.20rem">)> #<rule selector: ".rounded-24" declarations: (#<declaration property: border-radius value: "3.84rem">)> #<rule selector: ".rounded-28" declarations: (#<declaration property: border-radius value: "4.48rem">)> #<rule selector: ".rounded-32" declarations: (#<declaration property: border-radius value: "5.12rem">)> #<rule selector: ".rounded-48" declarations: (#<declaration property: border-radius value: "7.68rem">)> #<rule selector: ".rounded-64" declarations: (#<declaration property: border-radius value: "10.24rem">)> #<rule selector: ".rounded-72" declarations: (#<declaration property: border-radius value: "11.52rem">)> #<rule selector: ".rounded-90" declarations: (#<declaration property: border-radius value: "14.40rem">)> #<rule selector: ".rounded-96" declarations: (#<declaration property: border-radius value: "15.36rem">)> #<rule selector: ".rounded-100" declarations: (#<declaration property: border-radius value: "16.00rem">)> #<rule selector: ".rounded-128" declarations: (#<declaration property: border-radius value: "20.48rem">)> #<rule selector: ".rounded-196" declarations: (#<declaration property: border-radius value: "31.36rem">)> #<rule selector: ".rounded-212" declarations: (#<declaration property: border-radius value: "33.92rem">)> #<rule selector: ".rounded-256" declarations: (#<declaration property: border-radius value: "40.96rem">)> #<rule selector: ".rounded-312" declarations: (#<declaration property: border-radius value: "49.92rem">)> #<rule selector: ".rounded-360" declarations: (#<declaration property: border-radius value: "57.60rem">)> #<rule selector: ".rounded-420" declarations: (#<declaration property: border-radius value: "67.20rem">)> #<rule selector: ".rounded-512" declarations: (#<declaration property: border-radius value: "81.92rem">)> #<rule selector: ".rounded-2xs" declarations: (#<declaration property: border-radius value: "0.16rem">)> #<rule selector: ".rounded-xs" declarations: (#<declaration property: border-radius value: "0.32rem">)> #<rule selector: ".rounded-sm" declarations: (#<declaration property: border-radius value: "0.48rem">)> #<rule selector: ".rounded-md" declarations: (#<declaration property: border-radius value: "0.64rem">)> #<rule selector: ".rounded-lg" declarations: (#<declaration property: border-radius value: "0.80rem">)> #<rule selector: ".rounded-xl" declarations: (#<declaration property: border-radius value: "0.96rem">)> #<rule selector: ".rounded-2xl" declarations: (#<declaration property: border-radius value: "1.12rem">)> #<rule selector: ".rounded-3xl" declarations: (#<declaration property: border-radius value: "1.28rem">)> #<rule selector: ".rounded-4xl" declarations: (#<declaration property: border-radius value: "1.44rem">)> #<rule selector: ".rounded-5xl" declarations: (#<declaration property: border-radius value: "1.60rem">)> #<rule selector: ".rounded-tl-0" declarations: (#<declaration property: border-start-start-radius value: "0.00rem">)> #<rule selector: ".rounded-tl-1" declarations: (#<declaration property: border-start-start-radius value: "0.16rem">)> #<rule selector: ".rounded-tl-2" declarations: (#<declaration property: border-start-start-radius value: "0.32rem">)> #<rule selector: ".rounded-tl-3" declarations: (#<declaration property: border-start-start-radius value: "0.48rem">)> #<rule selector: ".rounded-tl-4" declarations: (#<declaration property: border-start-start-radius value: "0.64rem">)> #<rule selector: ".rounded-tl-5" declarations: (#<declaration property: border-start-start-radius value: "0.80rem">)> #<rule selector: ".rounded-tl-6" declarations: (#<declaration property: border-start-start-radius value: "0.96rem">)> #<rule selector: ".rounded-tl-7" declarations: (#<declaration property: border-start-start-radius value: "1.12rem">)> #<rule selector: ".rounded-tl-8" declarations: (#<declaration property: border-start-start-radius value: "1.28rem">)> #<rule selector: ".rounded-tl-9" declarations: (#<declaration property: border-start-start-radius value: "1.44rem">)> #<rule selector: ".rounded-tl-10" declarations: (#<declaration property: border-start-start-radius value: "1.60rem">)> #<rule selector: ".rounded-tl-12" declarations: (#<declaration property: border-start-start-radius value: "1.92rem">)> #<rule selector: ".rounded-tl-14" declarations: (#<declaration property: border-start-start-radius value: "2.24rem">)> #<rule selector: ".rounded-tl-16" declarations: (#<declaration property: border-start-start-radius value: "2.56rem">)> #<rule selector: ".rounded-tl-20" declarations: (#<declaration property: border-start-start-radius value: "3.20rem">)> #<rule selector: ".rounded-tl-24" declarations: (#<declaration property: border-start-start-radius value: "3.84rem">)> #<rule selector: ".rounded-tl-28" declarations: (#<declaration property: border-start-start-radius value: "4.48rem">)> #<rule selector: ".rounded-tl-32" declarations: (#<declaration property: border-start-start-radius value: "5.12rem">)> #<rule selector: ".rounded-tl-48" declarations: (#<declaration property: border-start-start-radius value: "7.68rem">)> #<rule selector: ".rounded-tl-64" declarations: (#<declaration property: border-start-start-radius value: "10.24rem">)> #<rule selector: ".rounded-tl-72" declarations: (#<declaration property: border-start-start-radius value: "11.52rem">)> #<rule selector: ".rounded-tl-90" declarations: (#<declaration property: border-start-start-radius value: "14.40rem">)> #<rule selector: ".rounded-tl-96" declarations: (#<declaration property: border-start-start-radius value: "15.36rem">)> #<rule selector: ".rounded-tl-100" declarations: (#<declaration property: border-start-start-radius value: "16.00rem">)> #<rule selector: ".rounded-tl-128" declarations: (#<declaration property: border-start-start-radius value: "20.48rem">)> #<rule selector: ".rounded-tl-196" declarations: (#<declaration property: border-start-start-radius value: "31.36rem">)> #<rule selector: ".rounded-tl-212" declarations: (#<declaration property: border-start-start-radius value: "33.92rem">)> #<rule selector: ".rounded-tl-256" declarations: (#<declaration property: border-start-start-radius value: "40.96rem">)> #<rule selector: ".rounded-tl-312" declarations: (#<declaration property: border-start-start-radius value: "49.92rem">)> #<rule selector: ".rounded-tl-360" declarations: (#<declaration property: border-start-start-radius value: "57.60rem">)> #<rule selector: ".rounded-tl-420" declarations: (#<declaration property: border-start-start-radius value: "67.20rem">)> #<rule selector: ".rounded-tl-512" declarations: (#<declaration property: border-start-start-radius value: "81.92rem">)> #<rule selector: ".rounded-tl-2xs" declarations: (#<declaration property: border-start-start-radius value: "0.16rem">)> #<rule selector: ".rounded-tl-xs" declarations: (#<declaration property: border-start-start-radius value: "0.32rem">)> #<rule selector: ".rounded-tl-sm" declarations: (#<declaration property: border-start-start-radius value: "0.48rem">)> #<rule selector: ".rounded-tl-md" declarations: (#<declaration property: border-start-start-radius value: "0.64rem">)> #<rule selector: ".rounded-tl-lg" declarations: (#<declaration property: border-start-start-radius value: "0.80rem">)> #<rule selector: ".rounded-tl-xl" declarations: (#<declaration property: border-start-start-radius value: "0.96rem">)> #<rule selector: ".rounded-tl-2xl" declarations: (#<declaration property: border-start-start-radius value: "1.12rem">)> #<rule selector: ".rounded-tl-3xl" declarations: (#<declaration property: border-start-start-radius value: "1.28rem">)> #<rule selector: ".rounded-tl-4xl" declarations: (#<declaration property: border-start-start-radius value: "1.44rem">)> #<rule selector: ".rounded-tl-5xl" declarations: (#<declaration property: border-start-start-radius value: "1.60rem">)> #<rule selector: ".rounded-tr-0" declarations: (#<declaration property: border-start-end-radius value: "0.00rem">)> #<rule selector: ".rounded-tr-1" declarations: (#<declaration property: border-start-end-radius value: "0.16rem">)> #<rule selector: ".rounded-tr-2" declarations: (#<declaration property: border-start-end-radius value: "0.32rem">)> #<rule selector: ".rounded-tr-3" declarations: (#<declaration property: border-start-end-radius value: "0.48rem">)> #<rule selector: ".rounded-tr-4" declarations: (#<declaration property: border-start-end-radius value: "0.64rem">)> #<rule selector: ".rounded-tr-5" declarations: (#<declaration property: border-start-end-radius value: "0.80rem">)> #<rule selector: ".rounded-tr-6" declarations: (#<declaration property: border-start-end-radius value: "0.96rem">)> #<rule selector: ".rounded-tr-7" declarations: (#<declaration property: border-start-end-radius value: "1.12rem">)> #<rule selector: ".rounded-tr-8" declarations: (#<declaration property: border-start-end-radius value: "1.28rem">)> #<rule selector: ".rounded-tr-9" declarations: (#<declaration property: border-start-end-radius value: "1.44rem">)> #<rule selector: ".rounded-tr-10" declarations: (#<declaration property: border-start-end-radius value: "1.60rem">)> #<rule selector: ".rounded-tr-12" declarations: (#<declaration property: border-start-end-radius value: "1.92rem">)> #<rule selector: ".rounded-tr-14" declarations: (#<declaration property: border-start-end-radius value: "2.24rem">)> #<rule selector: ".rounded-tr-16" declarations: (#<declaration property: border-start-end-radius value: "2.56rem">)> #<rule selector: ".rounded-tr-20" declarations: (#<declaration property: border-start-end-radius value: "3.20rem">)> #<rule selector: ".rounded-tr-24" declarations: (#<declaration property: border-start-end-radius value: "3.84rem">)> #<rule selector: ".rounded-tr-28" declarations: (#<declaration property: border-start-end-radius value: "4.48rem">)> #<rule selector: ".rounded-tr-32" declarations: (#<declaration property: border-start-end-radius value: "5.12rem">)> #<rule selector: ".rounded-tr-48" declarations: (#<declaration property: border-start-end-radius value: "7.68rem">)> #<rule selector: ".rounded-tr-64" declarations: (#<declaration property: border-start-end-radius value: "10.24rem">)> #<rule selector: ".rounded-tr-72" declarations: (#<declaration property: border-start-end-radius value: "11.52rem">)> #<rule selector: ".rounded-tr-90" declarations: (#<declaration property: border-start-end-radius value: "14.40rem">)> #<rule selector: ".rounded-tr-96" declarations: (#<declaration property: border-start-end-radius value: "15.36rem">)> #<rule selector: ".rounded-tr-100" declarations: (#<declaration property: border-start-end-radius value: "16.00rem">)> #<rule selector: ".rounded-tr-128" declarations: (#<declaration property: border-start-end-radius value: "20.48rem">)> #<rule selector: ".rounded-tr-196" declarations: (#<declaration property: border-start-end-radius value: "31.36rem">)> #<rule selector: ".rounded-tr-212" declarations: (#<declaration property: border-start-end-radius value: "33.92rem">)> #<rule selector: ".rounded-tr-256" declarations: (#<declaration property: border-start-end-radius value: "40.96rem">)> #<rule selector: ".rounded-tr-312" declarations: (#<declaration property: border-start-end-radius value: "49.92rem">)> #<rule selector: ".rounded-tr-360" declarations: (#<declaration property: border-start-end-radius value: "57.60rem">)> #<rule selector: ".rounded-tr-420" declarations: (#<declaration property: border-start-end-radius value: "67.20rem">)> #<rule selector: ".rounded-tr-512" declarations: (#<declaration property: border-start-end-radius value: "81.92rem">)> #<rule selector: ".rounded-tr-2xs" declarations: (#<declaration property: border-start-end-radius value: "0.16rem">)> #<rule selector: ".rounded-tr-xs" declarations: (#<declaration property: border-start-end-radius value: "0.32rem">)> #<rule selector: ".rounded-tr-sm" declarations: (#<declaration property: border-start-end-radius value: "0.48rem">)> #<rule selector: ".rounded-tr-md" declarations: (#<declaration property: border-start-end-radius value: "0.64rem">)> #<rule selector: ".rounded-tr-lg" declarations: (#<declaration property: border-start-end-radius value: "0.80rem">)> #<rule selector: ".rounded-tr-xl" declarations: (#<declaration property: border-start-end-radius value: "0.96rem">)> #<rule selector: ".rounded-tr-2xl" declarations: (#<declaration property: border-start-end-radius value: "1.12rem">)> #<rule selector: ".rounded-tr-3xl" declarations: (#<declaration property: border-start-end-radius value: "1.28rem">)> #<rule selector: ".rounded-tr-4xl" declarations: (#<declaration property: border-start-end-radius value: "1.44rem">)> #<rule selector: ".rounded-tr-5xl" declarations: (#<declaration property: border-start-end-radius value: "1.60rem">)> #<rule selector: ".rounded-bl-0" declarations: (#<declaration property: border-end-start-radius value: "0.00rem">)> #<rule selector: ".rounded-bl-1" declarations: (#<declaration property: border-end-start-radius value: "0.16rem">)> #<rule selector: ".rounded-bl-2" declarations: (#<declaration property: border-end-start-radius value: "0.32rem">)> #<rule selector: ".rounded-bl-3" declarations: (#<declaration property: border-end-start-radius value: "0.48rem">)> #<rule selector: ".rounded-bl-4" declarations: (#<declaration property: border-end-start-radius value: "0.64rem">)> #<rule selector: ".rounded-bl-5" declarations: (#<declaration property: border-end-start-radius value: "0.80rem">)> #<rule selector: ".rounded-bl-6" declarations: (#<declaration property: border-end-start-radius value: "0.96rem">)> #<rule selector: ".rounded-bl-7" declarations: (#<declaration property: border-end-start-radius value: "1.12rem">)> #<rule selector: ".rounded-bl-8" declarations: (#<declaration property: border-end-start-radius value: "1.28rem">)> #<rule selector: ".rounded-bl-9" declarations: (#<declaration property: border-end-start-radius value: "1.44rem">)> #<rule selector: ".rounded-bl-10" declarations: (#<declaration property: border-end-start-radius value: "1.60rem">)> #<rule selector: ".rounded-bl-12" declarations: (#<declaration property: border-end-start-radius value: "1.92rem">)> #<rule selector: ".rounded-bl-14" declarations: (#<declaration property: border-end-start-radius value: "2.24rem">)> #<rule selector: ".rounded-bl-16" declarations: (#<declaration property: border-end-start-radius value: "2.56rem">)> #<rule selector: ".rounded-bl-20" declarations: (#<declaration property: border-end-start-radius value: "3.20rem">)> #<rule selector: ".rounded-bl-24" declarations: (#<declaration property: border-end-start-radius value: "3.84rem">)> #<rule selector: ".rounded-bl-28" declarations: (#<declaration property: border-end-start-radius value: "4.48rem">)> #<rule selector: ".rounded-bl-32" declarations: (#<declaration property: border-end-start-radius value: "5.12rem">)> #<rule selector: ".rounded-bl-48" declarations: (#<declaration property: border-end-start-radius value: "7.68rem">)> #<rule selector: ".rounded-bl-64" declarations: (#<declaration property: border-end-start-radius value: "10.24rem">)> #<rule selector: ".rounded-bl-72" declarations: (#<declaration property: border-end-start-radius value: "11.52rem">)> #<rule selector: ".rounded-bl-90" declarations: (#<declaration property: border-end-start-radius value: "14.40rem">)> #<rule selector: ".rounded-bl-96" declarations: (#<declaration property: border-end-start-radius value: "15.36rem">)> #<rule selector: ".rounded-bl-100" declarations: (#<declaration property: border-end-start-radius value: "16.00rem">)> #<rule selector: ".rounded-bl-128" declarations: (#<declaration property: border-end-start-radius value: "20.48rem">)> #<rule selector: ".rounded-bl-196" declarations: (#<declaration property: border-end-start-radius value: "31.36rem">)> #<rule selector: ".rounded-bl-212" declarations: (#<declaration property: border-end-start-radius value: "33.92rem">)> #<rule selector: ".rounded-bl-256" declarations: (#<declaration property: border-end-start-radius value: "40.96rem">)> #<rule selector: ".rounded-bl-312" declarations: (#<declaration property: border-end-start-radius value: "49.92rem">)> #<rule selector: ".rounded-bl-360" declarations: (#<declaration property: border-end-start-radius value: "57.60rem">)> #<rule selector: ".rounded-bl-420" declarations: (#<declaration property: border-end-start-radius value: "67.20rem">)> #<rule selector: ".rounded-bl-512" declarations: (#<declaration property: border-end-start-radius value: "81.92rem">)> #<rule selector: ".rounded-bl-2xs" declarations: (#<declaration property: border-end-start-radius value: "0.16rem">)> #<rule selector: ".rounded-bl-xs" declarations: (#<declaration property: border-end-start-radius value: "0.32rem">)> #<rule selector: ".rounded-bl-sm" declarations: (#<declaration property: border-end-start-radius value: "0.48rem">)> #<rule selector: ".rounded-bl-md" declarations: (#<declaration property: border-end-start-radius value: "0.64rem">)> #<rule selector: ".rounded-bl-lg" declarations: (#<declaration property: border-end-start-radius value: "0.80rem">)> #<rule selector: ".rounded-bl-xl" declarations: (#<declaration property: border-end-start-radius value: "0.96rem">)> #<rule selector: ".rounded-bl-2xl" declarations: (#<declaration property: border-end-start-radius value: "1.12rem">)> #<rule selector: ".rounded-bl-3xl" declarations: (#<declaration property: border-end-start-radius value: "1.28rem">)> #<rule selector: ".rounded-bl-4xl" declarations: (#<declaration property: border-end-start-radius value: "1.44rem">)> #<rule selector: ".rounded-bl-5xl" declarations: (#<declaration property: border-end-start-radius value: "1.60rem">)> #<rule selector: ".rounded-br-0" declarations: (#<declaration property: border-end-end-radius value: "0.00rem">)> #<rule selector: ".rounded-br-1" declarations: (#<declaration property: border-end-end-radius value: "0.16rem">)> #<rule selector: ".rounded-br-2" declarations: (#<declaration property: border-end-end-radius value: "0.32rem">)> #<rule selector: ".rounded-br-3" declarations: (#<declaration property: border-end-end-radius value: "0.48rem">)> #<rule selector: ".rounded-br-4" declarations: (#<declaration property: border-end-end-radius value: "0.64rem">)> #<rule selector: ".rounded-br-5" declarations: (#<declaration property: border-end-end-radius value: "0.80rem">)> #<rule selector: ".rounded-br-6" declarations: (#<declaration property: border-end-end-radius value: "0.96rem">)> #<rule selector: ".rounded-br-7" declarations: (#<declaration property: border-end-end-radius value: "1.12rem">)> #<rule selector: ".rounded-br-8" declarations: (#<declaration property: border-end-end-radius value: "1.28rem">)> #<rule selector: ".rounded-br-9" declarations: (#<declaration property: border-end-end-radius value: "1.44rem">)> #<rule selector: ".rounded-br-10" declarations: (#<declaration property: border-end-end-radius value: "1.60rem">)> #<rule selector: ".rounded-br-12" declarations: (#<declaration property: border-end-end-radius value: "1.92rem">)> #<rule selector: ".rounded-br-14" declarations: (#<declaration property: border-end-end-radius value: "2.24rem">)> #<rule selector: ".rounded-br-16" declarations: (#<declaration property: border-end-end-radius value: "2.56rem">)> #<rule selector: ".rounded-br-20" declarations: (#<declaration property: border-end-end-radius value: "3.20rem">)> #<rule selector: ".rounded-br-24" declarations: (#<declaration property: border-end-end-radius value: "3.84rem">)> #<rule selector: ".rounded-br-28" declarations: (#<declaration property: border-end-end-radius value: "4.48rem">)> #<rule selector: ".rounded-br-32" declarations: (#<declaration property: border-end-end-radius value: "5.12rem">)> #<rule selector: ".rounded-br-48" declarations: (#<declaration property: border-end-end-radius value: "7.68rem">)> #<rule selector: ".rounded-br-64" declarations: (#<declaration property: border-end-end-radius value: "10.24rem">)> #<rule selector: ".rounded-br-72" declarations: (#<declaration property: border-end-end-radius value: "11.52rem">)> #<rule selector: ".rounded-br-90" declarations: (#<declaration property: border-end-end-radius value: "14.40rem">)> #<rule selector: ".rounded-br-96" declarations: (#<declaration property: border-end-end-radius value: "15.36rem">)> #<rule selector: ".rounded-br-100" declarations: (#<declaration property: border-end-end-radius value: "16.00rem">)> #<rule selector: ".rounded-br-128" declarations: (#<declaration property: border-end-end-radius value: "20.48rem">)> #<rule selector: ".rounded-br-196" declarations: (#<declaration property: border-end-end-radius value: "31.36rem">)> #<rule selector: ".rounded-br-212" declarations: (#<declaration property: border-end-end-radius value: "33.92rem">)> #<rule selector: ".rounded-br-256" declarations: (#<declaration property: border-end-end-radius value: "40.96rem">)> #<rule selector: ".rounded-br-312" declarations: (#<declaration property: border-end-end-radius value: "49.92rem">)> #<rule selector: ".rounded-br-360" declarations: (#<declaration property: border-end-end-radius value: "57.60rem">)> #<rule selector: ".rounded-br-420" declarations: (#<declaration property: border-end-end-radius value: "67.20rem">)> #<rule selector: ".rounded-br-512" declarations: (#<declaration property: border-end-end-radius value: "81.92rem">)> #<rule selector: ".rounded-br-2xs" declarations: (#<declaration property: border-end-end-radius value: "0.16rem">)> #<rule selector: ".rounded-br-xs" declarations: (#<declaration property: border-end-end-radius value: "0.32rem">)> #<rule selector: ".rounded-br-sm" declarations: (#<declaration property: border-end-end-radius value: "0.48rem">)> #<rule selector: ".rounded-br-md" declarations: (#<declaration property: border-end-end-radius value: "0.64rem">)> #<rule selector: ".rounded-br-lg" declarations: (#<declaration property: border-end-end-radius value: "0.80rem">)> #<rule selector: ".rounded-br-xl" declarations: (#<declaration property: border-end-end-radius value: "0.96rem">)> #<rule selector: ".rounded-br-2xl" declarations: (#<declaration property: border-end-end-radius value: "1.12rem">)> #<rule selector: ".rounded-br-3xl" declarations: (#<declaration property: border-end-end-radius value: "1.28rem">)> #<rule selector: ".rounded-br-4xl" declarations: (#<declaration property: border-end-end-radius value: "1.44rem">)> #<rule selector: ".rounded-br-5xl" declarations: (#<declaration property: border-end-end-radius value: "1.60rem">)>)
Parameter: interactive-state-targets

Default value:

#f
Parameter: interactive-state-variants

Default value:

(focus focus-visible active)
Parameter: license-header

Default value:

"olive-css - Utility-class CSS framework that is easy to learn and hack\n\n  Copyright © Josep Bigorra <jjbigorra@@gmail.com>\n\n  olive-css is free software: you can redistribute it and/or modify\n  it under the terms of the Lesser GNU General Public License as published by\n  the Free Software Foundation, either version 3 of the License, or\n  (at your option) any later version.\n\n  olive-css is distributed in the hope that it will be useful,\n  but WITHOUT ANY WARRANTY; without even the implied warranty of\n  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  Lesser GNU General Public License for more details.\n\n  You should have received a copy of the Lesser GNU General Public License\n  along with olive-css.  If not, see <https://www.gnu.org/licenses/>."
Parameter: minified?

Default value:

#t
Parameter: mono-font-family

Default value:

("'Intel One Mono'" "'IBM Plex Mono'" "monospace")
Parameter: palettes

Default value:

((apple-green (100 (0.8214 0.1697 119.64)) (300 (0.7714 0.1697 119.64)) (500 (0.7214 0.1697 119.64)) (700 (0.6714 0.1697 119.64)) (900 (0.6214 0.1697 119.64))) (ash-gray (100 (0.9342 0.0248 196.69)) (300 (0.8842 0.0248 196.69)) (500 (0.8342 0.0248 196.69)) (700 (0.7842 0.0248 196.69)) (900 (0.7342 0.0248 196.69))) (asparagus (100 (0.7012 0.0882 137.17)) (300 (0.6512 0.0882 137.17)) (500 (0.6012 0.0882 137.17)) (700 (0.5512 0.0882 137.17)) (900 (0.5012 0.0882 137.17))) (beaver (100 (0.7651 0.0536 62.76)) (300 (0.7151 0.0536 62.76)) (500 (0.6651 0.0536 62.76)) (700 (0.6151 0.0536 62.76)) (900 (0.5651 0.0536 62.76))) (bistre (100 (0.3732 0.0607 61.09)) (300 (0.3232 0.0607 61.09)) (500 (0.2732 0.0607 61.09)) (700 (0.2232 0.0607 61.09)) (900 (0.1732 0.0607 61.09))) (black-bean (100 (0.3453 0.0769 40.07)) (300 (0.2953 0.0769 40.07)) (500 (0.2453 0.0769 40.07)) (700 (0.1953 0.0769 40.07)) (900 (0.1453 0.0769 40.07))) (black-olive (100 (0.5087 0.0176 128.95)) (300 (0.4587 0.0176 128.95)) (500 (0.4087 0.0176 128.95)) (700 (0.3587 0.0176 128.95)) (900 (0.3087 0.0176 128.95))) (buff (100 (0.8871 0.0895 49.68)) (300 (0.8371 0.0895 49.68)) (500 (0.7871 0.0895 49.68)) (700 (0.7371 0.0895 49.68)) (900 (0.6871 0.0895 49.68))) (terra (100 (0.7528 0.1464 39.15)) (300 (0.7028 0.1464 39.15)) (500 (0.6528 0.1464 39.15)) (700 (0.6028 0.1464 39.15)) (900 (0.5528 0.1464 39.15))) (cadet-gray (100 (0.754 0.0185 225.33)) (300 (0.704 0.0185 225.33)) (500 (0.654 0.0185 225.33)) (700 (0.604 0.0185 225.33)) (900 (0.554 0.0185 225.33))) (cambridge-green (100 (0.7443 0.0467 168.05)) (300 (0.6943 0.0467 168.05)) (500 (0.6443 0.0467 168.05)) (700 (0.5943 0.0467 168.05)) (900 (0.5443 0.0467 168.05))) (castleton-green (100 (0.4771 0.0754 167.02)) (300 (0.4271 0.0754 167.02)) (500 (0.3771 0.0754 167.02)) (700 (0.3271 0.0754 167.02)) (900 (0.2771 0.0754 167.02))) (charcoal (100 (0.4798 0.0343 266.95)) (300 (0.4298 0.0343 266.95)) (500 (0.3798 0.0343 266.95)) (700 (0.3298 0.0343 266.95)) (900 (0.2798 0.0343 266.95))) (china-rose (100 (0.7023 0.1041 7.06)) (300 (0.6523 0.1041 7.06)) (500 (0.6023 0.1041 7.06)) (700 (0.5523 0.1041 7.06)) (900 (0.5023 0.1041 7.06))) (china-violet (100 (0.6161 0.0609 310.77)) (300 (0.5661 0.0609 310.77)) (500 (0.5161 0.0609 310.77)) (700 (0.4661 0.0609 310.77)) (900 (0.4161 0.0609 310.77))) (claret (100 (0.5111 0.1625 5.42)) (300 (0.4611 0.1625 5.42)) (500 (0.4111 0.1625 5.42)) (700 (0.3611 0.1625 5.42)) (900 (0.3111 0.1625 5.42))) (coffee (100 (0.562 0.0615 63.5)) (300 (0.512 0.0615 63.5)) (500 (0.462 0.0615 63.5)) (700 (0.412 0.0615 63.5)) (900 (0.362 0.0615 63.5))) (dark-purple (100 (0.4022 0.0506 0.51)) (300 (0.3522 0.0506 0.51)) (500 (0.3022 0.0506 0.51)) (700 (0.2522 0.0506 0.51)) (900 (0.2022 0.0506 0.51))) (ferrari-red (100 (0.7399 0.2466 31.39)) (300 (0.6899 0.2466 31.39)) (500 (0.6399 0.2466 31.39)) (700 (0.5899 0.2466 31.39)) (900 (0.5399 0.2466 31.39))) (floral-white (100 (1 0.0164 91.55)) (300 (1 0.0164 91.55)) (500 (0.9819 0.0164 91.55)) (700 (0.9319 0.0164 91.55)) (900 (0.8819 0.0164 91.55))) (glaucous (100 (0.6653 0.0696 251.18)) (300 (0.6153 0.0696 251.18)) (500 (0.5653 0.0696 251.18)) (700 (0.5153 0.0696 251.18)) (900 (0.4653 0.0696 251.18))) (iris (100 (0.5929 0.161 279.98)) (300 (0.5429 0.161 279.98)) (500 (0.4929 0.161 279.98)) (700 (0.4429 0.161 279.98)) (900 (0.3929 0.161 279.98))) (jeans-blue (100 (0.552 0.0712 256.28)) (300 (0.502 0.0712 256.28)) (500 (0.452 0.0712 256.28)) (700 (0.402 0.0712 256.28)) (900 (0.352 0.0712 256.28))) (lapis-lazuli (100 (0.5595 0.0968 251.94)) (300 (0.5095 0.0968 251.94)) (500 (0.4595 0.0968 251.94)) (700 (0.4095 0.0968 251.94)) (900 (0.3595 0.0968 251.94))) (light-coral (100 (0.7751 0.152 20.02)) (300 (0.7251 0.152 20.02)) (500 (0.6751 0.152 20.02)) (700 (0.6251 0.152 20.02)) (900 (0.5751 0.152 20.02))) (mantis (100 (0.8048 0.1321 144.02)) (300 (0.7548 0.1321 144.02)) (500 (0.7048 0.1321 144.02)) (700 (0.6548 0.1321 144.02)) (900 (0.6048 0.1321 144.02))) (melon (100 (0.8664 0.0661 30.56)) (300 (0.8164 0.0661 30.56)) (500 (0.7664 0.0661 30.56)) (700 (0.7164 0.0661 30.56)) (900 (0.6664 0.0661 30.56))) (midnight-green (100 (0.5108 0.0614 214.25)) (300 (0.4608 0.0614 214.25)) (500 (0.4108 0.0614 214.25)) (700 (0.3608 0.0614 214.25)) (900 (0.3108 0.0614 214.25))) (mikado-yellow (100 (0.9538 0.1734 87.35)) (300 (0.9038 0.1734 87.35)) (500 (0.8538 0.1734 87.35)) (700 (0.8038 0.1734 87.35)) (900 (0.7538 0.1734 87.35))) (moonstone (100 (0.7609 0.0708 213.97)) (300 (0.7109 0.0708 213.97)) (500 (0.6609 0.0708 213.97)) (700 (0.6109 0.0708 213.97)) (900 (0.5609 0.0708 213.97))) (naples-yellow (100 (1 0.1449 97.97)) (300 (0.9511 0.1449 97.97)) (500 (0.9011 0.1449 97.97)) (700 (0.8511 0.1449 97.97)) (900 (0.8011 0.1449 97.97))) (onyx (100 (0.4588 0.0044 247.95)) (300 (0.4088 0.0044 247.95)) (500 (0.3588 0.0044 247.95)) (700 (0.3088 0.0044 247.95)) (900 (0.2588 0.0044 247.95))) (orange (100 (0.8404 0.1444 57.26)) (300 (0.7904 0.1444 57.26)) (500 (0.7404 0.1444 57.26)) (700 (0.6904 0.1444 57.26)) (900 (0.6404 0.1444 57.26))) (olive (100 (0.8457 0.1007 128.08)) (300 (0.7957 0.1007 128.08)) (500 (0.7457 0.1007 128.08)) (700 (0.6957 0.1007 128.08)) (900 (0.6457 0.1007 128.08))) (dark-khaki (100 (0.8675 0.098 104.51)) (300 (0.8175 0.098 104.51)) (500 (0.7675 0.098 104.51)) (700 (0.7175 0.098 104.51)) (900 (0.6675 0.098 104.51))) (pale-dogwood (100 (0.9322 0.0512 42.95)) (300 (0.8822 0.0512 42.95)) (500 (0.8322 0.0512 42.95)) (700 (0.7822 0.0512 42.95)) (900 (0.7322 0.0512 42.95))) (papaya-whip (100 (1 0.0384 83.83)) (300 (1 0.0384 83.83)) (500 (0.9622 0.0384 83.83)) (700 (0.9122 0.0384 83.83)) (900 (0.8622 0.0384 83.83))) (persia-pink (100 (0.8404 0.1399 348.9)) (300 (0.7904 0.1399 348.9)) (500 (0.7404 0.1399 348.9)) (700 (0.6904 0.1399 348.9)) (900 (0.6404 0.1399 348.9))) (pomp-and-power (100 (0.6818 0.0719 310.07)) (300 (0.6318 0.0719 310.07)) (500 (0.5818 0.0719 310.07)) (700 (0.5318 0.0719 310.07)) (900 (0.4818 0.0719 310.07))) (prussian-blue (100 (0.4093 0.0627 254.14)) (300 (0.3593 0.0627 254.14)) (500 (0.3093 0.0627 254.14)) (700 (0.2593 0.0627 254.14)) (900 (0.2093 0.0627 254.14))) (raisin-black (100 (0.3711 0.011 285.64)) (300 (0.3211 0.011 285.64)) (500 (0.2711 0.011 285.64)) (700 (0.2211 0.011 285.64)) (900 (0.1711 0.011 285.64))) (redwood (100 (0.6591 0.1288 31.7)) (300 (0.6091 0.1288 31.7)) (500 (0.5591 0.1288 31.7)) (700 (0.5091 0.1288 31.7)) (900 (0.4591 0.1288 31.7))) (russia-violet (100 (0.4016 0.1166 317.88)) (300 (0.3516 0.1166 317.88)) (500 (0.3016 0.1166 317.88)) (700 (0.2516 0.1166 317.88)) (900 (0.2016 0.1166 317.88))) (sienna (100 (0.5307 0.1478 35.91)) (300 (0.4807 0.1478 35.91)) (500 (0.4307 0.1478 35.91)) (700 (0.3807 0.1478 35.91)) (900 (0.3307 0.1478 35.91))) (spiced-terracotta (100 (0.7277 0.1081 53.34)) (300 (0.6777 0.1081 53.34)) (500 (0.6277 0.1081 53.34)) (700 (0.5777 0.1081 53.34)) (900 (0.5277 0.1081 53.34))) (stone (100 (0.987 0.0013 286.37)) (300 (0.947 0.0013 286.37)) (500 (0.907 0.0013 286.37)) (700 (0.857 0.0013 286.37)) (900 (0.807 0.0013 286.37))) (tawny (100 (0.7183 0.1557 45.26)) (300 (0.6683 0.1557 45.26)) (500 (0.6183 0.1557 45.26)) (700 (0.5683 0.1557 45.26)) (900 (0.5183 0.1557 45.26))) (tyrian (100 (0.4409 0.1048 358.88)) (300 (0.3909 0.1048 358.88)) (500 (0.3409 0.1048 358.88)) (700 (0.2909 0.1048 358.88)) (900 (0.2409 0.1048 358.88))) (umber (100 (0.5106 0.0384 61.8)) (300 (0.4606 0.0384 61.8)) (500 (0.4106 0.0384 61.8)) (700 (0.3606 0.0384 61.8)) (900 (0.3106 0.0384 61.8))) (van-dyke (100 (0.4297 0.0387 11.82)) (300 (0.3797 0.0387 11.82)) (500 (0.3297 0.0387 11.82)) (700 (0.2797 0.0387 11.82)) (900 (0.2297 0.0387 11.82))) (white-smoke (100 (1 0 0)) (300 (1 0 0)) (500 (0.9702 0 0)) (700 (0.9202 0 0)) (900 (0.8702 0 0))) (wine (100 (0.5284 0.0747 9.86)) (300 (0.4784 0.0747 9.86)) (500 (0.4284 0.0747 9.86)) (700 (0.3784 0.0747 9.86)) (900 (0.3284 0.0747 9.86))))
Parameter: responsive

Default value:

#<procedure all-responsive ()>
Parameter: responsive-classes

Default value:

#f
Parameter: rounded-multiplier

Default value:

0.16
Parameter: sans-font-family

Default value:

("'Lucida Sans'" "'Plus Jakarta Sans'" "'IBM Plex Sans'" "ui-sans-serif" "system-ui" "sans-serif" "'Apple Color Emoji'" "'Segoe UI Emoji'" "'Segoe UI Symbol'" "'Noto Color Emoji'")
Parameter: scroll-snap-aligns

Default value:

(#<rule selector: ".snap-start" declarations: (#<declaration property: scroll-snap-align value: start>)> #<rule selector: ".snap-end" declarations: (#<declaration property: scroll-snap-align value: end>)> #<rule selector: ".snap-center" declarations: (#<declaration property: scroll-snap-align value: center>)> #<rule selector: ".snap-none" declarations: (#<declaration property: scroll-snap-align value: none>)>)
Parameter: scroll-snap-types

Default value:

(#<rule selector: ".snap-none" declarations: (#<declaration property: scroll-snap-type value: none>)> #<rule selector: ".snap-x" declarations: (#<declaration property: scroll-snap-type value: "x proximity">)> #<rule selector: ".snap-y" declarations: (#<declaration property: scroll-snap-type value: "y proximity">)> #<rule selector: ".snap-both" declarations: (#<declaration property: scroll-snap-type value: "both proximity">)>)
Parameter: serif-font-family

Default value:

("'DejaVu Serif'" "'IBM Plex Serif'" "ui-serif" "serif" "'Times New Roman'")
Parameter: state-variant-targets

Default value:

#f
Parameter: state-variants

Default value:

(hover)
Parameter: with-dark-mode?

Default value:

#t

1.20.2 Procedures

Procedure: all-responsive

Undocumented procedure.

Procedure: color-base-classes palettes

Solid palette colors for bg/text/border/decoration.

Used to give the complete build responsive color parity (e.g. md:bg-x) without expanding the large opacity-modifier cross-product under every breakpoint. The full bg-<color>-<shade>/<opacity> family is generated only once by colors.

Procedure: colors palettes

Undocumented procedure.

Procedure: core-utility-classes

All structural utility families.

These contain no palette-derived colors and no @keyframes, so they are safe to duplicate under media queries and state variants. Palette-derived families live in palette-utility-classes and the main color system is generated separately by colors.

Procedure: font-family

Undocumented procedure.

Procedure: lean-responsive-classes

The lean default responsive set.

Historically only a subset of families was duplicated under each breakpoint; keeping that default means per-project builds stay small. Bind responsive-classes to core-utility-classes for full responsive parity (this is what the complete build does).

Procedure: olive-css-gen

Undocumented procedure.

Procedure: palette-utility-classes palettes

Palette-derived utilities: ring/outline/accent/caret colors and SVG fill/stroke.

Procedure: reduced-responsive

Undocumented procedure.

Procedure: state-variant-classes

Generate one rule per enabled state variant over the configured targets.

Procedure: utility-classes palettes

Every utility family generated by olive-css (structural + palette colors).

Procedure: write-css-to-file KEY: #:file #:css-lines

Undocumented procedure.

Procedure: write-docs-to-file KEY: #:file #:lines

Undocumented procedure.


Next: (olive-css sizes), Previous: (olive-css license), Up: API