open-index/open-npm huggingface dataset:
npm package: @mmg-dev/webpipeline-gbw-shared-vars
Description: This package contains common CSS variables used by the Webpipeline team.
Latest version: 1.5.1

# Introduction
This package contains common CSS variables used by the Webpipeline team.

## Publish to npm

1. Commit
2. Update the version with `npm version patch|minor|major`
3. Push changes
4. Publish with `npm publish --access public`

## Installation

`pnpm i @mmg-dev/webpipeline-gbw-shared-vars`

## Regular (Stencil):

`@import '~@mmg-dev/webpipeline-gbw-shared-vars';`

## Vite:

`@import '@mmg-dev/webpipeline-gbw-shared-vars';`

## Stencil:

```
import { options } from '@mmg-dev/webpipeline-gbw-shared-vars';
console.log(options.res.lg);
```

## Media-Queries: (md = 768px)

```
@include breakpoint(md) { // min:md ~ max:lg
@include breakpoint-down(md) {
@include breakpoint-up(md) {
```

## Media-Queries v2 (2026, reduced breakpoints)

> **Migrating from v1?** See the full [Breakpoint V2 Migration Guide](docs/breakpoint-v2-migration.md).

Breakpoints:

- s: 0 - 767px
- m: 768 - 1439px
- l: >= 1440px

```
@include breakpoint-v2(s) { // max: 767px
@include breakpoint-v2(m) { // min: 768px ~ max: 1439px
@include breakpoint-v2(l) { // min: 1440px

@include breakpoint-up-v2(m) { // min: 768px
@include breakpoint-down-v2(m) { // max: 1439px
```

### Optional wrapper for step-by-step migration

Use a wrapper class (default: `.gbw-bp-v2`) so new components can be enabled only inside specific areas.

```
.my-component {
  @include breakpoint-v2-scope {
    // base styles
    @include breakpoint-up-v2(m) {
      // styles for >= 768px
    }
  }
}
```

Root-level alternative:

```
@include breakpoint-v2-wrap {
  .my-component {
    // styles here
  }
}
```

You can change or disable the wrapper by overriding `$bpV2Scope` before importing this package:

```
$bpV2Scope: null; // disables the wrapper
```

## SCSS Vars:

```
$bpSm: 375px;
$bpMd: 768;
$bpLg: 1024;
$bpXl: 1280;
$bpXxl: 1440;
$bpXxxl: 1920;
```

```
$bpSmDownPx:  374px
$bpMdDownPx: 767px
$bpLgDownPx:  1023px
$bpXlDownPx:  1279px
$bpXxlDownPx:  1439px
$bpXxxlDownPx:  1919px
```

## SCSS Vars v2

```
$bpV2M: 768;
$bpV2L: 1440;
$bpV2Scope: '.gbw-bp-v2';

$bpV2MDownPx: 767px
$bpV2LDownPx: 1439px
```