1.4.1 Parameters

Parameter: background-blend-mode ¶

Default value:

(#<rule selector: ".bg-blend-normal" declarations: (#<declaration property: background-blend-mode value: normal>)> #<rule selector: ".bg-blend-multiply" declarations: (#<declaration property: background-blend-mode value: multiply>)> #<rule selector: ".bg-blend-screen" declarations: (#<declaration property: background-blend-mode value: screen>)> #<rule selector: ".bg-blend-overlay" declarations: (#<declaration property: background-blend-mode value: overlay>)> #<rule selector: ".bg-blend-darken" declarations: (#<declaration property: background-blend-mode value: darken>)> #<rule selector: ".bg-blend-lighten" declarations: (#<declaration property: background-blend-mode value: lighten>)> #<rule selector: ".bg-blend-color-dodge" declarations: (#<declaration property: background-blend-mode value: color-dodge>)> #<rule selector: ".bg-blend-color-burn" declarations: (#<declaration property: background-blend-mode value: color-burn>)> #<rule selector: ".bg-blend-hard-light" declarations: (#<declaration property: background-blend-mode value: hard-light>)> #<rule selector: ".bg-blend-soft-light" declarations: (#<declaration property: background-blend-mode value: soft-light>)> #<rule selector: ".bg-blend-difference" declarations: (#<declaration property: background-blend-mode value: difference>)> #<rule selector: ".bg-blend-exclusion" declarations: (#<declaration property: background-blend-mode value: exclusion>)> #<rule selector: ".bg-blend-hue" declarations: (#<declaration property: background-blend-mode value: hue>)> #<rule selector: ".bg-blend-saturation" declarations: (#<declaration property: background-blend-mode value: saturation>)> #<rule selector: ".bg-blend-color" declarations: (#<declaration property: background-blend-mode value: color>)> #<rule selector: ".bg-blend-luminosity" declarations: (#<declaration property: background-blend-mode value: luminosity>)> #<rule selector: ".bg-blend-plus-darker" declarations: (#<declaration property: background-blend-mode value: plus-darker>)> #<rule selector: ".bg-blend-plus-lighter" declarations: (#<declaration property: background-blend-mode value: plus-lighter>)>)

Parameter: inset-ring ¶

Default value:

(#<rule selector: ".inset-ring-0" declarations: (#<declaration property: box-shadow value: "inset 0 0 0 0px var(--olive-inset-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".inset-ring-1" declarations: (#<declaration property: box-shadow value: "inset 0 0 0 1px var(--olive-inset-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".inset-ring-2" declarations: (#<declaration property: box-shadow value: "inset 0 0 0 2px var(--olive-inset-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".inset-ring-4" declarations: (#<declaration property: box-shadow value: "inset 0 0 0 4px var(--olive-inset-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".inset-ring-8" declarations: (#<declaration property: box-shadow value: "inset 0 0 0 8px var(--olive-inset-ring-color,rgb(0 0 0 / 0.5))">)>)

Parameter: mix-blend-mode ¶

Default value:

(#<rule selector: ".mix-blend-normal" declarations: (#<declaration property: mix-blend-mode value: normal>)> #<rule selector: ".mix-blend-multiply" declarations: (#<declaration property: mix-blend-mode value: multiply>)> #<rule selector: ".mix-blend-screen" declarations: (#<declaration property: mix-blend-mode value: screen>)> #<rule selector: ".mix-blend-overlay" declarations: (#<declaration property: mix-blend-mode value: overlay>)> #<rule selector: ".mix-blend-darken" declarations: (#<declaration property: mix-blend-mode value: darken>)> #<rule selector: ".mix-blend-lighten" declarations: (#<declaration property: mix-blend-mode value: lighten>)> #<rule selector: ".mix-blend-color-dodge" declarations: (#<declaration property: mix-blend-mode value: color-dodge>)> #<rule selector: ".mix-blend-color-burn" declarations: (#<declaration property: mix-blend-mode value: color-burn>)> #<rule selector: ".mix-blend-hard-light" declarations: (#<declaration property: mix-blend-mode value: hard-light>)> #<rule selector: ".mix-blend-soft-light" declarations: (#<declaration property: mix-blend-mode value: soft-light>)> #<rule selector: ".mix-blend-difference" declarations: (#<declaration property: mix-blend-mode value: difference>)> #<rule selector: ".mix-blend-exclusion" declarations: (#<declaration property: mix-blend-mode value: exclusion>)> #<rule selector: ".mix-blend-hue" declarations: (#<declaration property: mix-blend-mode value: hue>)> #<rule selector: ".mix-blend-saturation" declarations: (#<declaration property: mix-blend-mode value: saturation>)> #<rule selector: ".mix-blend-color" declarations: (#<declaration property: mix-blend-mode value: color>)> #<rule selector: ".mix-blend-luminosity" declarations: (#<declaration property: mix-blend-mode value: luminosity>)> #<rule selector: ".mix-blend-plus-darker" declarations: (#<declaration property: mix-blend-mode value: plus-darker>)> #<rule selector: ".mix-blend-plus-lighter" declarations: (#<declaration property: mix-blend-mode value: plus-lighter>)>)

Parameter: opacity ¶

Default value:

(#<rule selector: ".opacity-0" declarations: (#<declaration property: opacity value: "0.0">)> #<rule selector: ".opacity-5" declarations: (#<declaration property: opacity value: "0.05">)> #<rule selector: ".opacity-10" declarations: (#<declaration property: opacity value: "0.1">)> #<rule selector: ".opacity-15" declarations: (#<declaration property: opacity value: "0.15">)> #<rule selector: ".opacity-20" declarations: (#<declaration property: opacity value: "0.2">)> #<rule selector: ".opacity-25" declarations: (#<declaration property: opacity value: "0.25">)> #<rule selector: ".opacity-30" declarations: (#<declaration property: opacity value: "0.3">)> #<rule selector: ".opacity-35" declarations: (#<declaration property: opacity value: "0.35">)> #<rule selector: ".opacity-40" declarations: (#<declaration property: opacity value: "0.4">)> #<rule selector: ".opacity-45" declarations: (#<declaration property: opacity value: "0.45">)> #<rule selector: ".opacity-50" declarations: (#<declaration property: opacity value: "0.5">)> #<rule selector: ".opacity-55" declarations: (#<declaration property: opacity value: "0.55">)> #<rule selector: ".opacity-60" declarations: (#<declaration property: opacity value: "0.6">)> #<rule selector: ".opacity-65" declarations: (#<declaration property: opacity value: "0.65">)> #<rule selector: ".opacity-70" declarations: (#<declaration property: opacity value: "0.7">)> #<rule selector: ".opacity-75" declarations: (#<declaration property: opacity value: "0.75">)> #<rule selector: ".opacity-80" declarations: (#<declaration property: opacity value: "0.8">)> #<rule selector: ".opacity-85" declarations: (#<declaration property: opacity value: "0.85">)> #<rule selector: ".opacity-90" declarations: (#<declaration property: opacity value: "0.9">)> #<rule selector: ".opacity-95" declarations: (#<declaration property: opacity value: "0.95">)> #<rule selector: ".opacity-100" declarations: (#<declaration property: opacity value: "1.0">)>)

Parameter: outline ¶

Default value:

(#<rule selector: ".outline-none" declarations: (#<declaration property: outline-style value: none>)> #<rule selector: ".outline-hidden" declarations: (#<declaration property: outline value: "2px solid transparent"> #<declaration property: outline-offset value: "2px">)> #<rule selector: ".outline-0" declarations: (#<declaration property: "outline-style" value: "solid"> #<declaration property: outline-width value: "0.00px">)> #<rule selector: ".outline-1" declarations: (#<declaration property: "outline-style" value: "solid"> #<declaration property: outline-width value: "1.00px">)> #<rule selector: ".outline-2" declarations: (#<declaration property: "outline-style" value: "solid"> #<declaration property: outline-width value: "2.00px">)> #<rule selector: ".outline-4" declarations: (#<declaration property: "outline-style" value: "solid"> #<declaration property: outline-width value: "4.00px">)> #<rule selector: ".outline-8" declarations: (#<declaration property: "outline-style" value: "solid"> #<declaration property: outline-width value: "8.00px">)> #<rule selector: ".outline-offset-0" declarations: (#<declaration property: outline-offset value: "0.00px">)> #<rule selector: ".outline-offset-1" declarations: (#<declaration property: outline-offset value: "1.00px">)> #<rule selector: ".outline-offset-2" declarations: (#<declaration property: outline-offset value: "2.00px">)> #<rule selector: ".outline-offset-4" declarations: (#<declaration property: outline-offset value: "4.00px">)> #<rule selector: ".outline-offset-8" declarations: (#<declaration property: outline-offset value: "8.00px">)> #<rule selector: ".outline-solid" declarations: (#<declaration property: outline-style value: solid>)> #<rule selector: ".outline-dashed" declarations: (#<declaration property: outline-style value: dashed>)> #<rule selector: ".outline-dotted" declarations: (#<declaration property: outline-style value: dotted>)> #<rule selector: ".outline-double" declarations: (#<declaration property: outline-style value: double>)>)

Parameter: ring ¶

Default value:

(#<rule selector: ".ring" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 1px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".ring-inset" declarations: (#<declaration property: "--olive-ring-inset" value: "inset">)> #<rule selector: ".ring-0" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 0px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".ring-1" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 1px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".ring-2" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 2px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".ring-4" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 4px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)> #<rule selector: ".ring-8" declarations: (#<declaration property: box-shadow value: "var(--olive-ring-inset,) 0 0 0 8px var(--olive-ring-color,rgb(0 0 0 / 0.5))">)>)

Parameter: text-shadow ¶

Default value:

(#<rule selector: ".text-shadow-2xs" declarations: (#<declaration property: text-shadow value: "0 1px 0 rgb(0 0 0 / 0.15)">)> #<rule selector: ".text-shadow-xs" declarations: (#<declaration property: text-shadow value: "0 1px 1px rgb(0 0 0 / 0.15)">)> #<rule selector: ".text-shadow-sm" declarations: (#<declaration property: text-shadow value: "0 1px 2px rgb(0 0 0 / 0.25)">)> #<rule selector: ".text-shadow-md" declarations: (#<declaration property: text-shadow value: "0 2px 4px rgb(0 0 0 / 0.25)">)> #<rule selector: ".text-shadow-lg" declarations: (#<declaration property: text-shadow value: "0 4px 8px rgb(0 0 0 / 0.25)">)> #<rule selector: ".text-shadow-none" declarations: (#<declaration property: text-shadow value: none>)>)

1.4.2 Procedures

Procedure: effect-classes palettes ¶

Undocumented procedure.

Procedure: effect-colors palettes ¶

Palette-aware outline/ring color utilities.

Procedure: effect-core-classes ¶

Structural effect utilities (no palette-derived colors).