## 1. Project Overview & Quickstart (ionic-team/shadow-parts-guidelines)

# shadow-parts-guidelines

Open-source repository ionic-team/shadow-parts-guidelines

### Repository Details
- **Repository:** [ionic-team/shadow-parts-guidelines](https://github.com/ionic-team/shadow-parts-guidelines)
- **Primary Language:** Code

*Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.*

## 2. Official Technical Reference & Guides (ionic-team/docs)

## File: packages/theme-classic/lib/theme/README.md

# Theme folder

This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the `@theme-original` alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components).

---

## File: packages/theme-classic/src/styles/components/README.md

# Components folder

This folder is used to style components that are used globally across the site. A good way to setup a file is to include any themed variables at the top, and the override styles below that. All these partials are imported into the base styles with the sass `@use` rule.

Light themed variables can be targeted using the following selector:

```css
html[data-theme='light'] {
  --ifm-menu-color-background-active: red;
}
```

Dark themed variables can be targeted using the following selector:

```css
html[data-theme='dark'] {
  --ifm-menu-color-background-active: blue;
}
```

Global variables can be overridden at root like this:

```css
:root {
  --sidebar-spacing-horizontal: 1.5rem;
}
```

Styles can be overriden like this:

```css
#__docusaurus {
  .class-to-override {
    margin-block-start: 1rem;
  }
}
```

---

## File: packages/theme-classic/src/styles/README.md

# Styles folder

This folder houses a global style file that is brought into the theme in [docusaurus.config.js](/docusaurus.config.js). In addition, there is a components folder that is used to style theme components instead of swizzling them.

Related issue: https://github.com/facebook/docusaurus/pull/5987 Since theme styles cannot be overridden at the moment, the base #\_\_docusaurus tag is being used to +1 the specificity of selectors.

---

## File: packages/theme-classic/src/theme/README.md

# Theme folder

This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the `@theme-original` alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components).

---

## File: packages/preset-classic/README.md

# `@docusaurus/preset-classic`

Classic preset for Docusaurus.

## Usage

See [presets documentation](https://docusaurus.io/docs/using-plugins#using-presets).