CSS

The Cosmos Foundation library provides primitives as CSS Custom Properties and distributes them through a CSS file.

To make use of the CSS primitives in code, either install the @cosmos/foundation NPM package and import the CSS file via a CSS pre-processor that supports file injection.

/* Importing CSS primitives from the @cosmos/foundation package */
@import url('./node_modules/@cosmos/foundation/lib/primitives/index.css');

input {
  border-radius: var(--cosmos-radius-large);
}

Alternatively you can also use it directly from our static file host. This is a good option to get you started off quickly for prototyping or similar use cases.

/* Importing CSS primitives directly from the static host */
<link rel="stylesheet" href="https://rbds-static.redbull.com/@cosmos/foundation/latest/index.css">

<style>
  input {
    border-radius: var(--cosmos-radius-large);
  }
</style>