# @nuskin/ns-core-styles

> Shared styles and style modules

Latest version **2.12.2** (published 2026-02-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nuskin/ns-core-styles
pnpm add @nuskin/ns-core-styles
yarn add @nuskin/ns-core-styles
bun add @nuskin/ns-core-styles
```

## Health

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

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 2.12.2 |
| Published | 2026-02-19 |
| First published | 2019-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 159.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nkranendonk, emoore, nuskin-cws, klau, rellenberger, akshay263, nishalk, aallani |

## Links

- npm: https://www.npmjs.com/package/@nuskin/ns-core-styles
- Repository: https://git@code.tls.nuskin.io/ns-am/ux/core-styles
- npm.io page: https://npm.io/package/@nuskin/ns-core-styles

## Dependencies (1)

- [conventional-changelog-eslint](https://npm.io/package/conventional-changelog-eslint.md) 5.0.0

## Recent versions

- 2.12.2 (latest) — 2026-02-19
- 2.12.2-it-8958.5 (prerelease) — 2026-02-12
- 2.12.2-it-8958.4 — 2026-02-11
- 2.12.2-it-8958.3 — 2026-02-03
- 2.12.2-it-8958.2 — 2025-12-22
- 2.12.2-it-8958.1 — 2025-12-18
- 2.12.2-it-1871.7 — 2025-12-15
- 2.12.2-it-1871.6 — 2025-12-02
- 2.12.2-it-1871.5 — 2025-11-21
- 2.12.2-1871-new.2 — 2025-11-10
- 2.12.2-1871-new.1 — 2025-11-10
- 2.12.2-it-1871.4 — 2025-11-06
- 2.12.2-it-1871.3 — 2025-11-05
- 2.12.2-it-1871.2 — 2025-11-05
- 2.12.2-it-1871.1 — 2025-11-04
- … 84 more at https://npm.io/package/@nuskin/ns-core-styles/versions

## README

# core-styles

> Core Styles Library for import into a .scss file or Vue component where scss is being used.

Core Styles uses the latest [sass-lang](https://sass-lang.com/documentation) api. You can either import the main.scss file or just the parts you want.

## Build Setup

```bash
# install depedencies
$ yarn

# generate unminified CSS
$ yarn build

# generate minified css
$ yarn build-min
```

## File Structure
```
/src
    /dist
        main.css
        main.css.map
    /scss
        _buttons.scss
        _colorClasses.scss
        _colors.scss
        _commonAppStyles.scss
        _commonTransitionStyles.scss
        _forms.scss
        _global.mixins.scss
        _globalVariables.scss
        _gridStyles.scss
        _other.scss
        _typography.scss
        _typographyVariables.scss
        _vuetifyOverrides.scss
        main.scss
```

You have the option to import either the whole minified main.css or the main.scss if you want to get load the whole library. To include the main.scss, you can pull it into your .scss file like this:

```css
@use '~@nuskin/ns-core-styles/src/main';
```

### *Please note that as of today, Jan 10, 2020 node-sass does not support '@use' and will fail. Instead you will need to add 'sass' and 'sass-loader' as depedencies.*

Further documentation for core-styles can be found in [Nu Skin's Storybook](https://www.nuskin.com/static/design-components) under Style Docs/Core Styles. There documentation exists for:

* [Buttons](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--buttons) and [notes of use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--buttons).
* [Colors](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--colors) and [notes of use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--colors)
* [CSS Custom Properties (aka CSS Variables)](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--css-variables) and [notes on use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--css-variables)
* [Global Mixins](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--global-mixins) and [notes on use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--global-mixins)
* [Grid Layouts](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--grid-layouts) and [notes on use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--grid-layouts)
* [Typography](https://www.nuskin.com/static/design-components/?path=/story/style-docs-core-styles--typography) and [notes on use](https://www.nuskin.com/static/design-components/?path=/info/style-docs-core-styles--typography)

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