### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/migration.mdx

Configures the Storybook documentation for the 'Migration Guide' page.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Migration Guide" />
```

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

### Grid HTML Example

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Provides an example of HTML structure using the grid utility classes for responsive column layouts.

```html
<div class="kd-grid">
  <div class="kd-grid__col--sm-4 kd-grid__col--md-8 kd-grid__col--lg-12">
    12 cols @ max, xl, lg, 8 cols @ md, and 4 cols @ sm
  </div>
</div>
```

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

### Utility Classes for Layout

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Layout.mdx

Shows how to import and use layout utility classes in SCSS, CSS, and JavaScript, along with an HTML example.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/layout.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/layout.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/layout.css';
```

```html
<div class="kd-layout--aspect-ratio-16x9">
  <img src="your-image" class="kd-layout--object-fit-cover" />
</div>
```

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

### Install Shidoka Foundation Package

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/README.md

Installs the Shidoka Foundation package as a dependency for your project using npm.

```bash
npm install @kyndryl-design-system/shidoka-foundation -S
```

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

### HTML Usage with Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

An example of applying typography utility classes directly in HTML for styling.

```html
<h1 className="kd-type--hero-01 kd-type--weight-light">Hero-01 Light</h1>
```

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

### Utility Classes for Spacing

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Spacing.mdx

Provides examples of how to import and use utility classes for spacing. This includes importing SCSS or CSS files and applying classes directly in HTML. The schema for column class names is also shown.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/spacing.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/spacing.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/spacing.css';
```

```html
<div class="kd-spacing--padding-right-2">Hello!</div>
```

```text
kd-spacing--${property}-${direction}-${value}
```

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

### Import Shidoka Foundation Root Stylesheet

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/README.md

Demonstrates how to import the root stylesheet of the Shidoka Foundation library into your project's global styles, with examples for SCSS, CSS, and JavaScript.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/root.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```

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

### Shidoka Foundation Elevation Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Elevation.mdx

Provides instructions for importing and using utility classes for elevation effects. It covers importing into SCSS, CSS, and JavaScript, along with an example HTML structure and a table mapping levels to class and variable names.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/elevation.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/elevation.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/elevation.css';
```

```html
<div class="kd-elevation--level-1"></div>
```

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

### Shidoka Foundation Visibility Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Visibility.mdx

Provides examples of how to import and use Shidoka Foundation's visibility utility classes in SCSS, CSS, and JavaScript. These classes offer a convenient way to manage element visibility directly in HTML.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/visibility.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/visibility.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/visibility.css';
```

```html
<div class="kd-visibility--sr-only">Screen reader only</div>
<div class="kd-visibility--hidden">Hidden all breakpoints</div>
<div class="kd-visibility--hidden-sm">Hidden Small (sm)</div>
<div class="kd-visibility--hidden-md">Hidden Medium (md)</div>
<div class="kd-visibility--hidden-lg">Hidden Large (lg)</div>
<div class="kd-visibility--hidden-xl">Hidden X-Large (xl)</div>
<div class="kd-visibility--hidden-max">Hidden Max (max)</div>
```

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

### Example SVG Import

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Assets.mdx

Demonstrates how to import an SVG asset from the Shidoka Foundation library into a JavaScript project. This import statement is typically used in conjunction with an SVG loader.

```javascript
import iconName from '@kyndryl-design-system/shidoka-foundation/assets/svg/<filename>';
```

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

### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/welcome.mdx

Configures Storybook documentation metadata, specifically setting the title for the welcome page.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Welcome" />
```

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

### Grid Utility Classes Import

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Shows how to import the grid utility classes into your project, either via SCSS, CSS, or JavaScript.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/grid.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/grid.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/grid.css';
```

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

### Storybook Configuration

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

Imports necessary components from Storybook for documentation and references Typography stories.

```javascript
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as TypographyStories from './Typography.stories.js';

<Meta of={TypographyStories} />
```

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

### Page Gutter Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Details utility classes for managing page gutters, including applying standard padding and negating it for full-bleed elements.

```string
kd-spacing--page-gutter
kd-spacing--page-gutter-negative
```

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

### SCSS Mixins for Layout

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Layout.mdx

Demonstrates the usage of SCSS mixins for applying aspect ratio and object-fit properties to elements.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/layout.scss';

.your-css-selector {
  @include layout.aspect-ratio('16:9');
}

.your-css-selector img {
  @include layout.object-fit('cover');
}
```

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

### Development Scripts

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/CONTRIBUTING.md

Common npm scripts for managing the development environment, building, linting, testing, and generating tokens. Ensure Storybook is running for tests.

```bash
npm i --legacy-peer-deps
npm run dev
npm run build
npm run lint
npm run test
npm run build:tokens
npm run format
```

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

### Branching Strategy

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/CONTRIBUTING.md

Defines the purpose of 'main' and 'beta' branches and recommends a prefixing convention for new branches (e.g., 'feature/', 'bugfix/'). Follows GitHub Flow.

```markdown
`main` branch is for stable/current version changes.
`beta` branch is for future version/prerelease/breaking changes.
Prefix your branch names based on the type of change, ex `feature/`, `bugfix/`, or `hotfix/`.
Use the [GitHub Flow](https://docs.github.com/en/get-started/quickstart/github-flow).
![image](https://i0.wp.com/build5nines.com/wp-content/uploads/2018/01/GitHub-Flow.png)
```

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

### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Assets.mdx

Configures the Storybook metadata for the Icons documentation, setting the title and the component stories to reference.

```jsx
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as AssetsStories from './Assets.stories.js';

<Meta title="Foundation/Icons" of={AssetsStories} />
```

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

### Utility Class Imports

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

Shows how to import typography utility classes into SCSS, CSS, or JavaScript.

```css
@use '@kyndryl-design-system/shidoka-foundation/scss/utility/typography.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/typography.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/typography.css';
```

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

### SCSS Mixin for Spacing

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Spacing.mdx

Demonstrates how to use the SCSS mixin to apply spacing properties like margin or padding. It requires importing the spacing mixins and then calling the `spacer` mixin with the property, direction, and value.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/spacing.scss';

.your-css-selector {
  @include spacing.spacer('margin', 'left', '48');
}
```

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

### Grid Container Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Lists utility classes for modifying the grid container's behavior, such as alignment, max-width, gap, and bleed.

```string
kd-grid--align-left
kd-grid--no-max
kd-grid--no-gap
kd-grid--compact
kd-grid--full-bleed
```

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

### Typography Weight Utility Classes

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

A table mapping font weights to their corresponding utility classes.

```html
<table>
  <thead>
    <tr>
      <th>Weight</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>200</td>
      <td>kd-type--weight-ultralight</td>
    </tr>
    <tr>
      <td>300</td>
      <td>kd-type--weight-light</td>
    </tr>
    <tr>
      <td>400</td>
      <td>kd-type--weight-regular</td>
    </tr>
    <tr>
      <td>500</td>
      <td>kd-type--weight-medium</td>
    </tr>
    <tr>
      <td>700</td>
      <td>kd-type--weight-bold</td>
    </tr>
  </tbody>
</table>
```

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

### SCSS Mixin Usage

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

Demonstrates how to use SCSS mixins for typography styles.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

.your-css-selector {
  @include typography.type-hero-01;
}
```

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

### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Color.mdx

Configures the Storybook meta information for the Color stories, linking to the Color.stories.js file.

```javascript
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as ColorStories from './Color.stories.js';

<Meta of={ColorStories} />
```

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

### Grid SCSS Mixins

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Demonstrates how to use SCSS mixins for grid layout and column definition. The `grid` mixin controls the overall grid container, while `grid-col` defines column spans.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/grid.scss';

.your-css-selector {
  @include grid.grid(
    $align-left: false,
    $no-max: false,
    $no-gap: false,
    $full-bleed: false,
    $compact: false
  );
}

.your-child-css-selector {
  @include grid.grid-col(num_cols);
}
```

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

### Grid Column Class Schema

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Grid.mdx

Defines the naming convention for grid column utility classes, indicating breakpoint and number of columns.

```string
kd-grid__col--${breakpoint}-${num_cols}
```

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

### CSS Variables for Spacing

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Spacing.mdx

Lists the CSS variables available for spacing, mapping variable names to their corresponding pixel values. These variables can be used to consistently apply spacing throughout a project.

```css
--kd-spacing-0: 0;
--kd-spacing-2: 2;
--kd-spacing-4: 4;
--kd-spacing-8: 8;
--kd-spacing-12: 12;
--kd-spacing-16: 16;
--kd-spacing-24: 24;
--kd-spacing-32: 32;
--kd-spacing-40: 40;
--kd-spacing-48: 48;
--kd-spacing-64: 64;
--kd-spacing-72: 72;
--kd-spacing-80: 80;
--kd-spacing-96: 96;
--kd-spacing-120: 120;
--kd-spacing-128: 128;
--kd-spacing-144: 144;
--kd-spacing-160: 160;
--kd-spacing-192: 192;
```

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

### Shidoka Foundation Elevation SCSS Mixin

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Elevation.mdx

Demonstrates how to use the SCSS mixin for applying elevation shadows. It requires importing the mixin and then applying it to CSS selectors with a specified level and an optional AI flag.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/elevation.scss';

.your-css-selector {
  @include elevation.shadow($level: '1', $ai: false);
}
```

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

### Typography Styles Table

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Typography.mdx

A table listing various typographic styles, their corresponding SCSS mixins, and utility classes.

```html
<table>
  <thead>
    <tr>
      <th>Style</th>
      <th>Mixin</th>
      <th>Utility Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hero-01</td>
      <td>type-hero-01</td>
      <td>kd-type--hero-01</td>
    </tr>
    <tr>
      <td>Hero-02</td>
      <td>type-hero-02</td>
      <td>kd-type--hero-02</td>
    </tr>
    <tr>
      <td>Hero-03</td>
      <td>type-hero-03</td>
      <td>kd-type--hero-03</td>
    </tr>
    <tr>
      <td>Hero-04</td>
      <td>type-hero-04</td>
      <td>kd-type--hero-04</td>
    </tr>
    <tr>
      <td>Display-01</td>
      <td>type-display-01</td>
      <td>kd-type--display-01</td>
    </tr>
    <tr>
      <td>Display-02</td>
      <td>type-display-02</td>
      <td>kd-type--display-02</td>
    </tr>
    <tr>
      <td>Display-03</td>
      <td>type-display-03</td>
      <td>kd-type--display-03</td>
    </tr>
    <tr>
      <td>Headline-01</td>
      <td>type-headline-01</td>
      <td>kd-type--headline-01</td>
    </tr>
    <tr>
      <td>Headline-02</td>
      <td>type-headline-02</td>
      <td>kd-type--headline-02</td>
    </tr>
    <tr>
      <td>Headline-03</td>
      <td>type-headline-03</td>
      <td>kd-type--headline-03</td>
    </tr>
    <tr>
      <td>Headline-04</td>
      <td>type-headline-04</td>
      <td>kd-type--headline-04</td>
    </tr>
    <tr>
      <td>Headline-05</td>
      <td>type-headline-05</td>
      <td>kd-type--headline-05</td>
    </tr>
    <tr>
      <td>Headline-06</td>
      <td>type-headline-06</td>
      <td>kd-type--headline-06</td>
    </tr>
    <tr>
      <td>Headline-07</td>
      <td>type-headline-07</td>
      <td>kd-type--headline-07</td>
    </tr>
    <tr>
      <td>Headline-08</td>
      <td>type-headline-08</td>
      <td>kd-type--headline-08</td>
    </tr>
    <tr>
      <td>Body-01</td>
      <td>type-body-01</td>
      <td>kd-type--body-01</td>
    </tr>
    <tr>
      <td>Body-02</td>
      <td>type-body-02</td>
      <td>kd-type--body-02</td>
    </tr>
    <tr>
      <td>UI-01</td>
      <td>type-ui-01</td>
      <td>kd-type--ui-01</td>
    </tr>
    <tr>
      <td>UI-02</td>
      <td>type-ui-02</td>
      <td>kd-type--ui-02</td>
    </tr>
    <tr>
      <td>UI-03</td>
      <td>type-ui-03</td>
      <td>kd-type--ui-03</td>
    </tr>
    <tr>
      <td>UI-04</td>
      <td>type-ui-04</td>
      <td>kd-type--ui-04</td>
    </tr>
    <tr>
      <td>UI-05</td>
      <td>type-ui-05</td>
      <td>kd-type--ui-05</td>
    </tr>
  </tbody>
</table>
```

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

### Code Review and Testing

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/CONTRIBUTING.md

Requirements for code review, including peer review and passing status checks. Details testing methodologies using Storybook's Test Runner for accessibility and interaction tests, and Chromatic for visual regression testing.

```markdown
Always have someone peer review your PR.
Status checks must pass.
Strongly recommend using the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to ensure consistent formatting.
We use [@storybook/test](https://storybook.js.org/docs/writing-tests) to execute a variety of automated tests.
The [Test Runner](https://storybook.js.org/docs/writing-tests/test-runner) is used to execute Accessibility and Interaction tests both locally and in CI.
[Accessibility Tests](https://storybook.js.org/docs/writing-tests/accessibility-testing)
[Visual Testing via Chromatic](https://www.chromatic.com/)
Provides visual screenshot comparison testing and a review process which integrates with our CI.
```

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

### Storybook Layout Component

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Layout.mdx

Renders the AspectRatio story from LayoutStories within a Storybook Canvas and displays its controls.

```javascript
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as LayoutStories from './Layout.stories.js';

<Meta of={LayoutStories} />

<Canvas>
  <Story of={LayoutStories.AspectRatio} />
</Canvas>

<Controls of={LayoutStories.AspectRatio} />

<Stories />
```

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

### Shidoka Foundation Visibility SCSS Mixins

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Visibility.mdx

Demonstrates the usage of SCSS mixins provided by the Shidoka Foundation for controlling element visibility. These mixins offer granular control over visibility states at various screen sizes.

```scss
@use '@kyndryl-design-system/shidoka-foundation/scss/mixins/visibility.scss';

.your-css-selector {
  @include visibility.sr-only;
  @include visibility.hidden;
  @include visibility.hidden-sm;
  @include visibility.hidden-md;
  @include visibility.hidden-lg;
  @include visibility.hidden-xl;
  @include visibility.hidden-max;
}
```

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

### Theme Meta Tags

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Color.mdx

Provides HTML meta tags for controlling the color scheme of an application, supporting automatic theme switching based on user preference or manual selection of light/dark themes.

```html
<!-- automatic theme based on user preference, recommended -->
<meta name="color-scheme" content="light dark" />
<!-- use light theme -->
<meta name="color-scheme" content="light" />
<!-- use dark theme -->
<meta name="color-scheme" content="dark" />
```

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

### CSS Color Token Usage

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/src/stories/Color.mdx

Demonstrates how to apply Shidoka Design System's semantic color tokens in CSS for styling elements, such as setting the background color.

```css
.your-css-selector {
  background-color: var(--kd-color-page-bg);
}
```

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

### Commit Message Conventions

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/CONTRIBUTING.md

Guidelines for commit messages using Conventional Commits format. Specific types like 'fix:', 'feat:', 'perf:', and 'BREAKING CHANGE:' trigger automated semantic releases.

```markdown
Commit messages MUST use [Conventional Commit format](https://www.conventionalcommits.org).
[Certain commit types](https://semantic-release.gitbook.io/semantic-release/#commit-message-format) like `fix:` (patch), `feat:` (minor), and `perf:` (major) or `BREAKING CHANGE:` (in the commit body or footer, major), will automatically trigger a release to publish a new package and update the semantic version.
[Conventional Commits Cheat Sheet](https://gist.github.com/Zekfad/f51cb06ac76e2457f11c80ed705c95a3)
Git hooks are installed to enforce commit message formatting with commitlint, and code formatting with Prettier.
```

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

### Automated Color Token Updates

Source: https://github.com/kyndryl-design-system/shidoka-foundation/blob/main/CONTRIBUTING.md

Describes the automated process for updating color tokens. Designers push changes from Figma using the Tokens Studio plugin to the 'tokens' branch. A GitHub Actions workflow triggers a custom script to generate CSS variables, creating a PR for review.

```markdown
**TL;DR:** Everything is automagically updated and a PR is created when designers push token changes from Figma.
Designers will manage all of our tokens for the Color Palette and the Light/Dark Themes within [Figma's Tokens Studio plugin](https://tokens.studio/).
Designers will push token changes directly to the `tokens` branch in GitHub using Tokens Studio.
Tokens are stored in a standardized JSON format called [W3C DTCG](https://tr.designtokens.org/format/).
Typically, a library called [Style Dictionary](https://amzn.github.io/style-dictionary/) would be used to transform the JSON into code. In this case, I wanted a special format that library does not support, CSS `light-dark()` syntax, so I wrote a custom build script.
When files in the `tokens` folder are pushed, I wrote a GitHub Actions workflow called `update-tokens` which will then kick in and automatically run the `build:tokens` script to generate the new CSS variables files, which will then be committed back to the `tokens` branch.
A PR will be automatically generated so we can review & approve before merging from the `tokens` branch to the release branch.
Use the "Update Branch" button in GitHub to pull in the latest from the release branch.
After merge, the `tokens` branch may get deleted automatically. Restore it for future use.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.