### Install @spectrum-css/ui-icons

Source: https://github.com/adobe/spectrum-css/blob/main/ui-icons/README.md

Install the @spectrum-css/ui-icons package as a development dependency using yarn.

```sh
yarn add -DW @spectrum-css/ui-icons
```

--------------------------------

### Render Heading Sizes Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders examples of different heading sizes using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.HeadingSizes} />
```

--------------------------------

### Install stylelint-no-unknown-custom-properties

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-unknown-custom-properties/README.md

Install the plugin as a development dependency using yarn.

```sh
yarn add -D @spectrum-tools/stylelint-no-unknown-custom-properties
```

--------------------------------

### Install Spectrum CSS Core and Components

Source: https://context7.com/adobe/spectrum-css/llms.txt

Install core tokens and common components, or individual components as needed using npm or yarn.

```bash
# Install core tokens and common components
yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button

# Or install individual components as needed
yarn add @spectrum-css/checkbox @spectrum-css/textfield @spectrum-css/modal
```

--------------------------------

### Install Postcss-property-rollup

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-property-rollup/README.md

Install the plugin using npm.

```sh
npm install postcss-property-rollup
```

--------------------------------

### Install Stylelint Plugins

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/README.md

Install the necessary Stylelint plugins as development dependencies using yarn.

```sh
yarn add -D stylelint-no-missing-var stylelint-suit-naming-pattern stylelint-use-logical
```

--------------------------------

### Render Detail Sizes Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders examples of different detail text sizes using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.DetailSizes} />
```

--------------------------------

### Install stylelint-no-unused-custom-properties

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-unused-custom-properties/README.md

Install the plugin as a development dependency using yarn.

```sh
yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties
```

--------------------------------

### Render Default Typography Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders the default typography example using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.Default} />
```

--------------------------------

### Render Heading and Body Pairing Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders examples demonstrating the hierarchy between headings and body text using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.HeadingBodyHierarchy} />
```

--------------------------------

### CSS Input for Theming Layer

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

Example CSS demonstrating different theming systems using container queries.

```css
@container style(--system: legacy) {
	.component {
		--background-color: blue;
	}
	.component.is-selected {
		--background-color: darkblue;
	}
	.component .icon {
		--color: gray;
	}
}

@container style(--system: modern) {
	.component {
		--background-color: purple;
	}
	.component.is-selected {
		--background-color: darkpurple;
	}
	.component .icon {
		--color: white;
	}
}
```

--------------------------------

### Render Code Sizes Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders examples of different code text sizes using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.CodeSizes} />
```

--------------------------------

### Install Spectrum CSS Components

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Install Spectrum CSS components and their peer dependencies using yarn. Ensure `@spectrum-css/tokens` is included as it provides essential design tokens.

```shell
yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button
```

--------------------------------

### Basic HTML Setup for Spectrum CSS

Source: https://context7.com/adobe/spectrum-css/llms.txt

Set up a basic HTML page with Spectrum CSS context classes and stylesheet imports. Ensure global tokens are included first, followed by page layout and component styles.

```html
<!DOCTYPE html>
<html class="spectrum spectrum--medium spectrum--light">
  <head>
    <!-- Include global tokens first -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css" />

    <!-- Include page layout styles -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index.css" />

    <!-- Include component styles -->
    <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css" />
    <link rel="stylesheet" href="node_modules/@spectrum-css/checkbox/dist/index.css" />
    <link rel="stylesheet" href="node_modules/@spectrum-css/textfield/dist/index.css" />
  </head>
  <body class="spectrum-Page">
    <!-- Your Spectrum CSS components go here -->
  </body>
</html>
```

--------------------------------

### Spectrum CSS Example Token Definitions

Source: https://github.com/adobe/spectrum-css/wiki/How-to:-T-shirt-sizing-in-Spectrum-CSS

Provides examples of how component-specific tokens are defined, referencing alias tokens with size variations.

```css
--spectrum-button-m-primary-height: var(--spectrum-alias-item-height-m);
--spectrum-button-l-primary-height: var(--spectrum-alias-item-height-l);
```

--------------------------------

### Install Postcss Add Theming Layer with npm

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

Add the dependency to your project using npm.

```sh
npm install postcss-add-theming-layer
```

--------------------------------

### Render Body Sizes Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders examples of different body text sizes using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.BodySizes} />
```

--------------------------------

### Install and Use PostCSS RGB Mapping

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-rgb-mapping/README.md

Install the plugin using yarn and configure PostCSS to use it for transforming CSS files.

```sh
yarn add -D @spectrum-tools/postcss-rgb-mapping
postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
```

--------------------------------

### Install Postcss Add Theming Layer with Yarn

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

Add the dependency to your project using Yarn.

```sh
yarn add -DW postcss-add-theming-layer
```

--------------------------------

### Render Internationalized Heading Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders an example of internationalized heading typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.InternationalizedHeading} />
```

--------------------------------

### Small Progress Bar Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

Demonstrates a smaller sized progress bar using the 'spectrum-ProgressBar--sizeS' class. Suitable for compact UIs.

```html
<!-- Small Progress Bar -->
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeS" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
  <div class="spectrum-ProgressBar-labelContainer">
    <span class="spectrum-ProgressBar-label">Processing</span>
    <span class="spectrum-ProgressBar-percentage">30%</span>
  </div>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill" style="width: 30%;"></div>
  </div>
</div>
```

--------------------------------

### Install stylelint-no-missing-var

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-missing-var/README.md

Add the stylelint-no-missing-var package as a development dependency using Yarn.

```sh
yarn add -D stylelint-no-missing-var
```

--------------------------------

### Configure Stylelint Plugins

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/README.md

Add the installed Stylelint plugins to your Stylelint configuration file.

```js
module.exports = {
	extends: ["stylelint-config-standard"],
	plugins: [
		"stylelint-use-logical",
		"stylelint-suit-naming-pattern",
		"stylelint-no-missing-var",
	],
};
```

--------------------------------

### Example: CSS with Multiple Custom Property Blocks

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-property-rollup/README.md

This CSS demonstrates multiple blocks of custom properties that can be combined by the plugin.

```css
.lorem {
	--spectrum-actionbutton-background-color: blue;
	--spectrum-actionbutton-border-color: transparent;
}

.ipsum {
	--spectrum-actionbutton-background-color: purple;
}
```

--------------------------------

### Render Internationalized Code Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders an example of internationalized code typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.InternationalizedCode} />
```

--------------------------------

### Render Internationalized Heading and Body Pairing Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders an example of internationalized heading and body text pairings using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.InternationalizedHeadingBodyHierarchy} />
```

--------------------------------

### Start Local Development Build

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Performs a local development build of Storybook. Use this command to preview components and test changes in an isolated environment.

```bash
yarn start
```

--------------------------------

### Render Internationalized Detail Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders an example of internationalized detail typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.InternationalizedDetail} />
```

--------------------------------

### Example: Combined Custom Properties Output

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-property-rollup/README.md

This CSS shows the result after postcss-property-rollup combines the custom properties from the input example.

```css
.ipsum {
	--spectrum-actionbutton-border-color: transparent;
	--spectrum-actionbutton-background-color: purple;
}
```

--------------------------------

### Render Internationalized Body Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders an example of internationalized body text typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.InternationalizedBody} />
```

--------------------------------

### Render Heading Variants Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders different variants of heading typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.HeadingVariants} />
```

--------------------------------

### Standard Modal Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

This snippet shows the HTML structure for a standard modal dialog with a confirmation action. It includes a wrapper, the modal itself, dialog content, and buttons for cancel and confirm actions. An underlay is also provided for the background overlay.

```html
<!-- Modal Wrapper and Standard Modal -->
<div class="spectrum-Modal-wrapper is-open">
  <div class="spectrum-Modal is-open">
    <div class="spectrum-Dialog spectrum-Dialog--medium">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Confirm Action</h1>
        <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Dialog-divider" />
        <section class="spectrum-Dialog-content">
          <p>Are you sure you want to proceed with this action? This cannot be undone.</p>
        </section>
        <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeM">
            <span class="spectrum-Button-label">Cancel</span>
          </button>
          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
            <span class="spectrum-Button-label">Confirm</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Underlay (background overlay) -->
<div class="spectrum-Underlay is-open"></div>
```

--------------------------------

### Render Detail Variants Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders different variants of detail typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.DetailVariants} />
```

--------------------------------

### Render Code Variants Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders different variants of code typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.CodeVariants} />
```

--------------------------------

### Determinate Progress Bar Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

Shows a determinate progress bar with a label, percentage, and fill. Use aria-valuenow to set the current progress.

```html
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="spectrum-ProgressBar-labelContainer">
    <span class="spectrum-ProgressBar-label">Uploading...</span>
    <span class="spectrum-ProgressBar-percentage">75%</span>
  </div>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill" style="width: 75%;"></div>
  </div>
</div>
```

--------------------------------

### Example CSS with custom properties

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-unknown-custom-properties/README.md

This CSS defines several custom properties in the :root scope and then uses some of them within a .component class. Unused variables will be reported.

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

--------------------------------

### Fullscreen Modal Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

This HTML structure demonstrates a fullscreen modal dialog. It utilizes the `spectrum-Modal--fullscreen` class to occupy the entire screen, with a close button and content area.

```html
<!-- Fullscreen Modal -->
<div class="spectrum-Modal-wrapper is-open">
  <div class="spectrum-Modal spectrum-Modal--fullscreen is-open">
    <div class="spectrum-Dialog spectrum-Dialog--fullscreen">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Full Screen Dialog</h1>
        <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Dialog-closeButton">
          <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
            <use xlink:href="#spectrum-icon-Cross100"></use>
          </svg>
        </button>
        <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Dialog-divider" />
        <section class="spectrum-Dialog-content">
          <p>This modal takes up most of the screen with 32px margins.</p>
        </section>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Indeterminate Progress Bar Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

Displays an indeterminate progress bar for operations where progress is not quantifiable. The 'spectrum-ProgressBar--indeterminate' class enables this state.

```html
<!-- Indeterminate Progress Bar -->
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--indeterminate" role="progressbar">
  <div class="spectrum-ProgressBar-labelContainer">
    <span class="spectrum-ProgressBar-label">Loading...</span>
  </div>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill"></div>
  </div>
</div>
```

--------------------------------

### Render Body Variants Example

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Renders different variants of body text typography using a Storybook Canvas.

```javascript
<Canvas of={TypographyStories.BodyVariants} />
```

--------------------------------

### Responsive Modal Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

This HTML structure defines a responsive modal that adapts to the viewport size, becoming fullscreen on smaller screens. It features a dialog heading and content area.

```html
<!-- Responsive Modal (adapts to viewport) -->
<div class="spectrum-Modal-wrapper is-open">
  <div class="spectrum-Modal spectrum-Modal--responsive is-open">
    <div class="spectrum-Dialog">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Responsive Dialog</h1>
        <section class="spectrum-Dialog-content">
          <p>This modal becomes fullscreen on small viewports.</p>
        </section>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Fullscreen Takeover Modal Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

This snippet illustrates a fullscreen takeover modal, which covers the entire viewport without any margins. It includes a close button and content section.

```html
<!-- Fullscreen Takeover Modal (no margins) -->
<div class="spectrum-Modal-wrapper is-open">
  <div class="spectrum-Modal spectrum-Modal--fullscreenTakeover is-open">
    <div class="spectrum-Dialog spectrum-Dialog--fullscreenTakeover">
      <div class="spectrum-Dialog-grid">
        <h1 class="spectrum-Dialog-heading">Fullscreen Takeover</h1>
        <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Dialog-closeButton">
          <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
            <use xlink:href="#spectrum-icon-Cross100"></use>
          </svg>
        </button>
        <section class="spectrum-Dialog-content">
          <p>This modal takes over the entire viewport with no margins.</p>
        </section>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Positive (Success) Progress Bar Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

A progress bar indicating a completed or successful operation, using the 'is-positive' class for visual feedback.

```html
<!-- Positive (success) Progress Bar -->
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM is-positive" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="spectrum-ProgressBar-labelContainer">
    <span class="spectrum-ProgressBar-label">Complete</span>
    <span class="spectrum-ProgressBar-percentage">100%</span>
  </div>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill" style="width: 100%;"></div>
  </div>
</div>
```

--------------------------------

### Side Label Progress Bar Example

Source: https://context7.com/adobe/spectrum-css/llms.txt

A progress bar variant with a label positioned to the side of the track. Includes percentage display.

```html
<!-- Side Label Progress Bar -->
<div class="spectrum-ProgressBar spectrum-ProgressBar--sizeM spectrum-ProgressBar--sideLabel" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="spectrum-ProgressBar-label">Progress</span>
  <div class="spectrum-ProgressBar-track">
    <div class="spectrum-ProgressBar-fill" style="width: 50%;"></div>
  </div>
  <span class="spectrum-ProgressBar-percentage">50%</span>
</div>
```

--------------------------------

### Build Documentation Site

Source: https://context7.com/adobe/spectrum-css/llms.txt

Generates the static assets for the Spectrum CSS documentation website.

```bash
yarn build:docs
```

--------------------------------

### Build All Project Components

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Execute this command to perform a build of all components within the project. This task is essential for generating distributable assets.

```bash
yarn build
```

--------------------------------

### Run Formatting

Source: https://context7.com/adobe/spectrum-css/llms.txt

Automatically formats the codebase according to project-defined style guidelines.

```bash
yarn format
```

--------------------------------

### Generate New Component

Source: https://context7.com/adobe/spectrum-css/llms.txt

Scaffolds a new Spectrum CSS component, setting up the necessary files and structure.

```bash
yarn new component
```

--------------------------------

### Include Spectrum CSS Tokens and Components

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Import the base set of design tokens, followed by component styles. Use index.css for components with multiple contexts or index-base.css with theme files for specific context requirements.

```css
/* Include tokens */
@import "node_modules/@spectrum-css/tokens/dist/index.css";

/*
  For components with no other contexts available, load the
  index.css file from the component's package. These are components
  that do not have a spectrum or express context available.
*/
@import "node_modules/@spectrum-css/page/dist/index.css";
@import "node_modules/@spectrum-css/typography/dist/index.css";
@import "node_modules/@spectrum-css/icon/dist/index.css";

/*
  Recommended: For components with multiple contexts available, if you
  want access to all contexts, load the index.css file, which includes
  all contexts and component variables.
*/
@import "node_modules/@spectrum-css/button/dist/index.css";

/*
  If you only need the spectrum visual context: For components with
  multiple contexts available, load only the spectrum context by sourcing
  index-base.css and the spectrum theme from the themes directory.
*/
@import "node_modules/@spectrum-css/button/dist/index-base.css";
@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css";
```

--------------------------------

### Run Postcss-property-rollup from CLI

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-property-rollup/README.md

Use the plugin on the command line to process CSS files.

```sh
postcss -u postcss-property-rollup -o dist/index.css src/index.css
```

--------------------------------

### Run Tests

Source: https://context7.com/adobe/spectrum-css/llms.txt

Executes the test suite for the Spectrum CSS library.

```bash
yarn test
```

--------------------------------

### Apply Default Light Theme

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Use the `.spectrum--light` class on the html element for the default light theme.

```html
<html class="spectrum spectrum--medium spectrum--light"></html>
```

--------------------------------

### Use Postcss Add Theming Layer via CLI

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

Apply the plugin as part of your PostCSS CLI command.

```sh
postcss -u postcss-add-theming-layer -o dist/index.css src/index.css
```

--------------------------------

### CSS with passthrough comments for a group of variables

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-unused-custom-properties/README.md

Use `/* @passthrough start */` and `/* @passthrough end */` comments to mark a block of custom properties that should not be removed.

```css
:root {
	/* @passthrough start */
	--nested-component-background-color: blue;
	--nested-component-width: 10px;
	/* @passthrough end */

	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}
```

--------------------------------

### Refresh Environment Variables

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Copies values for the project's .env file from the .env.example file. This script is useful when you need to update the .env file with new values or restore it after checking out or cleaning the repo.

```bash
yarn refresh:env
```

--------------------------------

### Release Package

Source: https://context7.com/adobe/spectrum-css/llms.txt

Initiates the release process for packages, which requires appropriate permissions.

```bash
yarn release
```

--------------------------------

### Naming Item Groups in Spectrum CSS

Source: https://github.com/adobe/spectrum-css/wiki/Class-Naming-Conventions

Use '-ItemGroup' suffix for classes that group various items, where 'Item' denotes the class of the items being grouped. Example: '.spectrum-FieldGroup'.

```css
.spectrum-FieldGroup
.spectrum-ButtonGroup
```

--------------------------------

### Import Storybook Blocks

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Imports necessary components from Storybook for documentation and previewing.

```javascript
import {
	Meta,
	Title,
	Subtitle,
	Description,
	ArgTypes,
	Canvas,
	Source,
	Story,
} from "@storybook/blocks";
import {
	ComponentDetails,
	TaggedReleases,
	PropertiesTable,
} from "@spectrum-css/preview/blocks";
```

--------------------------------

### Compare Component Changes

Source: https://context7.com/adobe/spectrum-css/llms.txt

Compares the current state of components with their versions published in the registry.

```bash
yarn compare
```

--------------------------------

### Switch to Express Theme

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Add the `.spectrum--express` class to the html element to switch to the Express theme. The `spectrum` class should always be present.

```html
<html
	class="spectrum spectrum--medium spectrum--light spectrum--express"
></html>
```

--------------------------------

### Compare Component Versions

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Compares the current version of components with previous versions published to NPM. It outputs changes and can generate a web page with visual diffs. Accepts component names as arguments; running without arguments compares all packages.

```bash
yarn compare
```

```bash
yarn compare accordion
```

```bash
yarn compare accordion actionbutton
```

--------------------------------

### Spectrum CSS Theming: Nested Context

Source: https://context7.com/adobe/spectrum-css/llms.txt

Demonstrates applying different themes within nested elements, allowing for localized theme overrides.

```html
<!-- Nested Theme Context -->
<html class="spectrum spectrum--medium spectrum--light">
  <body>
    <div class="main-content">
      <!-- Light theme components here -->
    </div>
    <div class="spectrum--dark sidebar">
      <!-- Dark theme components automatically applied -->
      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
        <span class="spectrum-Button-label">Dark Theme Button</span>
      </button>
    </div>
  </body>
</html>
```

--------------------------------

### Bundle Assets with Yarn

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Creates a bundled asset for use in demos or development environments. This command is useful for preparing assets for local testing or integration.

```bash
yarn bundle
```

--------------------------------

### Configure stylelint Plugin and Rules

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/stylelint-no-missing-var/README.md

Integrate stylelint-no-missing-var into your stylelint configuration by adding it to the plugins and rules arrays.

```js
plugins: ['stylelint-no-missing-var'],
rules: {
  "custom-rule/no-missing-var": true,
}
```

--------------------------------

### Enable Stylelint Rules

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/README.md

Configure specific Stylelint rules, including those from the Adobe Design System plugins, in your Stylelint configuration.

```json
module.exports = {
    "rules" : {
        "rule-empty-line-before": null,
        "block-no-empty": null,
        "at-rule-empty-line-before": null,
        "at-rule-no-unknown": null,
        "no-descending-specificity": null,
        "selector-class-pattern": null,
        "declaration-empty-line-before": null,
        "custom-property-empty-line-before": null,
        "comment-whitespace-inside": null,
        "comment-empty-line-before": null,
        "no-duplicate-selectors": null,
        "property-no-vendor-prefix": null,
        "max-nesting-depth": 2,
        "csstools/use-logical": true,
        "custom-rule/no-missing-var": true,
        "custom-rule/suit-naming-pattern": true,
        "custom-property-pattern": "^[a-zA-Z0-9]+(-[a-z0-9]([a-zA-Z0-9]+)?)+$",
        "alpha-value-notation": null,
        "color-function-notation": null,
        "import-notation": null,
        "no-empty-source": null,
        "property-no-unknown": true,
        "declaration-property-value-no-unknown": true,
        "value-keyword-case":null,
        "selector-not-notation":null
    }
}
```

--------------------------------

### Import Typography Stories

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Imports all stories related to typography from a local file.

```javascript
import * as TypographyStories from "./typography.stories";
```

--------------------------------

### Manage Project Constraints

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Lists changes suggested by settings in yarn.config.cjs to easily add, update, or remove properties from all package assets. Add the `fix` flag to apply suggested changes.

```bash
yarn constraints
```

```bash
yarn constraints --fix
```

--------------------------------

### Configure Postcss Add Theming Layer in Postcss Config

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

Use the plugin in your PostCSS configuration file.

```js
module.exports = {
	plugins: {
		"postcss-add-theming-layer": {},
	},
};
```

--------------------------------

### Run Linting

Source: https://context7.com/adobe/spectrum-css/llms.txt

Applies code linting rules to ensure code quality and consistency across the project.

```bash
yarn lint
```

--------------------------------

### Lint Component Package.json

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Provides updates and warnings for a component's package.json file to ensure alignment. Use `format` to automatically fix issues. Accepts component names as arguments to lint specific components.

```bash
yarn lint
```

```bash
yarn linter accordion
```

```bash
yarn linter accordion actionbutton
```

--------------------------------

### Format Component Package.json

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Provides helpful updates and warnings for a component's package.json file to keep all components in alignment. To run on a single component, use `yarn formatter accordion` (where `accordion` is the name of the component or components you want to lint).

```bash
yarn format
```

```bash
yarn formatter accordion
```

```bash
yarn formatter accordion actionbutton
```

--------------------------------

### Remap Transparent Tokens to RGB and Opacity Variables

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-rgb-mapping/README.md

Converts transparent token references into '-rgb' and '-opacity' PostCSS variables, then reconstructs the original variable using these new definitions.

```css
.spectrum--lightest {
	--spectrum-transparent-white-100-rgb: 100, 100, 100;
	--spectrum-transparent-white-100-opacity: 0.5;
	--spectrum-transparent-white-100: rgba(
		var(--spectrum-transparent-white-100-rgb),
		var(--spectrum-transparent-white-100-opacity)
	);
	/* The custom properties below is defined as another, specifically "transparent," variable. */
	--disabled-static-white-background-color: var(
		--spectrum-transparent-white-100
	);
}
```

```css
.spectrum--lightest {
	--spectrum-transparent-white-100-rgb: 100, 100, 100;
	--spectrum-transparent-white-100-opacity: 0.5;
	--spectrum-transparent-white-100: rgba(
		var(--spectrum-transparent-white-100-rgb),
		var(--spectrum-transparent-white-100-opacity)
	);
	/* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom
	variables, that correspond to the definition's transparent "-rgb" and "-opacity"
	postfixed custom variables. */
	--disabled-static-white-background-color-rgb: var(
		--spectrum-transparent-white-100-rgb
	);
	--disabled-static-white-background-color-opacity: var(
		--spectrum-transparent-white-100-opacity
	);
	/* Then reassembles the original to use and reference these newly created variables. */
	--disabled-static-white-background-color: rgba(
		var(--disabled-static-white-background-color-rgb),
		var(--disabled-static-white-background-color-opacity)
	);
}
```

--------------------------------

### Clean Project Output Files

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Use this command to remove all generated output files for the project and its components. Ensure no important generated files are present before execution.

```bash
yarn clean
```

--------------------------------

### Textfield with Help Text

Source: https://context7.com/adobe/spectrum-css/llms.txt

Textfield including help text displayed below the input. The help text provides additional guidance to the user.

```html
<!-- Textfield with Help Text -->
<div class="spectrum-Textfield spectrum-Textfield--sizeM">
  <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" for="email">Email</label>
  <input type="email" class="spectrum-Textfield-input" id="email" placeholder="name@example.com" />
  <div class="spectrum-HelpText spectrum-HelpText--sizeM">
    <span class="spectrum-HelpText-text">We'll never share your email.</span>
  </div>
</div>
```

--------------------------------

### Spectrum CSS Toast Component Variants

Source: https://context7.com/adobe/spectrum-css/llms.txt

Demonstrates the HTML structure for neutral, informative, positive, and negative toasts. Ensure correct class names are applied for desired styling and functionality.

```html
<!-- Neutral Toast -->
<div class="spectrum-Toast">
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">Your changes have been saved.</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Toast-closeButton">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
        <use xlink:href="#spectrum-icon-Cross100"></use>
      </svg>
    </button>
  </div>
</div>
```

```html
<!-- Informative Toast (blue) -->
<div class="spectrum-Toast spectrum-Toast--info">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" aria-hidden="true">
    <use xlink:href="#spectrum-icon-Info"></use>
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">A new version is available.</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Update</span>
    </button>
    <div class="spectrum-Toast-divider"></div>
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Toast-closeButton">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
        <use xlink:href="#spectrum-icon-Cross100"></use>
      </svg>
    </button>
  </div>
</div>
```

```html
<!-- Positive Toast (green) -->
<div class="spectrum-Toast spectrum-Toast--positive">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" aria-hidden="true">
    <use xlink:href="#spectrum-icon-CheckmarkCircle"></use>
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">File uploaded successfully!</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Toast-closeButton">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
        <use xlink:href="#spectrum-icon-Cross100"></use>
      </svg>
    </button>
  </div>
</div>
```

```html
<!-- Negative Toast (red) -->
<div class="spectrum-Toast spectrum-Toast--negative">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" aria-hidden="true">
    <use xlink:href="#spectrum-icon-Alert"></use>
  </svg>
  <div class="spectrum-Toast-body">
    <div class="spectrum-Toast-content">Error: Unable to connect to server.</div>
  </div>
  <div class="spectrum-Toast-buttons">
    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Retry</span>
    </button>
    <div class="spectrum-Toast-divider"></div>
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-Toast-closeButton">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-Icon--sizeM" aria-hidden="true">
        <use xlink:href="#spectrum-icon-Cross100"></use>
      </svg>
    </button>
  </div>
</div>
```

--------------------------------

### Spectrum CSS Pending/Loading Button

Source: https://context7.com/adobe/spectrum-css/llms.txt

Indicates that an action is in progress. The `is-pending` class adds a loading indicator, providing feedback to the user.

```html
<!-- Pending/Loading Button -->
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM is-pending">
  <span class="spectrum-Button-label">Saving...</span>
  <div class="spectrum-ProgressCircle spectrum-ProgressCircle--small spectrum-ProgressCircle--indeterminate">
    <div class="spectrum-ProgressCircle-track"></div>
    <div class="spectrum-ProgressCircle-fills">
      <div class="spectrum-ProgressCircle-fill"></div>
    </div>
  </div>
</button>
```

--------------------------------

### Render Component Details

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Displays detailed information about the typography component.

```javascript
<ComponentDetails of={TypographyStories} />
```

--------------------------------

### Display Tagged Releases

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Displays information about tagged releases for the component.

```javascript
<TaggedReleases />
```

--------------------------------

### Standard Checkbox - Spectrum CSS

Source: https://context7.com/adobe/spectrum-css/llms.txt

Illustrates the basic structure of a standard checkbox. Ensure the input element is correctly nested within the label and uses the appropriate Spectrum CSS classes.

```html
<!-- Standard Checkbox -->
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
  <input type="checkbox" class="spectrum-Checkbox-input" />
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-Checkbox-checkmark" aria-hidden="true">
      <use xlink:href="#spectrum-icon-Checkmark100"></use>
    </svg>
    <svg class="spectrum-Icon spectrum-Checkbox-partialCheckmark" aria-hidden="true">
      <use xlink:href="#spectrum-icon-Dash100"></use>
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Enable notifications</span>
</label>
```

--------------------------------

### Spectrum CSS Theming: Default

Source: https://context7.com/adobe/spectrum-css/llms.txt

Applies the default Spectrum 2 design language with a medium scale and light theme.

```html
<!-- Default: Spectrum 2, Medium Scale, Light Theme -->
<html class="spectrum spectrum--medium spectrum--light">
  <!-- Components render with Spectrum 2 design language -->
</html>
```

--------------------------------

### Standard Textfield with Label

Source: https://context7.com/adobe/spectrum-css/llms.txt

A basic textfield with a label. Ensure the label's 'for' attribute matches the input's 'id'.

```html
<!-- Standard Textfield with Label -->
<div class="spectrum-Textfield spectrum-Textfield--sizeM">
  <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM" for="name">Name</label>
  <input type="text" class="spectrum-Textfield-input" id="name" placeholder="Enter your name" />
</div>
```

--------------------------------

### Set Language and Direction (Arabic)

Source: https://github.com/adobe/spectrum-css/blob/main/README.md

Specify the `lang` and `dir` attributes for Arabic, a right-to-left language.

```html
<html lang="ar" dir="rtl"></html>
```

--------------------------------

### Naming Collections and Items in Spectrum CSS

Source: https://github.com/adobe/spectrum-css/wiki/Class-Naming-Conventions

Name collections based on UI patterns (e.g., '.spectrum-Tabs', '.spectrum-Menu'). Items within collections should use the pattern 'CollectionName-item' (e.g., '.spectrum-Tabs-item').

```css
.spectrum-Tabs
.spectrum-Menu
.spectrum-MillerColumns
.spectrum-Tabs-item
.spectrum-Menu-item
.spectrum-MillerColumns-item
```

--------------------------------

### CSS Output after Applying Theming Layer

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-add-theming-layer/README.md

The transformed CSS output after the postcss-add-theming-layer plugin has been applied, showing the new theming layer selectors and variable mappings.

```css
.legacy {
	--system-component-background-color: blue;
	--system-component-selected-background-color: darkblue;
}

.modern {
	--system-component-background-color: purple;
	--system-component-selected-background-color: darkpurple;
}

.component {
	--background-color: var(--system-component-background-color);
}

.component.is-selected {
	--background-color: var(--system-component-selected-background-color);
}
```

--------------------------------

### Load Icon Sprite via Fetch API

Source: https://context7.com/adobe/spectrum-css/llms.txt

Dynamically load the icon sprite using the Fetch API. This method allows for loading the sprite after the initial page load.

```javascript
fetch('node_modules/@spectrum-css/ui-icons/dist/spectrum-css-icons.svg')
  .then(response => response.text())
  .then(svg => {
    const div = document.createElement('div');
    div.innerHTML = svg;
    div.style.display = 'none';
    document.body.insertBefore(div, document.body.firstChild);
  });
```

--------------------------------

### CSS Fallback Chain for Overrides

Source: https://github.com/adobe/spectrum-css/wiki/Ongoing-updates-and-refactoring

This CSS demonstrates how to establish a fallback chain for custom properties, allowing for WHCM and general customizations with a default Spectrum value as the final fallback. The '--mod' prefix indicates a modification.

```css
background: var(--highcontrast-background-color, var(--mod-background-color, var(--spectrum-background-color)));
```

--------------------------------

### Configure Storybook Meta

Source: https://github.com/adobe/spectrum-css/blob/main/components/typography/stories/typography.mdx

Configures the Storybook meta information for the typography stories, setting the title for the documentation.

```javascript
<Meta of={TypographyStories} title="Docs" />
```

--------------------------------

### Configure Postcss-property-rollup in PostCSS Config

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-property-rollup/README.md

Integrate the plugin into your PostCSS configuration file.

```js
module.exports = {
	plugins: {
		"postcss-property-rollup": {},
	},
};
```

--------------------------------

### Checked Checkbox - Spectrum CSS

Source: https://context7.com/adobe/spectrum-css/llms.txt

Shows how to render a checkbox in its checked state. The `checked` attribute should be added to the input element.

```html
<!-- Checked Checkbox -->
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
  <input type="checkbox" class="spectrum-Checkbox-input" checked />
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-Checkbox-checkmark" aria-hidden="true">
      <use xlink:href="#spectrum-icon-Checkmark100"></use>
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">I agree to the terms</span>
</label>
```

--------------------------------

### Remap RGB and Opacity Variables

Source: https://github.com/adobe/spectrum-css/blob/main/plugins/postcss-rgb-mapping/README.md

Transforms RGBA values into separate '-rgb' and '-opacity' PostCSS variables, then redefines the original variable to use these new ones.

```css
.spectrum--lightest {
	--spectrum-seafoam-100: rgba(206, 247, 243);
	--spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
}
```

```css
.spectrum--lightest {
	/* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate
	"-rgb" and "-opacity" values when applicable. */
	--spectrum-seafoam-100-rgb: 206, 247, 243;
	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
	--spectrum-seafoam-200-rgb: 170, 241, 234;
	--spectrum-seafoam-200-opacity: 0.5;
	/* The plugin then redefines the original custom variable to use the newly created
	"-rgb" and/or "-opacity" custom variables. */
	--spectrum-seafoam-200: rgba(
		var(--spectrum-seafoam-200-rgb),
		var(--spectrum-seafoam-200-opacity)
	);
}
```