This is the collection of available breakpoint variables:

• BP-teeny - 375px
• BP-tiny - 480px
• BP-small - 768px
• BP-medium - 1023px
• BP-large - 1200px
• BP-extra-large - 1439px

Also we have a standard breakpoints collection meant to be used as suffixes for some utility classes

If you want a utility class to trigger only at defined breakpoints you can use those:

• -t - refers to tiny breakpoint (max-width: 480px)
• -s - refers to small breakpoint (max-width: 768px)
• -m - refers to medium breakpoint (max-width: 1023px)

You can use these mixins with no arguments and they will output the desired a max-width media-query. Use the direction argument to set it to min.

teeny-screen() Refers to (max-width: 375px) teeny-screen('min') Refers to (min-width: 376px)

tiny-screen() Refers to (max-width: 480px) tiny-screen('min') Refers to (min-width: 481px)

small-screen() Refers to (max-width: 768px) small-screen('min') Refers to (min-width: 769px)

medium-screen() Refers to (max-width: 1023px) medium-screen('min') Refers to (min-width: 1024px)

large-screen() Refers to (max-width: 1200px) large-screen('min') Refers to (min-width: 1201px)

extra-large-screen() Refers to (max-width: 1439px) extra-large-screen('min') Refers to (min-width: 1440px)

Refers to (min-width: 1024px)

Refers to (min-width: 543px) and (min-height: 375px) Triggers when the viewport has a width bigger than 543px AND a height bigger than 375px

Refers to (max-width: 543px), (max-height: 375px) Triggers when the viewport has a width smaller than 543px OR a height smaller than 375px

Refers to (min-width: 769px) and (max-width: 1023px)

Refers to small-screen() which is (max-width: 768px)

Refers to (min-width: 769px)

Refers to (min-width: 1024px)

Refers to medium-screen() which is (max-width: 1023px)

Colors used in the user interface.

ℹ️ In general, you are advised to use theme colors when building your components: this will ensure your components react correctly when changing the theme.

If you need to access an absolute color that is not semantic, you can use

import palette from 'cozy-ui/transpiled/react/palette'
<div style={{ backgroundColor: palette.melon }} />

There's two available for now, Inter and Lato, which is used on body, so basically everywhere. It's also available in bold.

Icons system management.

Use them by extending the placebolders like this @extend $icon-16

There are several preset squared sizes available. Sizes are set using rem unit and their equivalents in px matches if the default size of your page is 16px (which is the default size in Cozy-UI)

Some available options for icon elements.

Semantic colors suitable for theming. We encourage users of cozy-ui to use semantic colors instead of absolute colors to facilitate theming.

We try to use a naming schema that is close to what is use in Material-UI React's theming. It is possible that we have some discrepancies. If you see something that seems out of the ordinary and where you think we could reduce the difference with MUI, please do not hesitate to open an issue.

These colors use the alpha layer. Be careful to use the semantic variable. Hexadecimal colors are here only as an example on a white background.

These colors use the alpha layer. Be careful to use the semantic variable. Hexadecimal colors are here only as an example on a white background.

These colors use the alpha layer. Be careful to use the semantic variable. Hexadecimal colors are here only as an example on a white background.

These colors use the alpha layer. Be careful to use the semantic variable. Hexadecimal colors are here only as an example on a white background.

List of every z-index related to components in order to keep a clean & maintainable order of indexes.

Those indexes are 10 based so you can deal with extra layers using $index + 1