open-index/open-npm huggingface dataset:
npm package: @my-study-room/demo-package
Description: Demo package
Latest version: 0.0.6

# @my-study-room/demo-package

This packages is only for showing how packages are structured, and how themes work.

To switch theme, set the theme class on whichever parent of this component.

E.g.

```html
<div class="dark-theme">
  <DemoPackage text="Some random text" />
</div>
```
npm package: @my-study-room/fonts
Description: Fonts for MyStudyRoom
Latest version: 0.0.4

# @my-study-room/fonts

This packages includes `font-faces`, class names, and sane defaults for some Html tags.

## Font faces
- `Open Sans`
- `Open Sans Bold`
- `Open Sans Italic`
- `Open Sans Light`

## Classes
- `.msr-heading-1`
- `.msr-heading-2`
- `.msr-heading-3`
- `.msr-heading-4`
- `.msr-text`
- `.msr-text-s`
- `.msr-text-xs`

## Default styles

- `html`: `.msr-text`
- `h1`: `.msr-heading-1`
- `h2`: `.msr-heading-2`
- `h3`: `.msr-heading-3`
- `h4`: `.msr-heading-4`
- `p`: `.msr-text`
npm package: @my-study-room/less-variables
Description: Less variables for MyStudyRoom Component Library
Latest version: 0.0.5

# @my-study-room/less-variables

This package includes less variables for use in other parts of MyStudyRoom

## Media queries

Usage:
```less
  @media @media-desktop {
    // STYLING GOES HERE
  }
  @media @media-phone {
    // STYLING GOES HERE
  }
  @media @media-phone-portrait {
    // STYLING GOES HERE
  }
  @media @media-phone-landscape {
    // STYLING GOES HERE
  }
  @media @media-tablet {
    // STYLING GOES HERE
  }
```