# @mskcc/fundamentals

> All the primitive stylesheets and assets for MSKCC design system.

Latest version **2.7.3** (published 2025-02-05) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @mskcc/fundamentals
pnpm add @mskcc/fundamentals
yarn add @mskcc/fundamentals
bun add @mskcc/fundamentals
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.3 |
| Published | 2025-02-05 |
| First published | 2021-09-23 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 24.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jamesmsk, walee, chapmanm, informatix9, nierococ |

## Links

- npm: https://www.npmjs.com/package/@mskcc/fundamentals
- Repository: https://github.mskcc.org/digital-transformers/design-system
- npm.io page: https://npm.io/package/@mskcc/fundamentals

## Dependencies (4)

- [@mskcc/colors](https://npm.io/package/@mskcc/colors.md) 2.7.3
- [@mskcc/themes](https://npm.io/package/@mskcc/themes.md) 2.7.3
- [breakpoint-sass](https://npm.io/package/breakpoint-sass.md) ^2.7.1
- [breakpoint-slicer](https://npm.io/package/breakpoint-slicer.md) ^2.0.0

## Recent versions

- 2.7.3 (latest) — 2025-02-05
- 2.7.0-beta.2 (beta) — 2024-08-05
- 2.7.2 — 2024-10-22
- 2.7.1 — 2024-08-22
- 2.7.0 — 2024-08-20
- 2.7.0-beta.1 — 2024-07-11
- 2.6.1 — 2024-07-03
- 2.7.0-beta.0 — 2024-05-06
- 2.6.0 — 2024-04-29
- 2.5.1-beta.0 — 2024-04-25
- 2.5.0 — 2024-04-24
- 2.4.5 — 2024-03-01
- 2.4.4 — 2024-02-01
- 2.4.3 — 2024-01-18
- 2.4.3-beta.0 — 2024-01-04
- … 68 more at https://npm.io/package/@mskcc/fundamentals/versions

## README

<img src="https://cdn.jsdelivr.net/npm/@mskcc/dsm-assets@latest/src/design-system-logo.svg" />

# @mskcc/fundamentals

> The core brand assets and base level stylesheets for building applications.

| description                | location                                     |
| -------------------------- | -------------------------------------------- |
| reset, helpers, fonts      | @mskcc/fundamentals/src/styles-all.scss      |
| css version of styles-all  | @mskcc/fundamentals/dist/styles-all.min.css  |
| logos                      | @mskcc/fundamentals/dist/logos/assets/\*     |
| favicons                   | @mskcc/fundamentals/src/favicons/assets/\*   |
| manifest                   | @mskcc/fundamentals/src/manifest/assets/\*   |
| scss stylesheets           | @mskcc/fundamentals/src/\*                   |
| css stylesheets            | @mskcc/fundamentals/dist/\*                  |
| color types (js, ts, json) | @mskcc/fundamentals/dist/types/msk-colors.\* |
| color css variables        | @mskcc/fundamentals/dist/msk-colors.css      |

## Installation

```bash
npm install @mskcc/fundamentals

# pnpm
pnpm install @mskcc/fundamentals

# yarn
yarn add @mskcc/fundamentals
```

## Getting started

Begin with the `styles-all` stylesheet to reset the browser defaults, provide helper classes, and install font families.

```scss
@import '@mskcc/fundamentals/src/styles-all';
```

```css
@import '@mskcc/fundamentals/css/styles-all';
```

> To install without the font families, use `styles-base`.

## Using font family stylesheets

The font files are colocated with the font stylesheets.

```scss
@use '@mskcc/fundamentals/src/typography/gotham-all.scss';
```

> You may need to adjust the path to the font files to point to the assets within your `node_modules`.

```scss
@use '@mskcc/fundamentals/src/typography/gotham-all.scss' with (
  $msk--font-path: '@mskcc/fundamentals/src/typography/assets/'
);
```

## Using `scss` colors, variables, mixins

```scss
@use '@mskcc/fundamentals/scss/colors' as c;
@use '@mskcc/fundamentals/scss/variables' as v;
@use '@mskcc/fundamentals/scss/mixins' as m;

.msk-button {
  background-color: c.$msk--color-blue-50;
  box-shadow: v.$msk--elevation-plus-24;
  font-size: m.msk-rem(16px);
}
```

## Development

```shell
svgo -f src/logo/assets/ -o tmp/
```

---
_Source: https://npm.io/package/@mskcc/fundamentals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._