# oncokb-styles

> OncoKB Styles

Latest version **1.8.0** (published 2025-05-15) · AGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install oncokb-styles
pnpm add oncokb-styles
yarn add oncokb-styles
bun add oncokb-styles
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2025-05-15 |
| First published | 2019-08-02 |
| Weekly downloads | 0 |
| License | AGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | The OncoKB Authors |
| Maintainers | zhx, oncokbdev |
| Keywords | oncokb, styles, css, sass |

## Links

- npm: https://www.npmjs.com/package/oncokb-styles
- Repository: https://github.com/oncokb/oncokb-styles
- Homepage: https://www.oncokb.org
- Issues: https://github.com/oncokb/oncokb-styles/issues
- npm.io page: https://npm.io/package/oncokb-styles

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.8.0 (latest) — 2025-05-15
- 1.5.0-alpha.0 (alpha.0) — 2023-11-13
- 1.4.0-alpha.0 (alpha) — 2022-05-31
- 1.7.0 — 2025-05-07
- 1.6.0-alpha.1 — 2024-11-04
- 1.6.0-alpha.0 — 2024-10-14
- 1.5.0 — 2023-11-13
- 1.4.2 — 2022-06-10
- 1.4.1 — 2022-05-31
- 1.3.0 — 2021-10-11
- 1.3.0-alpha.2 — 2021-09-30
- 1.3.0-alpha.1 — 2021-09-29
- 1.3.0-alpha.0 — 2021-09-29
- 1.2.0 — 2021-08-25
- 1.2.0-alpha.3 — 2021-08-25
- … 18 more at https://npm.io/package/oncokb-styles/versions

## README

# OncoKB Styles

## Status
![NPM Publish](https://github.com/oncokb/styles/workflows/NPM%20Publish/badge.svg) ![Application CI](https://github.com/oncokb/styles/workflows/Application%20CI/badge.svg) ![Release Management](https://github.com/oncokb/styles/workflows/Release%20Management/badge.svg)

## Use css colors
Please use class name `oncokb {color}`

| Category     | Possible Values to replace {color}                                                                                                                     |
|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| oncogenicity | oncogenic, likely-oncogenic, resistance, neutral, likely-neutral, inconclusive, vus, unknown                                                           |
| level        | level-1, level-2, level-3, level-3A, level-3B, level-4, level-R1, level-R2, level-R3, level-Dx1, level-Dx2, level-Dx3, level-Px1, level-Px2, level-Px3 |

### Example
Use the color for oncogenic `oncokb oncogenic`

## Use icon
Please use class name `oncokb icon {icon-name}`

| Category           | Possible values to replace {icon-name}                                                       |
|--------------------|----------------------------------------------------------------------------------------------|
| Oncogenicity       | oncogenic, likely-oncogenic, resistance, neutral, likely-neutral, inconclusive, vus, unknown |
| Therapeutic Levels | level-1, level-2, level-3, level-3A, level-3B, level-4, level-R1, level-R2, level-R3         |
| Diagnostic Levels  | level-Dx1, level-Dx2, level-Dx3                                                              |
| Prognostic Levels  | level-Px1, level-Px2, level-Px3                                                              |

### Example
When showing level 1 icon, you should use `oncokb icon level-1`

### Icons
![OncoKB Icons](images/v4/icons.png )


## Use annotation icon
Please use class name `oncokb annotation-icon {oncogenicity} level{-sensitive level}{-resistance level}`  
The list of icons are for oncogenicity and therapeutic levels. Dx/Px are not included, use [Icons](#icons) above instead.  


| Variable         | Possible values to replace                                                                   |
|------------------|----------------------------------------------------------------------------------------------|
| oncogenicity     | oncogenic, likely-oncogenic, resistance, neutral, likely-neutral, inconclusive, vus, unknown |
| sensitive level  | 1, 2, 3, 3A, 3B, 4                                                                           |
| resistance level | R1, R2, R3                                                                                   |

## Scaling 

For any icon you may scale it up or down by a numerical factor. Simply set the `--scaling-factor` css variable on your HTML element. For example, to double the size of an icon, you may write:
```html
<span class="oncokb icon oncogenic" style="--scaling-factor: 2"></span>
```

### Example
When the annotation shows oncogenic, highest sensitive level is 3A, highest resistance level is R2, you should use `oncokb annotation-icon oncogenic level-3A-R2` 
When the annotation with only oncogenicity, you should use `oncokb annotation-icon oncogenic no-level`

### Icons
![OncoKB Annotation Icons](images/v4/annotation-icons.png)

## SVG images
These images are converted by using https://image.online-convert.com/convert-to-png

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