# @odx/foundation
The `@odx/foundation` package provides the foundational tokens and styles that are needed to build applications and websites consistent with the ODX Design System.
It includes a comprehensive CSS framework, global styles, and utility classes to help you create visually appealing and user-friendly interfaces.
### Features
- **Foundational Styles**: Comprehensive global styles, including colors, spacing, and themes.
- **CSS Framework**: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
- **Breakpoint System**: A responsive breakpoint system to create adaptable layouts across various devices.
- **Dark Mode Support**: Built-in dark mode support for better user experience in low-light environments.
- **Localization**: Localization utilities to manage localization and language preferences in your application.
- **Browser Support**: Baseline 2024
### Install
[
](https://npmjs.org/package/@odx/foundation)
##### PNPM
```bash
pnpm add @odx/foundation @odx/design-tokens
```
##### NPM
```bash
npm i @odx/foundation @odx/design-tokens --save
```
### Setup
Once installed, you can import the baseline styles into your project:
##### JavaScript
```js
/* Load global fonts and styles (in JS) */
import '@odx/design-tokens/css';
import '@odx/design-tokens/fonts';
import '@odx/foundation/styles';
```
##### CSS
```css
/* Load global fonts and styles (in CSS) */
@import "@odx/design-tokens/fonts"; /* @odx/design-tokens/assets/fonts.css */
@import "@odx/design-tokens/css"; /* @odx/design-tokens/dist/tokens.css */
@import "@odx/foundation/styles"; /* @odx/foundation/dist/styles.css */
```
##### HTML
In order for the baseline styles to apply, you have to add the `odx-root` to the `html` element of your application.
```html
...
...
```
### Theming
The `@odx/foundation` package provides built-in support for light and dark modes. You can easily switch between modes using the `setTheme` function:
```js
import { setTheme } from '@odx/foundation';
setTheme({
// Set the color mode (light, dark, or auto)
mode: 'light' | 'dark' | 'auto',
// Enables/Disables European Accessibility Act compliant color contrasts
eaaConformity: 'on' | 'off',
});
```
### Documentation
For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our storybook documentation.