open-index/open-npm huggingface dataset:
npm package: @material/material-color-utilities
Description: Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.
Author: Material Eng
Latest version: 0.4.0

# material-color-utilities

[![npm package](https://badgen.net/npm/v/@material/material-color-utilities)](https://npmjs.com/package/@material/material-color-utilities)

Algorithms and utilities that power the Material Design 3 (M3) color system,
including choosing theme colors from images and creating tones of colors; all in
a new color space.

See the main
[README](https://github.com/material-foundation/material-color-utilities#readme)
for more information.

## Getting started

`npm i @material/material-color-utilities` or `yarn add @material/material-color-utilities`

```typescript
import { Hct } from "@material/material-color-utilities";

// Simple demonstration of HCT.
const color = Hct.fromInt(0xff4285f4);
console.log(`Hue: ${color.hue}`);
console.log(`Chrome: ${color.chroma}`);
console.log(`Tone: ${color.tone}`);

```

### Theming

```typescript
import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities";

// Get the theme from a hex color
const theme = themeFromSourceColor(argbFromHex('#f82506'), [
  {
    name: "custom-1",
    value: argbFromHex("#ff0000"),
    blend: true,
  },
]);

// Print out the theme as JSON
console.log(JSON.stringify(theme, null, 2));

// Check if the user has dark mode turned on
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

// Apply the theme to the body by updating custom properties for material tokens
applyTheme(theme, {target: document.body, dark: systemDark});

```

## Contributing

This repo is not accepting external contributions, but feature requests and bug
reports are welcome on
[GitHub](https://github.com/material-foundation/material-color-utilities/issues).
npm package: @material/mwc-base
Description: > :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u
Latest version: 0.27.0
Deprecated: MWC beta is longer supported. Please upgrade to @material/web

# mwc-base

> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:

A suite of shared libraries and utility functions for [Material Components](https://material.io/components/) [Web Components](https://www.webcomponents.org/introduction)
npm package: @material/mwc-floating-label
Description: Material Design floating label web component
Latest version: 0.27.0
Deprecated: MWC beta is longer supported. Please upgrade to @material/web

# `mwc-floating-label` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-floating-label.svg)](https://www.npmjs.com/package/@material/mwc-floating-label)
> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

`mwc-floating-label` is a directive that is not meant to be consumed
externally. It creates and binds an `MDCFloatingLabelFoundation` to an element.
It is used in textfields and dropdown menus.

[Material Design Guidelines: textfields](https://material.io/design/components/text-fields.html)

[Material Design Guidelines: exposed dropdown menu](https://material.io/design/components/menus.html#exposed-dropdown-menu)
npm package: @material/mwc-line-ripple
Description: Material Design line ripple web component
Latest version: 0.27.0
Deprecated: MWC beta is longer supported. Please upgrade to @material/web

# `mwc-line-ripple` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-line-ripple.svg)](https://www.npmjs.com/package/@material/mwc-line-ripple)

> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

`mwc-line-ripple` is a directive that is not meant to be consumed
externally. It creates and binds an `MDCLineRippleFoundation` to an element.
It is used in textfields and dropdown menus.

[Material Design Guidelines: textfields](https://material.io/design/components/text-fields.html)

[Material Design Guidelines: exposed dropdown menu](https://material.io/design/components/menus.html#exposed-dropdown-menu)
npm package: @material/mwc-notched-outline
Description: Material Design notched outline web component
Latest version: 0.27.0
Deprecated: MWC beta is longer supported. Please upgrade to @material/web

# `<mwc-notched-outline>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-notched-outline.svg)](https://www.npmjs.com/package/@material/mwc-notched-outline)

> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

`<mwc-notched-outline>` is an element that is not meant to be consumed
externally. It is the outline element that can create a notch that is used in
outlined textfields and dropdown menus.

[Material Design Guidelines: textfields](https://material.io/design/components/text-fields.html)

[Material Design Guidelines: exposed dropdown menu](https://material.io/design/components/menus.html#exposed-dropdown-menu)

### CSS Custom Properties

| Name                                           | Default       | Description
| ---------------------------------------------- | ------------- |------------
| `--mdc-theme-primary`                          | `#6200ee`     | Color of a floating, slotted `FloatingLabel` and outline.
| `--mdc-shape-small`                            | `4px`         | Radius of the border.
| `--mdc-notched-outline-stroke-width`           | `1px`         | Outline width.
| `--mdc-notched-outline-notch-offset`           | `0`           | Padding-top to apply to notch when open to compensate for border width box size
| `--mdc-notched-outline-border-color`           | none          | Sets the border / outline color.