Accord's Library

CSS Utility classes

• when-js: only display element if JavaScript is available

• when-no-js: only display element if JavaScript is unavailable

• when-dark-theme: only display element if the current theme is dark (manually or automatically)

• when-light-theme: only display element if the current theme is light (manually or automatically)

• when-no-print: only display when not printing

• hide-scrollbar: hide the element scrollbar

• texture-dots: add a background paper like texture to the element

• font-serif: by default, everything use sans-serif. Use this class to make the font serif.

• high-contrast-text: add a shadow around the text to increase perceived contrast.

• prose: apply typography rules. Useful for main text content

CSS Component classes

• pressable-icon: used to make a SVG/Text look pressable
• pressable: used to make a container look pressable

CSS Global Variables

• --color-base-X: the current theme colors. X can be between 0 and 1000, available in increments of 50.
• --font-serif: by default, everything use sans-serif. Use this variable to make the font serif.

Translations

For all the following exemples, the spaces within the double curly braces are important.

Variables

Variables allow to embed strings or numbers within a translation. In the JSON translation file:

"home.greeting": "Hello {{ name }}!"

If then you call:

t("home.greeting", { name: "John" })

It will produce

Hello John!

Plural

In the JSON translation file:

"videos": "{{ count }} video{{ count+,>1{s} }}"

If then you call:

t("videos", { count: 0 })
t("videos", { count: 1 })
t("videos", { count: 2 })

It will produce

0 video
1 video
2 videos

You can provide multiple options inside a plural:

"videos": "{{ count+,=0{No},=1{One},>1{{{ count }}} }} video{{ count+,>1{s} }}"

If then you call:

t("videos", { count: 0 })
t("videos", { count: 1 })
t("videos", { count: 2 })

It will produce

No video
One video
2 videos

The following operators are supported: =, >, <

Conditional

In the JSON translation file:

"returnButton": "Return{{ x?, to {{ x }} }}"

If then you call:

t("returnButton", { x: "Home" })
t("returnButton", { x: undefined })
t("returnButton", { x: null })
t("returnButton", { x: "" })
t("returnButton", { x: 0 })

It will produce

Return to Home
Return
Return
Return to 0

The condition is: variable !== undefined && variable !== null && variable !== ""
If the condition is met, the first value is used. If not, the second value is used. The first value is required. If the second value is omited, it will be consider as an empty string.

Here's an exemple where the second option is explicit. In the JSON translation file:

"returnButton": "Return{{ x?, to {{ x }}, back }}"

If then you call:

t("returnButton", { x: "Home" })
t("returnButton", { x: undefined })

It will produce

Return to Home
Return back