open-index/open-npm huggingface dataset:
npm package: @progressiveui/icons-core
Description: Themes for un core
Latest version: 0.5.0

## icons-core

This tool generates a optimized icon library from a folder of svg files using [svgo](https://github.com/svg/svgo) and [react-svgr](https://react-svgr.com/).

### Usage with cmd

### Usage with node.js

```js
const iconGenerator = require("@progressiveui/icons-core");

iconGenerator({ src: "/folder", output: "/outputFolder" });
```

#### Structure

- index.js
- files/[name].js
- metadata.json
npm package: @progressiveui/styles
Description: Styles for the Progressive UI Design System
Author: Robert Gühne
Latest version: 11.3.1

# @progressiveui/styles

> Styles for the Bridge Design System

## Getting started

To install `@progressiveui/styles` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

```bash
npm install -S @progressiveui/styles
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add @progressiveui/styles
```

This package requires [Dart Sass](http://npmjs.com/package/sass) in order to
compile. It uses
[Sass modules](https://css-tricks.com/introducing-sass-modules/) to organize the
codebase and provide exports to use.

If you're new to Sass, or are wondering how to configure Sass for your project,
we recommend checking out the following resources and links:

- [Sass Basics](https://sass-lang.com/guide)
- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
- [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
- [Parcel with Sass](https://v2.parceljs.org/languages/sass/)
- [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors)
- [Snowpack with Sass](https://www.snowpack.dev/guides/sass/)

Once you get Sass up and running in your project, make sure to configure Sass to
include `node_modules` in its `includePaths` option. For more information,
checkout the [configuration](./docs/sass.md#configuration) section in our Sass
docs.

## Usage

You can bring in all the styles for the Carbon Design System by including
`@progressiveui/styles` in your Sass files. For example:

```scss
@use "@progressiveui/styles";
```

If you only would like to bring in specific components, you can
import them in a similar way:

```scss
@use "@progressiveui/styles/scss/reset";
@use "@progressiveui/styles/scss/components/accordion";
@use "@progressiveui/styles/scss/components/button";
@use "@progressiveui/styles/scss/components/checkbox";
```

There are various helpers that you can include, as well, such as a
CSS reset, grid, breakpoint helpers, and more. You can include these similar to
how you bring in components:

```scss
// Bring in the CSS Reset
@use "@progressiveui/styles/scss/reset";

// Bring in the CSS Grid
@use "@progressiveui/styles/scss/grid";
```

To learn more about the various helpers that `@progressiveui/styles` provides, checkout
the overview of the files available to use in our
[Sass docs](./docs/sass.md#files).

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @progressiveui/themes-core
Description: Themes for un core
Latest version: 0.5.1

## themes-core

The themes core generates design tokens by using [Style Dictionary](https://amzn.github.io/style-dictionary/#).

### Using existing theme

TODO: Add paragraph

```
import variables from @progressiveui/themes-core/scss/variables;
```

## Building a theme

### Generate Source json on your own

The source can be `json`, preferably generated from Figma using [Design Tokens](https://github.com/lukasoppermann/design-tokens).

An example can be found in `tokens/design-tokens.tokens.json`

```jsx
// Add this to your package.json to generate a theme
scripts: {
    "build:theme": "node buildTheme.js",
}
```

```jsx
// buildTheme.js configuration
const { config } = require("@progressiveui/themes-core/config.js");

/*
config() can be configured
source: defines the lookup for finding
Example can be found in tokens/design-tokens.tokens.json
*/
const source = "tokens/**/*.json";

// BuildPath: Output for the build
const buildPath = "dist";

config({ source, buildPath });
```

### Development

### `build`

Builds themes from existing raw tokens.

```bash
yarn build
```

### `build:tokens`

A shorthand command that executes `sync:tokens`, `filter:theme`, and `build`. This script does the synchronization of design tokens, filtering of theme data, and the final theme build.

```bash
yarn build:tokens
```

### `sync:tokens`

Downloads the latest `tokens.json` (Figma Tokens) from the tokens repository.

Create a `.env` with [GIT_ACCESS_TOKEN](https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate).

```bash
yarn sync:tokens
```

### `filter:theme`

TODO: Remove this once the token source is cleaned up.

Prepares raw tokens and cleans them up.

```bash
yarn filter:theme
```