Mixins and functions
The Sass API you use when authoring a theme. Every accessor returns a var(--jf-*) reference (so runtime overrides flow through) unless noted; interpolate (#{…}) when using one inside another value.
Tokens
| Function | Does |
|---|---|
| token($name, $fallback?) | Reference a custom property, applying the $token-prefix. token(font-primary) → var(--jf-font-primary). (Was v() in v4.) |
| token-or($stem, $fallback-stem) | A component token that falls back to a shared one. token-or(card-border-color, border-color) → var(--jf-card-border-color, var(--jf-border-color)). For opt-in seams not declared by default. |
| token-name($name) | Just the prefixed name, for declaring: #{token-name(x)}: … → --jf-x: …. |
Colour
The consumer-facing colour API is five functions plus token().
| Function | Use when | Example |
|---|---|---|
| get-color($family, $shade: 500) | you want a specific numbered shade. | get-color(primary, 700) → var(--jf-color-primary-700) |
| get-color-role($family, $role) | you want a family by intent (subtle / muted / emphasis / strong) — flips in dark mode. | get-color-role(primary, emphasis) → var(--jf-color-primary-emphasis) |
| get-on-color($x, $shade?) | you need text for a background — a family + shade, or a single resolved value (a --jf-color-* ref, a --jf-color-bg*, or a one-off colour). | get-on-color(primary, 700) → var(--jf-color-on-primary-700) |
| get-color-raw($family, $shade) | you need the literal colour — SVG data-URIs, rgba(), Sass colour maths. | get-color-raw(primary, 500) → #eb567d (the seed) |
| role-shade($role) | you need the raw shade number a role maps to. | role-shade(emphasis) → 700 |
makeColorPalette($seed) — turns one seed colour into the 25–1000 ramp, with the seed as 500. Jellyfish calls it for you on every $colors entry, so you write ("brand": #0b7) and get this. Call it yourself only to build a ramp outside the palette:
Type
| Helper | Does | Example |
|---|---|---|
| #{headings($from: 1, $to: 6)} | Selector list for h1–h6 (or a sub-range). | #{headings(1, 3)} → h1, h2, h3 |
| @include type($step, $important?) | Sets font-size (a fluid clamp() for md+) and the paired line-height from $type-leading — they can't drift apart. | @include type(lg); → font-size: clamp(…); line-height: 1.35; |
| @include h1() … h6() | type() with the step from $heading-scale. The .h1–.h6 classes call these with $important: true. | @include h3(); → same output as an <h3> |
| fluid($minPx, $maxPx, $minVw?, $maxVw?) | A clamp() sliding between two px sizes across a viewport range. | fluid(24px, 30px) → clamp(1.5rem, …, 1.875rem) |
| rem($value) | px → rem (against $root-size); non-px passes through. | rem(24px) → 1.5rem |
| em($px) | px → em (16px root). For media queries. | em(900px) → 56.25em |
| @include text-replace / .text-replace | Hide text, show a background image in its place. See the example below. | — |
.text-replace keeps the text for semantics / SEO / screen readers, but paints a background image over it — give the element a fixed width / height matching the image:
Jellyfish UI
Design-axis accessors
One per non-colour scale — each validates the step (build-time error listing valid keys if you mistype) and returns the --jf-* reference. See Design Tokens for the values.
| Function | Steps | Returns |
|---|---|---|
| get-space($step) | 3xs 2xs xs sm md lg xl 2xl | var(--jf-space-md) — margin / padding / gap |
| get-size($n) | $sizing-system keys | raw length (4rem) — fixed dimensions, calc operands |
| get-radius($step) | none xs sm md lg xl 2xl full | var(--jf-radius-md) |
| get-leading($step) | flush tight snug base loose | var(--jf-leading-tight) |
| get-weight($step) | hairline thin light normal medium semibold bold xbold black | var(--jf-font-weight-bold) |
| get-shadow($step) | none xs sm md lg xl | var(--jf-shadow-md) |
| get-duration($step) | instant fast base slow slower | var(--jf-duration-base) |
| get-ease($step) | in out in-out spring | var(--jf-ease-out) |
Motion
@include motion($properties...) transitions each property on var(--jf-transition), so prefers-reduced-motion (which zeroes the duration tokens) switches it off. For one property, write transition: var(--jf-transition) directly. To change speed / curve for a region, redeclare --jf-transition (or a --jf-duration-* / --jf-ease-*) on a scope.
.drawer {
--jf-transition: var(--jf-duration-slow) var(--jf-ease-out);
@include motion(transform, opacity);
}
motion(transform) — hover.
motion(background, transform, color) — hover.
Misc
| Mixin | Does |
|---|---|
| @include icon($size: 1em) | A mask-based icon in the current text colour, masked from --jf-icon (set that to a url() on the same selector). Backs .icon — see Utilities. |
| @include pseudo($content: "", $display: block, $pos: absolute) | The three properties a pseudo-element always needs. |
| @include do-not-print / .do-not-print | display: none in @media print. |
| @include in-dark-mode / in-light-mode | Wrap a non-token override (nested inside the selector it applies to) in the same dark-mode precedence as :root. See Theme colours. |
| above() / below() / between() | Media-query mixins — see Breakpoints. |
| container-above() / -below() / -between() | Container-query equivalents — see the dedicated Container Queries page. |