open-index/open-npm huggingface dataset:
npm package: @hig/theme-context
Description: ThemeContext components to ease adoption of theme data from React components
Author: Autodesk Inc.
Latest version: 4.3.0

# ThemeContext component

Themable HIG components within a `ThemeContext.Provider` will have access to the provided theme.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Getting started](#getting-started)
- [Provide a theme to components](#provide-a-theme-to-components)
- [Consume theme values in a component](#consume-theme-values-in-a-component)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Getting started

```bash
yarn add @hig/theme-context @hig/theme-data
```

## Provide a theme to components

```jsx
import HIGDarkBlueTheme from '@hig/theme-data/build/esm/darkBlueMediumDensityTheme';
import ThemeContext from '@hig/theme-context';

function MyApp() {
  <ThemeContext.Provider value={HIGDarkBlueTheme}>
    <TheRestOfMyApp />
  </ThemeContext.Provider>
}
```

For information on customizing a theme or importing theme data in different formats, see the [theme-data README](../packages/theme-data/README.md).

## Consume theme values in a component
```jsx
import ThemeContext from '@hig/theme-context';

function MyThemedComponent() {
  <ThemeContext.Consumer>{({ resolvedRoles, metadata }) => (
    <div style={{
      backgroundColor: resolvedRoles["colorScheme.surface.level200"],
      borderRadius: resolvedRoles["basics.borderRadii.small"],
      color: resolvedRoles["colorScheme.text.default"],
      padding: resolvedRoles["density.spacings.medium"],
    }}>
      The current theme is "${metadata.name}".
    </div>
  )}</ThemeContext.Consumer>
}
```
npm package: @hig/themes-poc
Description: ThemeContext components to ease adoption of theme data from React components
Author: Autodesk Inc.
Latest version: 1.0.0-alpha
Deprecated: This package is deprecated. Used @hig/theme-context instead.

# ThemeContext component

Themable HIG components within a `ThemeContext.Provider` will have access to the provided theme.

## Getting started

```bash
yarn add @hig/themes
```

## Provide a theme to components
```jsx
import HIGDarkBlueTheme from '@hig/theme-data-poc/build/darkBlueMediumDensity/theme.json';
import ThemeContext from '@hig/theme-context';

function MyApp() {
  <ThemeContext.Provider value={HIGDarkBlueTheme}>
    <TheRestOfMyApp />
  </ThemeContext.Provider>
}
```

## Consume theme values in a component
```jsx
import ThemeContext from '@hig/themes';

function MyThemedComponent() {
  <ThemeContext.Consumer>{({ resolvedRoles, name }) => (
    <div style={{
      backgroundColor: resolvedRoles["colorScheme.surfaceLevel20Color"],
      borderRadius: resolvedRoles["basics.borderRadii.small"],
      color: resolvedRoles["colorScheme.textColor"],
      padding: resolvedRoles["density.spacings.medium"],
    }}>
      The current theme is "{name}".
    </div>
  )}</ThemeContext.Consumer>
}
```
npm package: @hig/thumbnail
Description: Weave Thumbnail component
Author: Autodesk Inc.
Latest version: 1.0.0

# Thumbnail

Thumbnails are used as visual anchors and identifiers for objects.

## Getting started

```
yarn add @hig/thumbnail @hig/theme-context @hig/theme-data
```

## Import the component

```
import Thumbnail from '@hig/thumbnail';
```

## Basic usage

```jsx
<Thumbnail alt="Weave Logo" src="https://d95xa459ljwvg.cloudfront.net/theme/weave-logo.svg" />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Spacer also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Thumbnail from '@hig/thumbnail';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    thumbnail: {
      ...styles.thumbnail,
      wrapper: {
        ...styles.thumbnail.wrapper,
        color: themeData["colorScheme.status.error"],
      },
      border: {
        ...styles.thumbnail.border,
        color: themeData["colorScheme.status.error"],
      },
      image: {
        ...styles.thumbnail.image,
        color: themeData["colorScheme.status.error"],
      },
    },
  });

  return (
    <Thumbnail stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/tile
Description: Weave Tile component
Author: Autodesk Inc.
Latest version: 1.1.0

# Tile

The Tile component renders a themable container that display information related to a single subject or destination

## Getting started

```
yarn add @hig/tile @hig/theme-context @hig/theme-data
```

## Import the component

```
import Tile from '@hig/tile';
```

## Basic usage

```jsx
<Tile {...RequiredProps} />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Surface also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Tile from '@hig/tile';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    higTileContainer: {
      ...styles.higTileContainer,
      color: themeData["colorScheme.status.error"],
    },
    higMediaContainer: {
      ...styles.higMediaContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileContentContainer: {
      ...styles.higTileContentContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileTitleContainer: {
      ...styles.higTileTitleContainer,
      color: themeData["colorScheme.status.error"],
    },
    higTileTitle: {
      ...styles.higTileTitle,
      color: themeData["colorScheme.status.error"],
    },
    higTileSubTitle: {
      ...styles.higTileSubTitle,
      color: themeData["colorScheme.status.error"],
    },
  });

  return (
    <Tile stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/timestamp
Description: HIG Timestamp
Author: Autodesk Inc.
Latest version: 2.3.0

# Timestamp

The timestamp component presents a date in the past with humanized phrasing in English: "10 minutes/hours/days/months ago".

## Getting started

```
yarn add @hig/timestamp @hig/theme-context @hig/theme-data
```

## Import the component

```
import Timestamp from '@hig/timestamp';
```

## Basic usage

```jsx
<Timestamp timestamp="2018-05-05T12:00:00.000Z" />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Timestamp also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Timestamp from '@hig/timestamp';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    timestamp: {
      ...styles.timestamp,
      color: themeData["colorScheme.errorColor"]
    }
  });

  return (
    <Timestamp stylesheet={customStylesheet} timestamp="2018-05-05T12:00:00.000Z" />
  );
}
```
npm package: @hig/toggle
Description: HIG Toggle
Author: Autodesk Inc.
Latest version: 2.2.0

# Toggle

Toggle switches provide a control for a single action with a clear on/off or start/stop.

Read more about when and how to use the Toggle component [on the website](https://hig.autodesk.com/web/components/toggle-switches).

## Getting started

### Install the package

```bash
yarn add @hig/toggle @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Toggle from '@hig/toggle';
```

## Basic usage

```jsx
<Toggle />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Toggle also has a `stylesheet` prop that accepts a function wherein you can modify Toggle's styles. Default styles, props, and theme-data are passed as arguments. For instance

```js

function customStylesheet(styles) {
  return {
    ...styles,
    toggleWrapper: {
      ...styles.toggleWrapper,
      borderColor: "blue"
    }
  };
}
<Toggle stylsheet={customStylesheet} />
```
npm package: @hig/tooltip
Description: HIG Tooltip
Author: Autodesk Inc.
Latest version: 2.3.0

# Tooltip

Tooltips generally describe what a tool or feature does, or when or how to use it.

Read more about when and how to use the Tooltip component [on the internal wiki](https://hig.autodesk.com/web/components/tooltips).

## Getting started

### Install the package

```bash
yarn add @hig/tooltip @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Tooltip from '@hig/tooltip';
```

## Basic usage

```jsx
<Tooltip anchorPoint="top-center" content="Testing tooltip">
  <Button title="Open Tooltip" />
</Tooltip>
```
## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Toolt also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Tooltip from '@hig/tooltip';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    content: {
      ...styles.content,
      color: themeData["colorScheme.status.error"]
    },
    panel: {
      ...styles.panel,
      opacity: 1
    },
    panelInner: {
      ...styles.panelInner,
      padding: `4px`
    },
    textContent: {
      ...styles.textContent,
      position: `static`
    }
  });

  return (
    <Tooltip stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/top-nav
Description: HIG Top Navigation
Author: Autodesk Inc.
Latest version: 5.0.1

# TopNav <sup><sub>(Top Navigation)</sub></sup>

The primary navigation across the top of the screen. This piece contains the product name/icon, search bar, project/account switcher, and avatar/profile-flyout.

## Getting started

### Installation

```bash
yarn add @hig/top-nav @weave-design/theme-context @weave-design/theme-data
```
### Import

Import the component:

```bash
import TopNav from '@hig/top-nav';
```

## Basic usage

```jsx
<TopNav logo={<Logo />} />
```

You can set right interactions as follows using the predefined actions ProfileAction, HelpAction and NotificationsAction:
```jsx
<TopNav
  logo={<Logo />}
  rightActions={
    <Interactions>
      <NotificationsAction />
      <HelpAction />
      <ProfileAction />
    </Interactions>
  }
/>
```

You can create a custom action by using the NavAction component and adding it to a right interaction, be sure to set the title and icon (the default is the list icon):
```jsx
<TopNav
  logo={<Logo />}
  rightActions={
    <Interactions>
      <NavAction title="Custom Nav Action" icon={<Icon/>}>
        <div>Your Content here</div>
      </NavAction>
    </Interactions>
  }
/>
```

### Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

TopNav also has a `stylesheet` prop that accepts a function wherein you can modify its styles. The original styles, props, current theme data and theme meta will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. Check the `props` table to see which components can take a `stylesheet` function.
npm package: @hig/typography
Description: HIG Typography components
Author: Autodesk Inc.
Latest version: 2.2.0

# Typography

The Typography components apply the Artifakt typeface to text.

Read more about when and how to use the Typography components [on the HIG website](https://hig.autodesk.com/web/basics/typography).

## Getting started

```
yarn add @hig/typography @hig/theme-context @hig/theme-data
yarn add @hig/fonts
```

## Import the component and CSS

```
import Typography from '@hig/typography';
import "@hig/fonts/build/ArtifaktElement.css";
```

## Basic usage

```jsx
<Typography>Artifakt Element is the preferred font.</Typography>
```
## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Typography also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Typography from '@hig/typography';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    typography: {
      ...styles.typography,
      color: themeData["colorScheme.errorColor"]
    }
  });

  return (
    <Typography stylesheet={customStylesheet} />
  );
}
```