Showing preview only (927K chars total). Download the full file or copy to clipboard to get everything.
Repository: primer/css
Branch: main
Commit: 358707b2b70f
Files: 277
Total size: 858.4 KB
Directory structure:
gitextract_l4nf6gy6/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── primer-bug-report.md
│ │ ├── primer-feature-request.md
│ │ └── style-guide-bug-report.md
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ ├── release_template.md
│ └── workflows/
│ ├── axe.yml
│ ├── ci.yml
│ ├── codeql.yml
│ ├── deploy_preview.yml
│ ├── deploy_production.yml
│ ├── release.yml
│ ├── release_tracking.yml
│ ├── stale.yml
│ └── welcome.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .vercelignore
├── .vscode/
│ └── story-template.code-snippets
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── DEVELOP.md
├── LICENSE
├── README.md
├── RELEASING.md
├── __tests__/
│ ├── .eslintrc.json
│ ├── build.test.js
│ ├── css.test.js
│ ├── docs.test.js
│ └── utils/
│ ├── css.js
│ └── docs.js
├── deprecations.js
├── docs/
│ ├── .babelrc
│ ├── .eslintrc.json
│ ├── .storybook/
│ │ ├── main.js
│ │ ├── manager.js
│ │ ├── preview-head.html
│ │ ├── preview.css
│ │ ├── preview.js
│ │ ├── storybook.css
│ │ └── theme.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── script/
│ │ └── build-storybook
│ └── stories/
│ ├── Contributing.mdx
│ ├── GettingStarted.mdx
│ ├── Introduction.mdx
│ ├── components/
│ │ └── Layout/
│ │ ├── AppFrame.stories.jsx
│ │ ├── LayoutAlpha.stories.jsx
│ │ ├── LayoutBeta.stories.jsx
│ │ ├── PageLayout.stories.jsx
│ │ ├── SplitPageLayout.stories.jsx
│ │ ├── Stack.stories.jsx
│ │ ├── StackExamples.stories.jsx
│ │ └── StackFeatures.stories.jsx
│ ├── deprecated-components/
│ │ ├── BoxOverlay/
│ │ │ ├── BoxOverlay.mdx
│ │ │ └── BoxOverlay.stories.tsx
│ │ ├── BranchName/
│ │ │ ├── BranchName.mdx
│ │ │ └── BranchName.stories.tsx
│ │ ├── Button/
│ │ │ ├── Button.mdx
│ │ │ └── Button.stories.tsx
│ │ ├── FilterList/
│ │ │ ├── FilterList.mdx
│ │ │ └── FilterList.stories.tsx
│ │ ├── Forms/
│ │ │ ├── Forms.mdx
│ │ │ └── Forms.stories.tsx
│ │ ├── Header/
│ │ │ ├── Header.mdx
│ │ │ └── Header.stories.tsx
│ │ ├── IssueLabel/
│ │ │ ├── IssueLabel.mdx
│ │ │ └── IssueLabel.stories.tsx
│ │ ├── Loaders/
│ │ │ ├── Loaders.mdx
│ │ │ └── Loaders.stories.tsx
│ │ ├── Markdown/
│ │ │ └── Markdown.stories.tsx
│ │ ├── Marketing/
│ │ │ ├── Marketing.mdx
│ │ │ └── Marketing.stories.tsx
│ │ ├── Pagination/
│ │ │ ├── Pagination.mdx
│ │ │ └── Pagination.stories.tsx
│ │ ├── SelectMenu/
│ │ │ ├── SelectMenu.mdx
│ │ │ └── SelectMenu.stories.tsx
│ │ ├── SideNav/
│ │ │ ├── SideNav.mdx
│ │ │ └── SideNav.stories.tsx
│ │ ├── SubNav/
│ │ │ ├── SubNav.mdx
│ │ │ └── SubNav.stories.tsx
│ │ ├── Toast/
│ │ │ ├── Toast.mdx
│ │ │ └── Toast.stories.tsx
│ │ └── Tooltip/
│ │ ├── Tooltip.mdx
│ │ └── Tooltip.stories.tsx
│ ├── helpers/
│ │ └── pageLayoutBehavior.jsx
│ ├── principles/
│ │ ├── Accessibility.mdx
│ │ ├── HTML.mdx
│ │ ├── Principles.mdx
│ │ └── SCSS.mdx
│ ├── support/
│ │ ├── Breakpoints.mdx
│ │ ├── Deprecations.mdx
│ │ ├── Linting.mdx
│ │ ├── Prototyping.mdx
│ │ ├── Spacing.mdx
│ │ ├── Theming.mdx
│ │ └── Typography.mdx
│ └── utilities/
│ ├── Animation.stories.jsx
│ ├── Border.stories.jsx
│ ├── Color.stories.jsx
│ ├── Details.stories.jsx
│ ├── Flexbox.stories.jsx
│ ├── Grid.stories.jsx
│ ├── Layout.stories.jsx
│ ├── Margin.stories.jsx
│ ├── MarketingFilters.mdx
│ ├── MarketingFilters.stories.jsx
│ ├── MarketingLayout.mdx
│ ├── MarketingLayout.stories.jsx
│ ├── MarketingTypography.mdx
│ ├── MarketingTypography.stories.jsx
│ ├── Padding.stories.jsx
│ ├── Shadow.stories.jsx
│ └── Typography.stories.jsx
├── eslint.config.cjs
├── migrations/
│ ├── v16.md
│ └── v18.md
├── package.json
├── postcss.config.cjs
├── prettier.config.cjs
├── script/
│ ├── .eslintrc.json
│ ├── analyze-variables.js
│ ├── axe-docs
│ ├── build-css.js
│ ├── build-docs
│ ├── bundle-size-report.js
│ ├── check-for-changeset
│ ├── dist.js
│ ├── prepublish
│ ├── pretest
│ ├── primer-css-compiler.js
│ ├── selector-diff-report
│ ├── stylelint-add-disables.js
│ └── stylelint-remove-disables.js
├── src/
│ ├── autocomplete/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── suggester.scss
│ ├── avatars/
│ │ ├── README.md
│ │ ├── avatar-parent-child.scss
│ │ ├── circle-badge.scss
│ │ └── index.scss
│ ├── base/
│ │ ├── README.md
│ │ ├── base.scss
│ │ ├── index.scss
│ │ ├── kbd.scss
│ │ ├── native-colors.scss
│ │ ├── normalize.scss
│ │ ├── octicons.scss
│ │ └── typography-base.scss
│ ├── box/
│ │ ├── README.md
│ │ ├── box-overlay.scss
│ │ └── index.scss
│ ├── branch-name/
│ │ ├── README.md
│ │ ├── branch-name.scss
│ │ └── index.scss
│ ├── buttons/
│ │ ├── README.md
│ │ ├── button-group.scss
│ │ ├── button.scss
│ │ ├── index.scss
│ │ └── misc.scss
│ ├── color-modes/
│ │ ├── index.scss
│ │ └── themes/
│ │ ├── dark.scss
│ │ ├── dark_colorblind.scss
│ │ ├── dark_dimmed.scss
│ │ ├── dark_high_contrast.scss
│ │ ├── dark_tritanopia.scss
│ │ ├── light.scss
│ │ ├── light_colorblind.scss
│ │ ├── light_high_contrast.scss
│ │ └── light_tritanopia.scss
│ ├── core/
│ │ ├── README.md
│ │ └── index.scss
│ ├── deprecations.json
│ ├── docs.scss
│ ├── forms/
│ │ ├── README.md
│ │ ├── form-control.scss
│ │ ├── form-group.scss
│ │ ├── form-select.scss
│ │ ├── index.scss
│ │ ├── input-group.scss
│ │ └── radio-group.scss
│ ├── header/
│ │ ├── README.md
│ │ ├── header.scss
│ │ └── index.scss
│ ├── index.scss
│ ├── labels/
│ │ ├── README.md
│ │ ├── index.scss
│ │ ├── issue-labels.scss
│ │ └── mixins.scss
│ ├── layout/
│ │ ├── README.md
│ │ ├── app-frame.scss
│ │ ├── container.scss
│ │ ├── grid-offset.scss
│ │ ├── grid.scss
│ │ ├── index.scss
│ │ ├── page-layout.scss
│ │ └── stack.scss
│ ├── loaders/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── loaders.scss
│ ├── markdown/
│ │ ├── README.md
│ │ ├── blob-csv.scss
│ │ ├── code.scss
│ │ ├── footnotes.scss
│ │ ├── headings.scss
│ │ ├── images.scss
│ │ ├── index.scss
│ │ ├── lists.scss
│ │ ├── markdown-body.scss
│ │ └── tables.scss
│ ├── marketing/
│ │ ├── README.md
│ │ ├── buttons/
│ │ │ ├── button.scss
│ │ │ └── index.scss
│ │ ├── index.scss
│ │ ├── links/
│ │ │ ├── index.scss
│ │ │ └── link.scss
│ │ ├── support/
│ │ │ ├── index.scss
│ │ │ └── variables.scss
│ │ ├── type/
│ │ │ ├── index.scss
│ │ │ └── typography.scss
│ │ └── utilities/
│ │ ├── animations.scss
│ │ ├── borders.scss
│ │ ├── filters.scss
│ │ ├── index.scss
│ │ └── layout.scss
│ ├── navigation/
│ │ ├── README.md
│ │ ├── filter-list.scss
│ │ ├── index.scss
│ │ ├── sidenav.scss
│ │ └── subnav.scss
│ ├── pagination/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── pagination.scss
│ ├── primitives/
│ │ ├── index.scss
│ │ └── temp-typography-tokens.scss
│ ├── product/
│ │ ├── README.md
│ │ └── index.scss
│ ├── select-menu/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── select-menu.scss
│ ├── support/
│ │ ├── README.md
│ │ ├── index.scss
│ │ ├── mixins/
│ │ │ ├── color-modes.scss
│ │ │ ├── layout.scss
│ │ │ ├── misc.scss
│ │ │ └── typography.scss
│ │ └── variables/
│ │ ├── layout.scss
│ │ ├── misc.scss
│ │ └── typography.scss
│ ├── table-object/
│ │ ├── index.scss
│ │ └── table-object.scss
│ ├── toasts/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── toasts.scss
│ ├── tooltips/
│ │ ├── README.md
│ │ ├── index.scss
│ │ └── tooltips.scss
│ └── utilities/
│ ├── README.md
│ ├── animations.scss
│ ├── borders.scss
│ ├── box-shadow.scss
│ ├── colors.scss
│ ├── details.scss
│ ├── flexbox.scss
│ ├── index.scss
│ ├── layout.scss
│ ├── margin.scss
│ ├── padding.scss
│ ├── typography.scss
│ └── visibility-display.scss
└── stylelint.config.cjs
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
"changelog": ["@changesets/changelog-github", {"repo": "primer/css"}],
"commit": false,
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
}
================================================
FILE: .github/CODEOWNERS
================================================
* @primer/design-reviewers @primer/engineer-reviewers
package.json @primer/design-reviewers @primer/engineer-reviewers
package-lock.json @primer/design-reviewers @primer/engineer-reviewers
================================================
FILE: .github/ISSUE_TEMPLATE/primer-bug-report.md
================================================
---
name: Primer CSS bug report
about: Create a report to help us improve Primer CSS
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/primer-feature-request.md
================================================
---
name: Primer CSS feature request
about: Suggest an idea for this project
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/ISSUE_TEMPLATE/style-guide-bug-report.md
================================================
---
name: Style guide bug report
about: Create a report to help us improve
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/dependabot.yml
================================================
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
# Maintain dependencies for GitHub Actions
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "daily"
groups:
all:
patterns:
- "*"
# Maintain dependencies for npm
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "daily"
groups:
all:
patterns:
- "*"
================================================
FILE: .github/pull_request_template.md
================================================
### What are you trying to accomplish?
<!-- Please provide a short description of the changes and link to any related issues. Include screenshots or videos for visual changes. -->
### What approach did you choose and why?
<!-- Here you can explain your approach and reasoning in more detail. -->
### What should reviewers focus on?
<!-- Let reviewers know if there is anything that needs special attention. You can also describe any alternatives that you explored. -->
### Can these changes ship as is?
<!-- Please add a ⚠️ note here if this PR depends on additional changes. For example an update from Primer Primitives. Or additional changes when shipping to "dotcom". This will make sure we don't forget to include them. -->
- [ ] Yes, this PR does not depend on additional changes. 🚢
================================================
FILE: .github/release_template.md
================================================
Preparing for a release.
### Checklist
Make sure these items are checked before merging.
- [ ] Preview the docs change.
- [ ] Preview npm release candidate.
- [ ] CI passes on the release PR.
<!-- diff_report --><!-- /diff_report -->
<!-- bundle_table --><!-- /bundle_table -->
================================================
FILE: .github/workflows/axe.yml
================================================
name: axe
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
axe:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
with:
fetch-depth: 0
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
with:
files: |
docs/content/components/**/*.md
docs/content/utilities/**/*.md
files_ignore: |
docs/content/components/index.md
docs/content/utilities/index.md
- name: Save changed files
run: |
echo "STRING_OF_PATHS_WE_CARE_ABOUT=${{ steps.changed-files.outputs.all_changed_files }}" >> $GITHUB_ENV
- name: Use Node.js
if: steps.changed-files.outputs.any_changed == 'true'
uses: actions/setup-node@v6
with:
node-version: 20
cache: 'npm'
- run: npm ci
if: steps.changed-files.outputs.any_changed == 'true'
- run: npm run dist
if: steps.changed-files.outputs.any_changed == 'true'
- name: Run docs site
if: steps.changed-files.outputs.any_changed == 'true'
run: |
npm run dev & npx wait-on http://localhost:8000
- name: Run axe script
if: steps.changed-files.outputs.any_changed == 'true'
run: |
script/axe-docs $STRING_OF_PATHS_WE_CARE_ABOUT
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
push:
branches:
- main
pull_request:
jobs:
stylelint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: 20
cache: 'npm'
- run: npm ci
- run: npm run dist
- name: Lint source files
run: npm run stylelint:fix
- name: Push up any fixes
if: ${{ github.event_name == 'pull_request' }}
uses: stefanzweifel/git-auto-commit-action@v7
with:
commit_message: Fixing stylelint issues
commit_user_name: GitHub Design Engineering Bot
commit_user_email: primer-css@users.noreply.github.com
commit_author: primer-css <primer-css@users.noreply.github.com>
file_pattern: src/**/*.scss
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: 20
cache: 'npm'
- run: npm ci
- name: Lint workflow files
run: npm run eslint
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: 20
cache: 'npm'
- run: npm ci
- name: Jest
run: npm test
================================================
FILE: .github/workflows/codeql.yml
================================================
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: [ main, next_major ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ main ]
schedule:
- cron: '34 14 * * 0'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://git.io/codeql-language-support
steps:
- name: Checkout repository
uses: actions/checkout@v6
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v4
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v4
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v4
================================================
FILE: .github/workflows/deploy_preview.yml
================================================
name: Deploy
on:
pull_request:
permissions:
contents: write
pages: write
id-token: write
deployments: write
issues: write
statuses: write
checks: write
jobs:
deploy:
if: ${{ github.repository == 'primer/css' }}
uses: primer/.github/.github/workflows/deploy_preview.yml@v2.4.0
name: Deploy preview
secrets:
gh_token: ${{ secrets.GITHUB_TOKEN }}
with:
node_version: 20
install: npm i && cd docs && npm i && cd ..
build: npm run build:docs:preview
output_dir: docs/public
deploy-storybook:
if: ${{ github.repository == 'primer/css' }}
name: Preview Storybook
runs-on: ubuntu-latest
needs: deploy
steps:
- uses: actions/checkout@v6
- uses: chrnorm/deployment-action@v2.0.7
name: Create GitHub deployment for storybook
id: storybook
with:
token: ${{ secrets.GITHUB_TOKEN }}
environment: Storybook Preview
environment_url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
- name: Update storybook deployment status (success)
if: success()
uses: chrnorm/deployment-status@v2.0.3
with:
token: ${{ secrets.GITHUB_TOKEN }}
environment-url: '${{ needs.deploy.outputs.deployment_url }}/storybook'
state: 'success'
deployment-id: ${{ steps.storybook.outputs.deployment_id }}
- name: Update storybook deployment status (failure)
if: failure()
uses: chrnorm/deployment-status@v2.0.3
with:
token: ${{ secrets.GITHUB_TOKEN }}
state: 'failure'
deployment-id: ${{ steps.storybook.outputs.deployment_id }}
================================================
FILE: .github/workflows/deploy_production.yml
================================================
name: Deploy
on:
push:
branches:
- 'main'
workflow_dispatch:
permissions:
contents: write
pages: write
id-token: write
deployments: write
issues: write
statuses: write
checks: write
jobs:
guard:
name: Guard
runs-on: ubuntu-latest
outputs:
# To avoid deploying documentation for unrelease changes, we check the number of changeset files.
# If it's 0, we deploy.
should_deploy: ${{ steps.changeset-count.outputs.change_count == 0 }}
steps:
- uses: actions/checkout@v6
- id: changeset-count
run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
# Log changeset count for debugging purposes
- name: Log changeset count
run: echo ${{ steps.changeset-count.outputs.change_count }}
# Log guard output for debugging purposes
- name: Log guard output
run: echo ${{ needs.guard.outputs.should_deploy }}
deploy:
if: ${{ github.repository == 'primer/css' }}
name: Production
needs: [guard]
uses: primer/.github/.github/workflows/deploy.yml@v2.4.0
secrets:
gh_token: ${{ secrets.GITHUB_TOKEN }}
with:
node_version: 20
install: npm i && cd docs && npm i && cd ..
build: npm run build:docs
output_dir: docs/public
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
permissions:
id-token: write # Required for OIDC
contents: read
checks: write
statuses: write
jobs:
release-main:
name: Main
if: ${{ github.repository == 'primer/css' && github.ref_name == 'main' }}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
with:
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
fetch-depth: 0
persist-credentials: false
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: 24
cache: 'npm'
- name: Install dependencies
run: npm ci
- id: get-access-token
uses: camertron/github-app-installation-auth-action@v1
with:
app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
client-id: ${{ vars.PRIMER_APP_CLIENT_ID_SHARED }}
client-secret: ${{ secrets.PRIMER_APP_CLIENT_SECRET_SHARED }}
installation-id: ${{ vars.PRIMER_APP_INSTALLATION_ID_SHARED }}
- name: Create release pull request or publish to npm
id: changesets
uses: changesets/action@master
with:
title: Release Tracking
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: npm run release
env:
GITHUB_TOKEN: ${{ steps.get-access-token.outputs.access-token }}
release-candidate:
name: Candidate
if: ${{ github.repository == 'primer/css' && github.ref_name == 'changeset-release/main' }}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
with:
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: 24
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Publish release candidate
run: |
version=$(jq -r .version package.json)
echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" package.json )" > package.json
npm publish --tag next
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Output candidate version number
uses: actions/github-script@v8
with:
script: |
const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
github.rest.repos.createCommitStatus({
owner: context.repo.owner,
repo: context.repo.repo,
sha: context.sha,
state: 'success',
context: `Published ${package.name}`,
description: package.version,
target_url: `https://unpkg.com/${package.name}@${package.version}/`
})
- name: Upload versions json file
uses: primer/.github/.github/actions/upload-versions@main
release-canary:
name: Canary
if: ${{ github.repository == 'primer/css' && github.ref_name != 'main' && github.ref_name != 'changeset-release/main' }}
uses: primer/.github/.github/workflows/release_canary.yml@v2.4.0
with:
install: npm ci
secrets:
gh_token: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/release_tracking.yml
================================================
name: Release Event Tracking
# Measure a datadog event every time a release occurs
on:
pull_request:
types:
- closed
- opened
- reopened
release:
types: [published]
jobs:
release-tracking:
name: Release Tracking
uses: primer/.github/.github/workflows/release_tracking.yml@v2.4.0
secrets:
datadog_api_key: ${{ secrets.DATADOG_API_KEY }}
================================================
FILE: .github/workflows/stale.yml
================================================
name: Stale
on:
schedule:
- cron: '0 * * * *'
jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v10
with:
# General settings
days-before-stale: 60
days-before-close: 7
enable-statistics: true
operations-per-run: 100
remove-stale-when-updated: true
# PR specific settings
delete-branch: true
stale-pr-message: "Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days."
# Issue specific settings
days-before-issue-stale: 180
stale-issue-message: "Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days."
================================================
FILE: .github/workflows/welcome.yml
================================================
name: Welcome
on:
pull_request:
types:
# On by default if you specify no types.
- "opened"
- "reopened"
- "synchronize"
# For `skip-label` only.
- "labeled"
- "unlabeled"
jobs:
release-template:
if: ${{ github.head_ref == 'changeset-release/main' || github.head_ref == 'changeset-release/next_major' }}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: 18.x
cache: 'npm'
- name: Get or Create Comment
uses: actions/github-script@v8
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const fs = require('fs')
const body = await fs.readFileSync('.github/release_template.md', 'utf8')
const result = await github.rest.issues.listComments({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo
});
console.log(result.data)
const primerComments = result.data.filter(c => c.user.login == 'github-actions[bot]')
if (!primerComments.length) {
await github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: body.replace('{{PR_AUTHOR}}', context.payload.sender.login)
})
}
check-for-changeset:
name: Check for changeset
runs-on: ubuntu-latest
env:
SKIP_LABEL: "skip changeset"
steps:
- if: "contains(github.event.pull_request.labels.*.name, 'skip changeset')"
run: echo "passed"; exit 0;
- if: "!contains(github.event.pull_request.labels.*.name, 'skip changeset')"
uses: actions/checkout@v6
with:
ref: ${{ github.event.pull_request.head.sha }}
- if: "!contains(github.event.pull_request.labels.*.name, 'skip changeset')"
name: "Check for changeset"
run: script/check-for-changeset
bundle-stats:
needs: release-template
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: actions/setup-node@v6
with:
node-version: 18
cache: 'npm'
- run: npm ci
- run: npm run pretest
- name: Reporting bundle sizes
uses: primer/comment-token-update@main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_USER: github-actions[bot]
with:
comment-token: 'bundle_table'
script: |
bundles=$(script/bundle-size-report.js)
if [[ $bundles ]]; then
echo "### Bundles with a size change since [latest release](https://github.com/primer/css/releases/latest)"
echo ""
echo "$bundles"
fi
- name: Reporting selector diffs
uses: primer/comment-token-update@main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_USER: github-actions[bot]
with:
comment-token: 'diff_report'
script: |
diff=$(script/selector-diff-report)
if [[ $diff ]]; then
echo "### Selectors added/removed since [latest release](https://github.com/primer/css/releases/latest)"
echo ""
echo "\`\`\`diff"
echo "$diff"
echo "\`\`\`"
fi
label-release:
if: ${{ github.repository == 'primer/css' }}
name: Semantic Version Label
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@v8
id: version-result
with:
github-token: "${{ secrets.GITHUB_TOKEN }}"
result-encoding: string
script: |
const diff_url = context.payload.pull_request.diff_url
const result = await github.request(diff_url)
const match = [...result.data.matchAll(/^\+['"]@primer\/css['"]:\s(patch|minor|major)/mg)]
if (match && match[0]) {
return match[0][1]
}
- uses: actions/github-script@v8
env:
RELEASE: ${{ steps.version-result.outputs.result }}
with:
github-token: ${{secrets.GITHUB_TOKEN}}
script: |
if (process.env.RELEASE == 'undefined') { return }
const issue = await github.rest.issues.get({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number
})
const currentLabels = issue.data.labels.map( l => l.name)
const newLabel = `${process.env.RELEASE} release`
if (!currentLabels.includes(newLabel)) {
const otherReleaseLabels = currentLabels.filter( l => l.endsWith(' release'))
if (otherReleaseLabels.length) {
github.rest.issues.removeLabel({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
name: [otherReleaseLabels]
})
}
github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: [newLabel]
})
}
================================================
FILE: .gitignore
================================================
*.log
*.tgz
.DS_Store
.cache/
.changelog/
.next/
.sass-cache
.storybuild/
.stylelintcache
_site
dist/
docs/dist
node_modules/
public/
searchIndex.js
tmp
yarn.lock
================================================
FILE: .npmignore
================================================
__tests__/
.changeset/
.github/
docs/
script/
# we ignore this because everything in src/ is copied out in script/prepublish
src/
tmp/
docs.scss
.*
*.log
vercel.json
*.config.js
================================================
FILE: .npmrc
================================================
git-tag-version=false
legacy-peer-deps=true
no-audit=true
no-fund=true
================================================
FILE: .vercelignore
================================================
.*.sw?
.changelog/
dist/
docs/dist
docs/public/
================================================
FILE: .vscode/story-template.code-snippets
================================================
{
"story-template": {
"prefix": "story-template",
"body": [
"import React from 'react'",
"import clsx from 'clsx'",
"// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
"",
"export default {",
" title: 'Components/ComponentName',",
" excludeStories: ['ComponentTemplateName'],",
" layout: 'padded',",
" argTypes: {",
" booleanExample: {",
" control: {type: 'boolean'},",
" description: 'true/false toggle to controls',",
" table: {",
" category: 'Pick one: CSS, HTML, Interactive'",
" }",
" },",
" radioExample: {",
" options: ['string1', 'string2', 'string3', 'string4'],",
" control: {",
" type: 'inline-radio',",
" },",
" description: 'radio buttons mapping to strings (example: use for variant class names)',",
" table: {",
" category: 'Pick one: CSS, HTML, Interactive'",
" }",
" },",
" stringExample: {",
" name: 'stringExample',",
" type: 'string',",
" description: 'text box control',",
" table: {",
" category: 'Pick one: CSS, HTML, Interactive'",
" }",
" },",
" children: {",
" description: 'creates a slot for children',",
" table: {",
" category: 'HTML'",
" }",
" }",
" }",
"}",
"",
"// build every component case here in the template (private api)",
"export const ComponentTemplateName = ({booleanExample, radioExample, stringExample, children}) => (",
" <div",
" // use clsx for multiple classnames",
" className={clsx('defaultClass', radioExample && `radioExample`, booleanExample && 'defaultClass--modifier')}",
" // use undefined for values that shouldn't be set if false",
" // aria-hidden={booleanExample ? 'true' : undefined}",
" >",
" {/* use {children} for wrapper component templates */}",
" <>",
" {stringExample}",
" {children}",
" </>",
" </div>",
")",
"",
"// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
"export const Playground = ComponentTemplateName.bind({})",
"Playground.args = {",
" stringExample: 'Default text',",
" booleanExample: false",
" // children: (",
" // <>",
" // <StoryTemplateName {...StoryTemplateName.args} />",
" // </>",
" // )",
"}",
""
],
"description": "Basic component story jsx template"
}
}
================================================
FILE: CHANGELOG.md
================================================
# @primer/css
## 22.1.1
### Patch Changes
- [#3012](https://github.com/primer/css/pull/3012) [`31df244`](https://github.com/primer/css/commit/31df2449f00048c949811b4b4dbe51665567811c) Thanks [@francinelucca](https://github.com/francinelucca)! - Add max-width to kbd styles
- [#2811](https://github.com/primer/css/pull/2811) [`0de15b2`](https://github.com/primer/css/commit/0de15b2e32a741908a4a8d1e8126a891b3d74e07) Thanks [@FloEdelmann](https://github.com/FloEdelmann)! - Reduce spacing between consecutive `<dt>` elements
## 22.1.0
### Minor Changes
- [#2907](https://github.com/primer/css/pull/2907) [`67109bd`](https://github.com/primer/css/commit/67109bda0dcd7e191c3071f5eb58006fdbe4e3c8) Thanks [@langermank](https://github.com/langermank)! - Change `contrast` input background to `bgColor-default`
## 22.0.2
### Patch Changes
- [#2866](https://github.com/primer/css/pull/2866) [`d43c856`](https://github.com/primer/css/commit/d43c85624326770d91e8239c0c5e6693700e4481) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Update @primer/primitives peerDependencies to 10.x || 11.x
- [#2871](https://github.com/primer/css/pull/2871) [`0d2eb58`](https://github.com/primer/css/commit/0d2eb58fbf18092c2ef4ba252522fea98a6aaa1f) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Add default font weight (--base-text-weight-normal, 400) to body
## 22.0.1
### Patch Changes
- [#2864](https://github.com/primer/css/pull/2864) [`0311c08`](https://github.com/primer/css/commit/0311c0849cdfc0fcb18ee0ed96ce2a3ba5c136d6) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Add --fontStack-sansSerif to $body-font variable
## 22.0.0
### Major Changes
- [#2789](https://github.com/primer/css/pull/2789) [`4113637`](https://github.com/primer/css/commit/4113637b3bb60cad1e2dca82e70d92ad05694399) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove @primer/view-components imports for styles moved to primer/view_components
## 21.5.1
### Patch Changes
- [#2727](https://github.com/primer/css/pull/2727) [`7d4cd40`](https://github.com/primer/css/commit/7d4cd4061a0ffb70355944d33ea49883819da26a) Thanks [@kawakamimoeki](https://github.com/kawakamimoeki)! - Removed .css extension from @import and modified @primer/primitives to be output as Sass code.
- [#2728](https://github.com/primer/css/pull/2728) [`7eaba91`](https://github.com/primer/css/commit/7eaba91768f8e31cf6b0c5538230ce2d04e9bfec) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Update primer/primitives to allow for version 9 and 10
- [#2680](https://github.com/primer/css/pull/2680) [`1eb467e`](https://github.com/primer/css/commit/1eb467e9edb3d9ddb84c47bfbf9a21cb9950bf06) Thanks [@robinwhittleton](https://github.com/robinwhittleton)! - Use tabular numbers in tables
## 21.5.0
### Minor Changes
- [#2724](https://github.com/primer/css/pull/2724) [`30d144b`](https://github.com/primer/css/commit/30d144b507d75e5b5ef6d4ec156978acaeb9fad4) Thanks [@camertron](https://github.com/camertron)! - Move prod @primer/\* dependencies to dev
## 21.4.0
### Minor Changes
- [#2691](https://github.com/primer/css/pull/2691) [`5097430`](https://github.com/primer/css/commit/50974300dfe8cf636e1b15b5fbd5b0dc5adf4f2e) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - Remove background behind images in markdown-body
### Patch Changes
- [#2710](https://github.com/primer/css/pull/2710) [`3017831`](https://github.com/primer/css/commit/30178319550ecbf318ecbfa36675c80b6e95e3ba) Thanks [@smockle](https://github.com/smockle)! - Replace deprecated CSS properties in '.sr-only'
## 21.3.6
### Patch Changes
- [#2624](https://github.com/primer/css/pull/2624) [`7e62532`](https://github.com/primer/css/commit/7e6253292c3de10a1f333cfc4e6e3216e6a53ab8) Thanks [@sideshowbarker](https://github.com/sideshowbarker)! - drop “display: none” from details element contents styling
## 21.3.5
### Patch Changes
- [#2657](https://github.com/primer/css/pull/2657) [`b87c379`](https://github.com/primer/css/commit/b87c3796fbb7b2127c98e3fda086f9f1cfd8bc9b) Thanks [@jonrohan](https://github.com/jonrohan)! - Import `primitives/index.scss` in the main `primer.css` file.
## 21.3.4
### Patch Changes
- [#2651](https://github.com/primer/css/pull/2651) [`e329973`](https://github.com/primer/css/commit/e329973d4d788b8b6d2688a907f88c8458b6db7a) Thanks [@jonrohan](https://github.com/jonrohan)! - Bug fix: Removing complex padding calc on kbd
## 21.3.3
### Patch Changes
- [#2644](https://github.com/primer/css/pull/2644) [`eba2b2c`](https://github.com/primer/css/commit/eba2b2c157efc2e16a7bf36db0882c6f330b7bd4) Thanks [@camertron](https://github.com/camertron)! - Fix 'clac' -> 'calc' typo
## 21.3.2
### Patch Changes
- [#2643](https://github.com/primer/css/pull/2643) [`ab6076c`](https://github.com/primer/css/commit/ab6076c62bac967d5d0c805744e50cc8d73d4171) Thanks [@langermank](https://github.com/langermank)! - Use `control` borders for subnav + disabled button fix
- [#2634](https://github.com/primer/css/pull/2634) [`af3ab76`](https://github.com/primer/css/commit/af3ab76454fd3045315082a14cdc5bdfcabd860a) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrade to @primer/primtives@8.2.0 and @primer/stylelint-config@13.0.0-rc
## 21.3.1
### Patch Changes
- [#2613](https://github.com/primer/css/pull/2613) [`2eabfde`](https://github.com/primer/css/commit/2eabfdea85667c041e86e13376f1d2823b64fcb1) Thanks [@stamat](https://github.com/stamat)! - removing !important from letter-spacing marketing typography
- [#2611](https://github.com/primer/css/pull/2611) [`e867934`](https://github.com/primer/css/commit/e8679348ca29c85b470a6b04a821d7143d4acf16) Thanks [@keithamus](https://github.com/keithamus)! - drop !important from details styling
## 21.3.0
### Minor Changes
- [#2598](https://github.com/primer/css/pull/2598) [`434fcac`](https://github.com/primer/css/commit/434fcac6c296ddd3155945420f785a6b48eb693c) Thanks [@langermank](https://github.com/langermank)! - Remove marketing icon variables
- [#2596](https://github.com/primer/css/pull/2596) [`9896c79`](https://github.com/primer/css/commit/9896c79a846cbaa633d21573be252b8e4812e79d) Thanks [@jonrohan](https://github.com/jonrohan)! - Move native color styles from the color-modes bundle to the base bundle
### Patch Changes
- [#2606](https://github.com/primer/css/pull/2606) [`a03827b`](https://github.com/primer/css/commit/a03827b0a0c76c6df8d15d04ea2ec7976799cc92) Thanks [@langermank](https://github.com/langermank)! - Cleanup old Primitive imports
## 21.2.2
### Patch Changes
- [#2590](https://github.com/primer/css/pull/2590) [`d75a512`](https://github.com/primer/css/commit/d75a512298f087e49cac1787fd131501cc308f07) Thanks [@langermank](https://github.com/langermank)! - Use legacy shadow for all floating shadows
## 21.2.1
### Patch Changes
- [#2581](https://github.com/primer/css/pull/2581) [`5d8a030`](https://github.com/primer/css/commit/5d8a030319fa64c99f0d3bed85079884d7086474) Thanks [@langermank](https://github.com/langermank)! - Update shadow utils
- [#2588](https://github.com/primer/css/pull/2588) [`7a25839`](https://github.com/primer/css/commit/7a2583942001decfa3d8172833a5f6b55469c56b) Thanks [@langermank](https://github.com/langermank)! - Bump Primitives + fix selectmenu box-shadow
## 21.2.0
### Minor Changes
- [#2532](https://github.com/primer/css/pull/2532) [`51666ea3`](https://github.com/primer/css/commit/51666ea3b4a00239ff60e420782b5b647484b264) Thanks [@langermank](https://github.com/langermank)! - Tooltip visual refresh
### Patch Changes
- [#2566](https://github.com/primer/css/pull/2566) [`407c5676`](https://github.com/primer/css/commit/407c5676d61985d9061adb77ed2de5bfcc0312ec) Thanks [@langermank](https://github.com/langermank)! - Add `monospace` CSS var to global scss var
## 21.1.1
### Patch Changes
- [#2563](https://github.com/primer/css/pull/2563) [`41952457`](https://github.com/primer/css/commit/4195245722defddf9563fe32b0cbe5c9ae5d42d4) Thanks [@langermank](https://github.com/langermank)! - fix backdrop selector
- [#2564](https://github.com/primer/css/pull/2564) [`8757be58`](https://github.com/primer/css/commit/8757be584db2ddda8153566dc1906451832d3833) Thanks [@langermank](https://github.com/langermank)! - Add new color utility classes
## 21.1.0
### Minor Changes
- [#2554](https://github.com/primer/css/pull/2554) [`f0b0d208`](https://github.com/primer/css/commit/f0b0d208cf04cbf77bfc46b40d65d5f53b109aaa) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove primitives css tokens import from support package
## 21.0.10
### Patch Changes
- [#2549](https://github.com/primer/css/pull/2549) [`df764e1a`](https://github.com/primer/css/commit/df764e1a617d13af34d97bd7b4f06b8a478facd2) Thanks [@keithamus](https://github.com/keithamus)! - Fix styles for ::backdrop
## 21.0.9
### Patch Changes
- [#2520](https://github.com/primer/css/pull/2520) [`7e2622fe`](https://github.com/primer/css/commit/7e2622fe9679969dd195438f5dd7108d2e8991c5) Thanks [@langermank](https://github.com/langermank)! - Use `control` border on default btn in an input group
## 21.0.8
### Patch Changes
- [#2510](https://github.com/primer/css/pull/2510) [`49e81506`](https://github.com/primer/css/commit/49e81506a99bd83c05a8459a49f1fd3ae60da20b) Thanks [@langermank](https://github.com/langermank)! - Use `control` tokens for legacy form CSS border-color
- [#2508](https://github.com/primer/css/pull/2508) [`a8b1bed2`](https://github.com/primer/css/commit/a8b1bed2ead5824fb6332f61c6728f324b51d32c) Thanks [@langermank](https://github.com/langermank)! - Bump Primitive v7.12.0
- [#2443](https://github.com/primer/css/pull/2443) [`e1b3f4f4`](https://github.com/primer/css/commit/e1b3f4f4bd041c6858b275142b8321c383c6aa54) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove yarn in favor of npm
## 21.0.7
### Patch Changes
- [#2472](https://github.com/primer/css/pull/2472) [`3ee117e1`](https://github.com/primer/css/commit/3ee117e1bd67675a5bdc2739bbe4d05f4e297c30) Thanks [@simurai](https://github.com/simurai)! - Add `::selection` to `color-mode-theme()` mixin
## 21.0.6
### Patch Changes
- [#2470](https://github.com/primer/css/pull/2470) [`03e1a26c`](https://github.com/primer/css/commit/03e1a26c0d4fcc85450998f0f1f8120a1db48acc) Thanks [@langermank](https://github.com/langermank)! - Revert #2461 default selection color
## 21.0.5
### Patch Changes
- [#2468](https://github.com/primer/css/pull/2468) [`c6d5d1df`](https://github.com/primer/css/commit/c6d5d1dfd3eafe44197ddc262f605dc5373437ac) Thanks [@keithamus](https://github.com/keithamus)! - Fix bug with `color-mode` mixin not applying correctly due to `::selection`
## 21.0.4
### Patch Changes
- [#2466](https://github.com/primer/css/pull/2466) [`92047014`](https://github.com/primer/css/commit/9204701416b547255a1ebaeb2bd8a20056ffb8d4) Thanks [@langermank](https://github.com/langermank)! - Use `@primer/primitives` v8 colors with fallbacks
## 21.0.3
### Patch Changes
- [#2461](https://github.com/primer/css/pull/2461) [`abc89659`](https://github.com/primer/css/commit/abc8965913313bbb969db9e1148fb5add9327ec9) Thanks [@langermank](https://github.com/langermank)! - Add default `::selection` color
- [#2410](https://github.com/primer/css/pull/2410) [`344224fc`](https://github.com/primer/css/commit/344224fccdef2f3a37ed931c512e400b47301ea2) Thanks [@dylanatsmith](https://github.com/dylanatsmith)! - Add width utility to limit line length for readability
- [#2457](https://github.com/primer/css/pull/2457) [`352ed7b7`](https://github.com/primer/css/commit/352ed7b75585c686c996a5e7c2c29e20e41d0672) Thanks [@langermank](https://github.com/langermank)! - Add new PostCSS fallback config
## 21.0.2
### Patch Changes
- [#2439](https://github.com/primer/css/pull/2439) [`fe17ba05`](https://github.com/primer/css/commit/fe17ba05ac4372fb1d49edc08c8c036c2da54dce) Thanks [@langermank](https://github.com/langermank)! - Bump primitives v7.11.10
- [#2437](https://github.com/primer/css/pull/2437) [`616c8935`](https://github.com/primer/css/commit/616c89354bf8571488674b44f431361d66e9eae3) Thanks [@langermank](https://github.com/langermank)! - Add `::selection` to root color vars
- [#2438](https://github.com/primer/css/pull/2438) [`abdb3a93`](https://github.com/primer/css/commit/abdb3a93f10705472cea773473eb3ada6b918d31) Thanks [@langermank](https://github.com/langermank)! - Add utility typography CSS vars to main bundle
- [#2426](https://github.com/primer/css/pull/2426) [`713d9a59`](https://github.com/primer/css/commit/713d9a5921e565baf39fe522dfa73eb603b850e2) Thanks [@langermank](https://github.com/langermank)! - Add `mktg` CSS vars to PCSS
- [#2430](https://github.com/primer/css/pull/2430) [`c415172f`](https://github.com/primer/css/commit/c415172fca56a7f22d21f66a79e49da7dd443f96) Thanks [@langermank](https://github.com/langermank)! - Remove duplicate `font-weight` fallbacks from utilities
## 21.0.1
### Patch Changes
- [#2421](https://github.com/primer/css/pull/2421) [`7dfcb0c5`](https://github.com/primer/css/commit/7dfcb0c595881439c15a38389168272da5aab59d) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives to `7.11.5`
- [#2404](https://github.com/primer/css/pull/2404) [`ae9d71b1`](https://github.com/primer/css/commit/ae9d71b117bf37e8f618db4474efd87c75a2f531) Thanks [@langermank](https://github.com/langermank)! - Add `font-size` to `html` tag to make rem units "safe"
- [#2418](https://github.com/primer/css/pull/2418) [`bce38dee`](https://github.com/primer/css/commit/bce38dee01027c6ac6dd3dbcec644eec153fd2ba) Thanks [@simurai](https://github.com/simurai)! - Make list type selector case sensitive
- [#2425](https://github.com/primer/css/pull/2425) [`718f1aa6`](https://github.com/primer/css/commit/718f1aa6a6f8b5823e55b6b2616a729f59392e83) Thanks [@langermank](https://github.com/langermank)! - - Bump primitives to v7.11.7
- Update size tokens to Primitives pre-v8 release
## 21.0.0
### Major Changes
- [#2403](https://github.com/primer/css/pull/2403) [`256affcf`](https://github.com/primer/css/commit/256affcf3404c97d3db199a0b3cf32d3b864627c) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - ## Removed DiffStat component
- the diffStat component is removed from primer/css
- the component is very specific to this use-case, it is not generic enough to be part of the primer design system and was thus chosen for removal
- the component will be added to the github codebase directly so that it is still available
- if you are working within github.com you should be ale to use diffStat just like before. On other projects you will need to copy the diffStat code and add it to your codebase
- [#2402](https://github.com/primer/css/pull/2402) [`c6e214b7`](https://github.com/primer/css/commit/c6e214b75b5a25d3ebb7f41ca922c93d395ac109) Thanks [@simurai](https://github.com/simurai)! - Remove `form-validation` styles
- [#2405](https://github.com/primer/css/pull/2405) [`85f31cc8`](https://github.com/primer/css/commit/85f31cc8f8d4423a712fda166421eb0ac7d6d562) Thanks [@simurai](https://github.com/simurai)! - Remove `ActionList`
### Patch Changes
- [#2407](https://github.com/primer/css/pull/2407) [`607337cc`](https://github.com/primer/css/commit/607337cce57e59c7bee00486b63fa43ce845aff2) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives to `7.11.2`
- [#2409](https://github.com/primer/css/pull/2409) [`cf38a932`](https://github.com/primer/css/commit/cf38a932e76e00a8c83c351bbb5f1ae23649d1b4) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives to `7.11.3`
- [#2391](https://github.com/primer/css/pull/2391) [`95ab0d0f`](https://github.com/primer/css/commit/95ab0d0f48fde360a9f0b0f6a8af0323b3e891da) Thanks [@simurai](https://github.com/simurai)! - Prevent `.show-on-focus` to change width/height
## 20.8.3
### Patch Changes
- [#2390](https://github.com/primer/css/pull/2390) [`73ae8ec4`](https://github.com/primer/css/commit/73ae8ec45bc7d92ecfe58226d233176856f7bca9) Thanks [@simurai](https://github.com/simurai)! - Remove `autocheck` + `status-indicator` styles
- [#2388](https://github.com/primer/css/pull/2388) [`3ceb1964`](https://github.com/primer/css/commit/3ceb19648b651f2a5b2f571d066aa895af8f443e) Thanks [@arelia](https://github.com/arelia)! - update default for flex wrap styles
- [#2378](https://github.com/primer/css/pull/2378) [`55f35e1d`](https://github.com/primer/css/commit/55f35e1d0fc9a441f14f29b61ac5fbefbf3c4884) Thanks [@simurai](https://github.com/simurai)! - Fix code block color inside a `<blockquote>`
- [#2386](https://github.com/primer/css/pull/2386) [`1b53e23e`](https://github.com/primer/css/commit/1b53e23ed39fc2c001b07d810ebe516f2957f325) Thanks [@josepmartins](https://github.com/josepmartins)! - Add responsive `border-radius` story
## 20.8.2
### Patch Changes
- [#2380](https://github.com/primer/css/pull/2380) [`3010e199`](https://github.com/primer/css/commit/3010e199bb5068838eb46e73e748d1e5e2f0143c) Thanks [@langermank](https://github.com/langermank)! - Bump Primitives v7.11.1
## 20.8.1
### Patch Changes
- [#2365](https://github.com/primer/css/pull/2365) [`4b94fbb7`](https://github.com/primer/css/commit/4b94fbb759e163abb9495777973b5a6e700769f7) Thanks [@jackbrewer](https://github.com/jackbrewer)! - Remove trailing margin from last-child within a markdown table cell
- [#2351](https://github.com/primer/css/pull/2351) [`1b6694c4`](https://github.com/primer/css/commit/1b6694c40903eae4e107cd9d59faf5020a42f944) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating to primer view components 0.0.117
## 20.8.0
### Minor Changes
- [`d7a4c343`](https://github.com/primer/css/commit/d7a4c343ab1bc0d7f55ff85d735c93d9825419ae) Thanks [@jonrohan](https://github.com/jonrohan)! - Importing more styles from Primer View Components
- https://github.com/primer/view_components/pull/1587
- https://github.com/primer/view_components/pull/1590
- https://github.com/primer/view_components/pull/1592
- https://github.com/primer/view_components/pull/1593
- https://github.com/primer/view_components/pull/1594
- https://github.com/primer/view_components/pull/1598
- https://github.com/primer/view_components/pull/1599
- https://github.com/primer/view_components/pull/1600
- https://github.com/primer/view_components/pull/1601
- https://github.com/primer/view_components/pull/1607
- https://github.com/primer/view_components/pull/1609
- https://github.com/primer/view_components/pull/1618
- https://github.com/primer/view_components/pull/1626
- [#2318](https://github.com/primer/css/pull/2318) [`aee4b6f5`](https://github.com/primer/css/commit/aee4b6f571d88f391fcf98170857c4eed7b1ae82) Thanks [@jonrohan](https://github.com/jonrohan)! - Import blankslate styles from primer/view-components
### Patch Changes
- [#2309](https://github.com/primer/css/pull/2309) [`f76e7858`](https://github.com/primer/css/commit/f76e785807d9c9c64530201f858798e67668afe2) Thanks [@jdanyow](https://github.com/jdanyow)! - Use `--color-fg-default` for `mark`
- [#2330](https://github.com/primer/css/pull/2330) [`83250f82`](https://github.com/primer/css/commit/83250f82751092cc9ad3a8fb46262a0f0f2a3a96) Thanks [@stevenlaidlaw](https://github.com/stevenlaidlaw)! - Fix collapsing spaces within inline code blocks
- [#2327](https://github.com/primer/css/pull/2327) [`8cf13e98`](https://github.com/primer/css/commit/8cf13e984ca27a286a706fd2b7243980d3de7985) Thanks [@simurai](https://github.com/simurai)! - Move `fieldset` + `label` styles to `base.scss`
- [#2340](https://github.com/primer/css/pull/2340) [`ecbcbb1b`](https://github.com/primer/css/commit/ecbcbb1b04e72fc2006be7ea8211aae0732d3530) Thanks [@simurai](https://github.com/simurai)! - Import `Layout` from PVC
## 20.7.1
### Patch Changes
- [#2322](https://github.com/primer/css/pull/2322) [`1259ddd4`](https://github.com/primer/css/commit/1259ddd408a415a74b740992a8d64197b48bf1f4) Thanks [@langermank](https://github.com/langermank)! - Use correct weight token for typography utilities
## 20.7.0
### Minor Changes
- [#2311](https://github.com/primer/css/pull/2311) [`3b397d98`](https://github.com/primer/css/commit/3b397d985c23592d0e18d14fe75d71ea7572aa18) Thanks [@langermank](https://github.com/langermank)! - [WIP] Convert margin utilities to rem units with fallbacks
- [`46016601`](https://github.com/primer/css/commit/46016601e89d8b777e06dc7d6cd4a272dba17f7d) Thanks [@langermank](https://github.com/langermank)! - Convert padding and border utilities to use `rem` units with `px` fallbacks
- [#2302](https://github.com/primer/css/pull/2302) [`412d7820`](https://github.com/primer/css/commit/412d78208ba76e7a1cdc0872a2adcadabc3d0414) Thanks [@langermank](https://github.com/langermank)! - Convert typography to use `rem` units with `px` fallbacks
## 20.6.1
### Patch Changes
- [#2305](https://github.com/primer/css/pull/2305) [`12355f87`](https://github.com/primer/css/commit/12355f87ac8955da0707f6be6fa06a936c26b2fd) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add upper-roman and upper-alpha list types
- [#2307](https://github.com/primer/css/pull/2307) [`0370244f`](https://github.com/primer/css/commit/0370244f49322863534c62b5b5589128c551ccc7) Thanks [@jonrohan](https://github.com/jonrohan)! - Bugfix: Adding `white-space: normal` to Overlay compontn to reset wrapping.
- [#2316](https://github.com/primer/css/pull/2316) [`f3acb2b1`](https://github.com/primer/css/commit/f3acb2b116f10955e1ba4f1a35aa874eed019ceb) Thanks [@langermank](https://github.com/langermank)! - Increase Checkbox/Radio border contrast
- [#2314](https://github.com/primer/css/pull/2314) [`c8100be7`](https://github.com/primer/css/commit/c8100be771634093fe3a4d36481fc43c0d966015) Thanks [@langermank](https://github.com/langermank)! - [Bug] Radio checked + focus state fixes
- [#2310](https://github.com/primer/css/pull/2310) [`551492eb`](https://github.com/primer/css/commit/551492ebf420b3ea8872e9a101bd874d8b4e8a1d) Thanks [@jdanyow](https://github.com/jdanyow)! - Update dropdown hover selector
## 20.6.0
### Minor Changes
- [#2300](https://github.com/primer/css/pull/2300) [`5a0b9b29`](https://github.com/primer/css/commit/5a0b9b2939c1428430d249aeeb9adb0ba8bc18ce) Thanks [@simurai](https://github.com/simurai)! - Add `Noto Sans` to the body font stack
## 20.5.1
### Patch Changes
- [#2292](https://github.com/primer/css/pull/2292) [`9a4f2ff7`](https://github.com/primer/css/commit/9a4f2ff78073be69127664b36d469c4b1ddf0c7c) Thanks [@camertron](https://github.com/camertron)! - Add additional :not selectors for flash classes
## 20.5.0
### Minor Changes
- [#2289](https://github.com/primer/css/pull/2289) [`c23346b9`](https://github.com/primer/css/commit/c23346b9a401beb3c2b0cbc853574a5259db42a5) Thanks [@camertron](https://github.com/camertron)! - Don't apply flash\* classes to banners
## 20.4.8
### Patch Changes
- [#2284](https://github.com/primer/css/pull/2284) [`8336334d`](https://github.com/primer/css/commit/8336334d12ba3a1dac323c853b9fdcaacd480b68) Thanks [@koddsson](https://github.com/koddsson)! - Remove action list item animation
## 20.4.7
### Patch Changes
- [#2228](https://github.com/primer/css/pull/2228) [`b087282e`](https://github.com/primer/css/commit/b087282e5040a53a48b707bd94151a3b896659db) Thanks [@simurai](https://github.com/simurai)! - Improve `AvatarStack` when hovering
* [#2269](https://github.com/primer/css/pull/2269) [`27266fcd`](https://github.com/primer/css/commit/27266fcd212af6256511a912fb85c303e1b3a4d9) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Fix Overlay easing animation
- [#2260](https://github.com/primer/css/pull/2260) [`6569fb3a`](https://github.com/primer/css/commit/6569fb3a048e324fea63674077fee587b6b9912a) Thanks [@simurai](https://github.com/simurai)! - Fix nested `<ul>` in footnotes
* [#2268](https://github.com/primer/css/pull/2268) [`2e2bc71b`](https://github.com/primer/css/commit/2e2bc71b78806e0ce81005e42871bc21ec829526) Thanks [@simurai](https://github.com/simurai)! - Set FormControl color
## 20.4.6
### Patch Changes
- [#2266](https://github.com/primer/css/pull/2266) [`c28cdf7e`](https://github.com/primer/css/commit/c28cdf7effbd3bd750585543ff774e1e7c84873a) Thanks [@langermank](https://github.com/langermank)! - Remove scrollbar CSS property from Overlay
* [#2255](https://github.com/primer/css/pull/2255) [`1a9a6689`](https://github.com/primer/css/commit/1a9a668931c51cb4ca0867173af78f1e18d2662d) Thanks [@jdrush89](https://github.com/jdrush89)! - Fixing ActionList Item hover focus style
- [#2249](https://github.com/primer/css/pull/2249) [`81083778`](https://github.com/primer/css/commit/81083778a73c1d1f0f37b4efefe5359926ce4269) Thanks [@koddsson](https://github.com/koddsson)! - Increase specificy for Overlay styles as they relate to the backdrop and positioning options
- If a Dialog opens a second Dialog, each Dialog properties should be contained to its own scope
## 20.4.5
### Patch Changes
- [#2242](https://github.com/primer/css/pull/2242) [`ef31fd98`](https://github.com/primer/css/commit/ef31fd988d52391317cc8982caf06ef45732ca70) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - This border change was made to ensure that assignee avatars would stack next to one another correctly.
## 20.4.4
### Patch Changes
- [#2218](https://github.com/primer/css/pull/2218) [`6205337b`](https://github.com/primer/css/commit/6205337b4c871b6ce431c8b211ddb0bbd176946f) Thanks [@langermank](https://github.com/langermank)! - - Adding readonly styles
- Fixing focus background color for inset field
* [#2211](https://github.com/primer/css/pull/2211) [`8e5f6224`](https://github.com/primer/css/commit/8e5f62244192a8e2a191be7e7ad20d00f4b4bedb) Thanks [@imjohnbo](https://github.com/imjohnbo)! - Remove outline reset of `.SelectMenu-closeButton`
- [#2220](https://github.com/primer/css/pull/2220) [`1a8e7db5`](https://github.com/primer/css/commit/1a8e7db5f6c7b369fcfb6598df2edc42d0511da7) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Update Marketing Typography (marketing-type.md)
* [#2229](https://github.com/primer/css/pull/2229) [`8a4c0878`](https://github.com/primer/css/commit/8a4c0878857ff65447906bf7d969211f96715197) Thanks [@jonrohan](https://github.com/jonrohan)! - ActionList hide the first divider if there's hidden items in front of it.
- [#2225](https://github.com/primer/css/pull/2225) [`56ea4ab1`](https://github.com/primer/css/commit/56ea4ab17644ad0d521373f700d551d66217268a) Thanks [@langermank](https://github.com/langermank)! - Overlay updates for Alpha::Dialog
- Size improvements
- Support buttom and side sheets
- Preliminary animations for sheets
## 20.4.3
### Patch Changes
- [#2208](https://github.com/primer/css/pull/2208) [`83e43486`](https://github.com/primer/css/commit/83e43486d83350b331953f3c3be450ee79eaa783) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving segmented_control.css to primer_view_components
* [#2202](https://github.com/primer/css/pull/2202) [`b74e78b2`](https://github.com/primer/css/commit/b74e78b2539925956ec19aa3efbf2410dc1167e0) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-button--iconOnly-whenNarrow and place on button
- [#2191](https://github.com/primer/css/pull/2191) [`e175f69d`](https://github.com/primer/css/commit/e175f69dd87fb3b54f46130dbdae18b75e9263ad) Thanks [@josepmartins](https://github.com/josepmartins)! - Bump @primer/gatsby-theme-doctocat from 3.1.1 to 4.0.0 in /docs
## 20.4.2
### Patch Changes
- [#2180](https://github.com/primer/css/pull/2180) [`c71e7df0`](https://github.com/primer/css/commit/c71e7df03b9f6816dd2ce7f3d343f92edbc8cf00) Thanks [@dgreif](https://github.com/dgreif)! - Fail dist build when for postcss warnings
* [#2194](https://github.com/primer/css/pull/2194) [`5ee33aca`](https://github.com/primer/css/commit/5ee33acac56156eec990e50be0ecdfb370005b8e) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding position relative to SegmentedControl
- [#2195](https://github.com/primer/css/pull/2195) [`f9e5db5e`](https://github.com/primer/css/commit/f9e5db5e4a01b2b0dae64a4d00d36cfe1df58792) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating the SegmentedControl component to role=list and use `ul`.
## 20.4.1
### Patch Changes
- [#2178](https://github.com/primer/css/pull/2178) [`2df59776`](https://github.com/primer/css/commit/2df5977613d4b196e0eb08c49f290d18f74dd412) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix: autoprefix giving a warning about align-content
## 20.4.0
### Minor Changes
- [#2152](https://github.com/primer/css/pull/2152) [`edac9edb`](https://github.com/primer/css/commit/edac9edbcf833fc76d406d225b6cf6abfa2b7f99) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add Stack component
### Patch Changes
- [#2177](https://github.com/primer/css/pull/2177) [`add769c9`](https://github.com/primer/css/commit/add769c97193b387de2fbfb4b0a66c7157826563) Thanks [@langermank](https://github.com/langermank)! - Autocomplete item selected state
* [#2174](https://github.com/primer/css/pull/2174) [`97f178d7`](https://github.com/primer/css/commit/97f178d7dedb92c713f1e684384db089c71eeae6) Thanks [@simurai](https://github.com/simurai)! - Prevent `SegmentedControl-text` from wrapping
- [#2168](https://github.com/primer/css/pull/2168) [`a52afe7e`](https://github.com/primer/css/commit/a52afe7e7d34cccf550b43c052777a392bb7229f) Thanks [@owenniblock](https://github.com/owenniblock)! - Increases z-index for .show-on-focus
* [#2176](https://github.com/primer/css/pull/2176) [`d8c218ab`](https://github.com/primer/css/commit/d8c218aba8b16a80a96b39ca086df34ed4c307df) Thanks [@langermank](https://github.com/langermank)! - Add `aria-selected` to ActionList-item for Autocomplete
- [#2090](https://github.com/primer/css/pull/2090) [`8016e3c5`](https://github.com/primer/css/commit/8016e3c507d8e72be1b32520cc548c362290a73c) Thanks [@Luckz](https://github.com/Luckz)! - Remove article
## 20.3.0
### Minor Changes
- [#2147](https://github.com/primer/css/pull/2147) [`9dd2a49e`](https://github.com/primer/css/commit/9dd2a49e2633f337c2316a43907f17dfd5c3173b) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add AppFrame component
### Patch Changes
- [#2083](https://github.com/primer/css/pull/2083) [`13be7ef1`](https://github.com/primer/css/commit/13be7ef18d2d9874e7a08f20d9f93538752517c6) Thanks [@simurai](https://github.com/simurai)! - Add `SegmentedControl` component
* [#2171](https://github.com/primer/css/pull/2171) [`d2b4d698`](https://github.com/primer/css/commit/d2b4d698882f57a6c4a08e66c10bdca27924046f) Thanks [@khiga8](https://github.com/khiga8)! - Add .tooltipped to deprecations json
## 20.2.4
### Patch Changes
- [#2136](https://github.com/primer/css/pull/2136) [`89846844`](https://github.com/primer/css/commit/8984684470dc2e6cc69e7c80e4ce4a0e70e57eb3) Thanks [@langermank](https://github.com/langermank)! - Bug: ActionList-item disabled state
* [#2130](https://github.com/primer/css/pull/2130) [`544fb277`](https://github.com/primer/css/commit/544fb2773dbadd934a34232637970946de3c536d) Thanks [@renbaoshuo](https://github.com/renbaoshuo)! - Add link to source code in Timeline's doc
- [#2114](https://github.com/primer/css/pull/2114) [`facb9682`](https://github.com/primer/css/commit/facb96823a344369afdace1365dda38bb5312f2b) Thanks [@langermank](https://github.com/langermank)! - - Updates stories to reflect markup for Rails
- Clean up FormControl classes
- Add Radio and Checkbox custom styles
* [#2132](https://github.com/primer/css/pull/2132) [`c898103e`](https://github.com/primer/css/commit/c898103e0e942b7ab07f43b83496f019163458f1) Thanks [@vzrenggamani](https://github.com/vzrenggamani)! - docs: update deployment location of docs
## 20.2.3
### Patch Changes
- [#2124](https://github.com/primer/css/pull/2124) [`f1b3e55f`](https://github.com/primer/css/commit/f1b3e55f141ddaa5719d223d4670d935bf9d5337) Thanks [@langermank](https://github.com/langermank)! - FormControl + Overlay bug fixes
* [#2129](https://github.com/primer/css/pull/2129) [`2cc18d03`](https://github.com/primer/css/commit/2cc18d0348dc667961c9374886c8a82e95334d6f) Thanks [@camertron](https://github.com/camertron)! - Fix preview deploys
- [#2077](https://github.com/primer/css/pull/2077) [`ab078a58`](https://github.com/primer/css/commit/ab078a58c6ebe4118f917bed4c71fbbb56f0634f) Thanks [@mlynam](https://github.com/mlynam)! - Make .form-control elements render as disabled when a parent fieldset is disabled
## 20.2.2
### Patch Changes
- [#2075](https://github.com/primer/css/pull/2075) [`9f576a3c`](https://github.com/primer/css/commit/9f576a3c33479fa0beb5ef4fe9b794f67a58070c) Thanks [@langermank](https://github.com/langermank)! - FormControl + Autocomplete component updates
## 20.2.1
### Patch Changes
- [#2094](https://github.com/primer/css/pull/2094) [`33f799f1`](https://github.com/primer/css/commit/33f799f13edad2e7434425913a8d445aa27213de) Thanks [@camertron](https://github.com/camertron)! - Add missing ToggleSwitch--checked styles
* [#2091](https://github.com/primer/css/pull/2091) [`f740d008`](https://github.com/primer/css/commit/f740d00827fa854062f6ce3449ca6745fae9bea8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Bump font size of large buttons
## 20.2.0
### Minor Changes
- [#2087](https://github.com/primer/css/pull/2087) [`8354de5c`](https://github.com/primer/css/commit/8354de5c5eeb60e447712c04e25c2ef370206488) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.
* [#2074](https://github.com/primer/css/pull/2074) [`5cfae2c2`](https://github.com/primer/css/commit/5cfae2c2193885c34af97dd61da201c400bc8549) Thanks [@camertron](https://github.com/camertron)! - Add styles for the ToggleSwitch component
## 20.1.1
### Patch Changes
- [#2078](https://github.com/primer/css/pull/2078) [`92ac0e39`](https://github.com/primer/css/commit/92ac0e39e6f5aae0314397890c8f78227a6c6ba0) Thanks [@langermank](https://github.com/langermank)! - Setup new `primer-primitive` bundle
## 20.1.0
### Minor Changes
- [#2072](https://github.com/primer/css/pull/2072) [`ab6f0840`](https://github.com/primer/css/commit/ab6f0840f0131b370fb8871551720afa20fb466e) Thanks [@JasonEtco](https://github.com/JasonEtco)! - Add `.text-capitalize` utility class
* [#1998](https://github.com/primer/css/pull/1998) [`51e087aa`](https://github.com/primer/css/commit/51e087aa31f049c1cb148df6f04fdbc6de434cf0) Thanks [@bolonio](https://github.com/bolonio)! - Styles for the new Dialog Component
## 20.0.0
### Major Changes
- [#2049](https://github.com/primer/css/pull/2049) [`f4dba96e`](https://github.com/primer/css/commit/f4dba96e0cb78d3d451226cf60b01187678ced45) Thanks [@langermank](https://github.com/langermank)! - Comment box upload focus border-radius
* [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
- [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
* [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles
Refactor selected state and spacing
Add selected bold state override from github/github
- [#2047](https://github.com/primer/css/pull/2047) [`553d72cc`](https://github.com/primer/css/commit/553d72cc1baaf43a4c743c50cc8881f3811123e9) Thanks [@langermank](https://github.com/langermank)! - UnderlineNav bug fix
* [#2046](https://github.com/primer/css/pull/2046) [`55e2b069`](https://github.com/primer/css/commit/55e2b069a4cbd225af676bef918bbbe2e6cd73b7) Thanks [@langermank](https://github.com/langermank)! - Global focus style CSS from feature flag (next major)
### Patch Changes
- [#2048](https://github.com/primer/css/pull/2048) [`dc529e31`](https://github.com/primer/css/commit/dc529e3102788d5caa136a9d30c58e56721427a7) Thanks [@simurai](https://github.com/simurai)! - Fix headings with an anchor in a summary
* [#2041](https://github.com/primer/css/pull/2041) [`20550bbf`](https://github.com/primer/css/commit/20550bbfaa236ac197ca58805542eaab0bf38fd4) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading to stylelint-config-12.4.0
## 19.8.2
### Patch Changes
- [#2019](https://github.com/primer/css/pull/2019) [`57be2d50`](https://github.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://github.com/langermank)! - [Bug] TreeView animation and padding fix
## 19.8.1
### Patch Changes
- [#1996](https://github.com/primer/css/pull/1996) [`a4293bf9`](https://github.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://github.com/langermank)! - TreeView: remove bold active items + markup changes
## 19.8.0
### Minor Changes
- [#1997](https://github.com/primer/css/pull/1997) [`9806b54b`](https://github.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://github.com/simurai)! - Add Tritanopia theme
### Patch Changes
- [#2002](https://github.com/primer/css/pull/2002) [`a3bc51f6`](https://github.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://github.com/simurai)! - Always break long `branch-name`s
## 19.7.1
### Patch Changes
- [#2001](https://github.com/primer/css/pull/2001) [`47cec404`](https://github.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://github.com/jdanyow)! - Remove IE11 support in tooltip
* [#1995](https://github.com/primer/css/pull/1995) [`557b100a`](https://github.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities
- [#2000](https://github.com/primer/css/pull/2000) [`264a89a5`](https://github.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://github.com/khiga8)! - More CSS updates to `Autocomplete`
## 19.7.0
### Minor Changes
- [#1994](https://github.com/primer/css/pull/1994) [`69fe8c65`](https://github.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://github.com/khiga8)! - Add support for inline, stack label in autocomplete
### Patch Changes
- [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
## 19.6.0
### Minor Changes
- [#1989](https://github.com/primer/css/pull/1989) [`f544ef85`](https://github.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Make `pane` an optional region for PageLayout component
### Patch Changes
- [#1988](https://github.com/primer/css/pull/1988) [`e3443f1a`](https://github.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://github.com/simurai)! - Fix color-fg utilities in links
* [#1985](https://github.com/primer/css/pull/1985) [`c2bd6bc9`](https://github.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://github.com/cheshire137)! - Adding .color-bg-transparent utility class
## 19.5.1
### Patch Changes
- [#1983](https://github.com/primer/css/pull/1983) [`07bc069e`](https://github.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://github.com/simurai)! - Bump `primer/primitives` to `^7.5.1`
## 19.5.0
### Minor Changes
- [#1948](https://github.com/primer/css/pull/1948) [`6a83a92b`](https://github.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` color roles
* [#1961](https://github.com/primer/css/pull/1961) [`a35a8bdc`](https://github.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://github.com/jonrohan)! - Default .PageLayout to display block
### Patch Changes
- [#1954](https://github.com/primer/css/pull/1954) [`30f29d38`](https://github.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://github.com/simurai)! - Fix `input-block` in `form-group`
* [#1956](https://github.com/primer/css/pull/1956) [`39063461`](https://github.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.2
- [#1931](https://github.com/primer/css/pull/1931) [`e5c5312e`](https://github.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook
* [#1950](https://github.com/primer/css/pull/1950) [`7c85c500`](https://github.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix sequence of content in Subhead
- [#1942](https://github.com/primer/css/pull/1942) [`0450ccbb`](https://github.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Added line break to docs
* [#1953](https://github.com/primer/css/pull/1953) [`3a91a29a`](https://github.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://github.com/hectahertz)! - Use `<h2>` instead of `<div>` on Subhead-heading docs
- [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `<summary>`
* [#1978](https://github.com/primer/css/pull/1978) [`a00e6bce`](https://github.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://github.com/langermank)! - Handle pointer-events on ActionList visuals
- [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels
## 19.4.0
### Minor Changes
- [#1937](https://github.com/primer/css/pull/1937) [`67f08009`](https://github.com/primer/css/commit/67f08009ef458088b9fda6267ab25ad6d0a514aa) Thanks [@langermank](https://github.com/langermank)! - TreeView single item nesting
* [#1905](https://github.com/primer/css/pull/1905) [`50221a54`](https://github.com/primer/css/commit/50221a5486d28c54dc1f578b459addd867bd01d3) Thanks [@langermank](https://github.com/langermank)! - Refactors NavigationList to better handle accessibility. Backwards compatible for TreeView CSS.
- [#1936](https://github.com/primer/css/pull/1936) [`c53ecdff`](https://github.com/primer/css/commit/c53ecdff5442cf4ac5da0d1e2ba45871ab662855) Thanks [@khiga8](https://github.com/khiga8)! - Deprecating `.tooltipped` CSS classes
### Patch Changes
- [#1928](https://github.com/primer/css/pull/1928) [`0fb67895`](https://github.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://github.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]`
## 19.3.0
### Minor Changes
- [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
* [#1919](https://github.com/primer/css/pull/1919) [`21085f5c`](https://github.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://github.com/hectahertz)! - Add blankslate classes to replace utilities
### Patch Changes
- [#1892](https://github.com/primer/css/pull/1892) [`55bd498b`](https://github.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
* [#1906](https://github.com/primer/css/pull/1906) [`f02d9a3e`](https://github.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.0 and fixing violations
- [#1908](https://github.com/primer/css/pull/1908) [`84581e96`](https://github.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://github.com/simurai)! - Reduce size of `Label--inline`
* [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
- [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
* [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
## 19.2.0
### Minor Changes
- [#1737](https://github.com/primer/css/pull/1737) [`6b4089d8`](https://github.com/primer/css/commit/6b4089d8b37174ca061762c56b5e4134a54cf4ef) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Adds new PageLayout component CSS with Storybook documentation
### Patch Changes
- [#1855](https://github.com/primer/css/pull/1855) [`8f2e7534`](https://github.com/primer/css/commit/8f2e7534ecbdb3d0e773d60c725b55dc4bb263e2) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives to `7.4.0`
* [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
- [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
* [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
## 19.1.1
### Patch Changes
- [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for `max-width` media queries
* [#1803](https://github.com/primer/css/pull/1803) [`c46fe918`](https://github.com/primer/css/commit/c46fe9186efbcf6e4a482685529bdb0bda28aa9f) Thanks [@langermank](https://github.com/langermank)! - - Adds ActionList tree-view specific CSS
- Minor bug fixes for ActionList default
- [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for the `hide` utilities
## 19.1.0
### Minor Changes
- [#1759](https://github.com/primer/css/pull/1759) [`74724ce7`](https://github.com/primer/css/commit/74724ce7c72b1cb540a9ef3d845169f1df17b55e) Thanks [@langermank](https://github.com/langermank)! - Remove `popover` responsive hack
* [#1807](https://github.com/primer/css/pull/1807) [`13a4654f`](https://github.com/primer/css/commit/13a4654fa0854accfaabbbd2f21d2e0a1c90442d) Thanks [@enstyled](https://github.com/enstyled)! - Marketing: Add link components
Marketing: Add animated arrow utility
Marketing: Document button components with arrows
### Patch Changes
- [#1780](https://github.com/primer/css/pull/1780) [`8e9ba62d`](https://github.com/primer/css/commit/8e9ba62d30ed10c012b99dd998751df01ad6aa99) Thanks [@langermank](https://github.com/langermank)! - ActionList followup
* [#1805](https://github.com/primer/css/pull/1805) [`99537d31`](https://github.com/primer/css/commit/99537d317f04ff5474a076ab96d3ea315b2181e2) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Fix local dev (revert webpack 5.5.0 → 6.0.0)
- [#1781](https://github.com/primer/css/pull/1781) [`4d8dcf24`](https://github.com/primer/css/commit/4d8dcf24bc9e0732a9a2f34c94f6bcad7d3382dd) Thanks [@simurai](https://github.com/simurai)! - Reformat `rgba()` colors for `.btn-mktg`
* [#1768](https://github.com/primer/css/pull/1768) [`4abb1af9`](https://github.com/primer/css/commit/4abb1af95b9b3c8c38512fa5e1e4fae9e7d01f4f) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Add disabled states for buttons (and tweak hover)
- [#1792](https://github.com/primer/css/pull/1792) [`b1c43f1f`](https://github.com/primer/css/commit/b1c43f1f8d9b07b58b275665ca69abd5d4f7a5fc) Thanks [@simurai](https://github.com/simurai)! - Use `counter-border` for LHC
* [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
- [#1818](https://github.com/primer/css/pull/1818) [`22c29e7a`](https://github.com/primer/css/commit/22c29e7a8b1b6a0df1dd61d400cc0dd132e0c909) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [Layout component] Avoid resizing `main` while loading
## 19.0.0
### Major Changes
- [#1716](https://github.com/primer/css/pull/1716) [`9b97dc8f`](https://github.com/primer/css/commit/9b97dc8fec28e44d8619aff6da636ecd8e48daf9) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Update marketing buttons (including color mode support)
### Minor Changes
- [#1756](https://github.com/primer/css/pull/1756) [`ece7a3e6`](https://github.com/primer/css/commit/ece7a3e68c65252960b41d6df1b8ff64cb33c93f) Thanks [@heiskr](https://github.com/heiskr)! - Update mark tag to use background-color: var(--color-attention-subtle);
* [#1754](https://github.com/primer/css/pull/1754) [`3838e174`](https://github.com/primer/css/commit/3838e1743aa63bacf0ca241c2a3c4983ba92c5e6) Thanks [@simurai](https://github.com/simurai)! - Add `Box--overlay` styles
- [#1755](https://github.com/primer/css/pull/1755) [`1714778a`](https://github.com/primer/css/commit/1714778af72f5647894fca9561c56dfbccac62df) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating primer/primitives@7.1.0 and adding Light High Contrast theme
### Patch Changes
- [#1746](https://github.com/primer/css/pull/1746) [`9e6b5f56`](https://github.com/primer/css/commit/9e6b5f5671ab60e3a9d452f516fb7b38173f0135) Thanks [@simurai](https://github.com/simurai)! - Remove `Label` bg hack
## 18.2.0
### Minor Changes
- [#1738](https://github.com/primer/css/pull/1738) [`dfe73db1`](https://github.com/primer/css/commit/dfe73db19556c4de8f57c9e610705af0a4d9f0f5) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Update `Layout`'s sidebar width values.
* [#1657](https://github.com/primer/css/pull/1657) [`e7543009`](https://github.com/primer/css/commit/e754300989a4e762091a957edd324b26682b104a) Thanks [@langermank](https://github.com/langermank)! - ActionList Component: Primer CSS Implementation. Adding a new component `ActionList` to learn more checkout the docs [https://primer.style/css/components/action-list](https://primer.style/css/components/action-list).
### Patch Changes
- [#1731](https://github.com/primer/css/pull/1731) [`832e9988`](https://github.com/primer/css/commit/832e99886df66ea5860d725517aeb9d5f178dd58) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/primitives@6.1.0
## 18.1.0
### Minor Changes
- [#1694](https://github.com/primer/css/pull/1694) [`b0e1687a`](https://github.com/primer/css/commit/b0e1687a562a194ed178fd2dd35588ff5da40847) Thanks [@simurai](https://github.com/simurai)! - Add more Octicon icon support to components
* [#1711](https://github.com/primer/css/pull/1711) [`bc3b94d2`](https://github.com/primer/css/commit/bc3b94d26f08f65d3a4938bafa1b988585f35764) Thanks [@simurai](https://github.com/simurai)! - Add new color `Label`s
### Patch Changes
- [#1710](https://github.com/primer/css/pull/1710) [`6a058ecb`](https://github.com/primer/css/commit/6a058ecbaf7edac6fce4a0d56b4aca46ac6cd4fa) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating [@primer/primitives@6.0.0](https://github.com/primer/primitives/releases/tag/v6.0.0)
* [#1712](https://github.com/primer/css/pull/1712) [`bc502033`](https://github.com/primer/css/commit/bc50203324ba03d4ece7ec6182c185a695626ffb) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config to 12.1.0
- [#1708](https://github.com/primer/css/pull/1708) [`f7c44c35`](https://github.com/primer/css/commit/f7c44c35f8085f2b793581a901ecb22c5174ef6a) Thanks [@langermank](https://github.com/langermank)! - Storybook: add Label stories
* [#1690](https://github.com/primer/css/pull/1690) [`af5a3ae8`](https://github.com/primer/css/commit/af5a3ae82668d6d04af8c3465302980dcf062cc4) Thanks [@simurai](https://github.com/simurai)! - Update `Subhead` actions
- [#1707](https://github.com/primer/css/pull/1707) [`a997790b`](https://github.com/primer/css/commit/a997790b69f0f3bb5c7a2dfc97c5d5c743bb6a38) Thanks [@maximedegreve](https://github.com/maximedegreve)! - Fix for disabled Safari inputs
* [#1693](https://github.com/primer/css/pull/1693) [`c1ca19d4`](https://github.com/primer/css/commit/c1ca19d4f071a9b12172e4a13bdb96c52a200d47) Thanks [@jasonmacgowan](https://github.com/jasonmacgowan)! - Fix light-theme attr reference in theme docs
- [#1689](https://github.com/primer/css/pull/1689) [`257f68f6`](https://github.com/primer/css/commit/257f68f6539539ab809fbdb4351aefa57173e044) Thanks [@adityatheoctocatdev](https://github.com/adityatheoctocatdev)! - Update all Toast variant icons to use `var(--color-fg-on-emphasis)`
The only visible change is in the `warning` variant, previously using `var(--color-fg-default)`
## 18.0.2
### Patch Changes
- [#1680](https://github.com/primer/css/pull/1680) [`f013be66`](https://github.com/primer/css/commit/f013be66db59d21d7e2315303b5582169c59c479) Thanks [@privatenumber](https://github.com/privatenumber)! - Fixing broken close span tag in the docs.
* [#1677](https://github.com/primer/css/pull/1677) [`cdb0faa6`](https://github.com/primer/css/commit/cdb0faa606e6fb35ea4a85dd3866bbb33131b76c) Thanks [@simurai](https://github.com/simurai)! - Lower contrast for disabled text
## 18.0.1
### Patch Changes
- [#1663](https://github.com/primer/css/pull/1663) [`87b0b1d4`](https://github.com/primer/css/commit/87b0b1d4c91959c284bd53a2009a182dc9ef9b6e) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the duplicate deprecation backgrounds
## 18.0.0
### Major Changes
- [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing the rem() mixin and usages. Placing the computed values in place.
* [#1615](https://github.com/primer/css/pull/1615) [`612841f1`](https://github.com/primer/css/commit/612841f1bdd695aad2368a9f6817e6e0ee2c7a17) Thanks [@simurai](https://github.com/simurai)! - Update v1 deprecations
- [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename `modes.scss` file to `color-modes.scss` and move from the `base/` folder to the `support/variables` folder.
* [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving color modes to their own bundle, `./color-modes/` and separates color mode themes into their own scss file.
- [#1602](https://github.com/primer/css/pull/1602) [`852da9d5`](https://github.com/primer/css/commit/852da9d5e34a0ac622f089f34d314913282bda67) Thanks [@simurai](https://github.com/simurai)! - Remove V1 color utilities
* [#1617](https://github.com/primer/css/pull/1617) [`e47324fa`](https://github.com/primer/css/commit/e47324faa436e892b8621a6dac1fcb2cbad3cdf1) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing `<kbd>` import from markdown package. Going forward you'll need to include `@primer/css/base/kbd.scss` directly.
- [#1630](https://github.com/primer/css/pull/1630) [`5f7bb45c`](https://github.com/primer/css/commit/5f7bb45c2172393b2f014442067d95b3145c7136) Thanks [@simurai](https://github.com/simurai)! - Update utilities
* [#1599](https://github.com/primer/css/pull/1599) [`13de16c7`](https://github.com/primer/css/commit/13de16c7d6787d221216d8ff21afccf6f73f4221) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove break-word from utilities
### Minor Changes
- [#1601](https://github.com/primer/css/pull/1601) [`410c1d63`](https://github.com/primer/css/commit/410c1d638b7bec92798268dcf815f94b1dca7cff) Thanks [@jonrohan](https://github.com/jonrohan)! - Add light & dark colorblind themes
* [#1626](https://github.com/primer/css/pull/1626) [`4d00d51d`](https://github.com/primer/css/commit/4d00d51d00fd2c1d3efdd50b36e261c5cc15cb10) Thanks [@jonrohan](https://github.com/jonrohan)! - Changing to @primer/stylelint-config and upgrading @primer/primitives to 5.0 rc
- [#1616](https://github.com/primer/css/pull/1616) [`afac04bc`](https://github.com/primer/css/commit/afac04bcdf9c59e2768548069c8d6f7fd6f1e58c) Thanks [@talum](https://github.com/talum)! - Adding footnote styles to markdown-body.
* [#1617](https://github.com/primer/css/pull/1617) [`e47324fa`](https://github.com/primer/css/commit/e47324faa436e892b8621a6dac1fcb2cbad3cdf1) Thanks [@jonrohan](https://github.com/jonrohan)! - Convert postcss build tool, from node-sass to dart-sass.
- [#1603](https://github.com/primer/css/pull/1603) [`21c5ebc0`](https://github.com/primer/css/commit/21c5ebc01be58454735eb671e3adace0228ef548) Thanks [@simurai](https://github.com/simurai)! - Update docs with V2 colors
### Patch Changes
- [#1628](https://github.com/primer/css/pull/1628) [`ce197c9f`](https://github.com/primer/css/commit/ce197c9ff18cedd842893186953b68805eed637d) Thanks [@edokoa](https://github.com/edokoa)! - Update flash alert icons
* [#1629](https://github.com/primer/css/pull/1629) [`54d3068b`](https://github.com/primer/css/commit/54d3068bd628f771aacae6b1ce269a5a2cc2d8a1) Thanks [@jdanyow](https://github.com/jdanyow)! - remove remaining color-border-primary refs
- [#1631](https://github.com/primer/css/pull/1631) [`5f3689b9`](https://github.com/primer/css/commit/5f3689b907163f7be9e78abb9fc762978beda06d) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating @primer/stylelint-config and @primer/primitives to 5.0
* [#1659](https://github.com/primer/css/pull/1659) [`d32e42f9`](https://github.com/primer/css/commit/d32e42f9ca0ca4eef546d190171cd9e5b4ec8f3d) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename protanopia themes to colorblind.
- [#1658](https://github.com/primer/css/pull/1658) [`0ed0307b`](https://github.com/primer/css/commit/0ed0307b7b79ae59a898c3e8b5e1c9bd2dcd4a7d) Thanks [@koddsson](https://github.com/koddsson)! - Increase the z-index value for the details dialog overlay.
* [#1661](https://github.com/primer/css/pull/1661) [`ebb573ff`](https://github.com/primer/css/commit/ebb573ff09a5ea4eef01e0ccbb7213defaa95321) Thanks [@simurai](https://github.com/simurai)! - Update bg deprecations
## 17.11.0
### Minor Changes
- [#1580](https://github.com/primer/css/pull/1580) [`4a1f09a7`](https://github.com/primer/css/commit/4a1f09a75e7666b46e68e96e6f485d9ff467fd01) Thanks [@simurai](https://github.com/simurai)! - Add V2 utilities
* [#1595](https://github.com/primer/css/pull/1595) [`5fb831cf`](https://github.com/primer/css/commit/5fb831cf5062baa4ffde4322a0035c144db1e70c) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding directional margin classes to the margin utilities.
Adding: `ml-auto, mb-auto, mr-auto`
### Patch Changes
- [#1594](https://github.com/primer/css/pull/1594) [`2cf661c4`](https://github.com/primer/css/commit/2cf661c4d95285d09d0f26ea6109d5aa9bbed552) Thanks [@jonrohan](https://github.com/jonrohan)! - Loosening the primer/primitives dependency to any minor.patch version
## 17.10.0
### Minor Changes
- [#1592](https://github.com/primer/css/pull/1592) [`39c9c928`](https://github.com/primer/css/commit/39c9c92874eb32b346256cbcc713b87767b319ef) Thanks [@simurai](https://github.com/simurai)! - Revert font stack changes
### Patch Changes
- [#1590](https://github.com/primer/css/pull/1590) [`e3c8f90e`](https://github.com/primer/css/commit/e3c8f90e7f61e76d20650061da2dd93111814a8a) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Update Breadcrumbs markup to match w3 aria example.
## 17.9.0
### Minor Changes
- [#1575](https://github.com/primer/css/pull/1575) [`c7ea6448`](https://github.com/primer/css/commit/c7ea6448c114065627299db7ba65418799d4a59b) Thanks [@jonrohan](https://github.com/jonrohan)! - Replacing deprecated variables with color v2 variables
* [#1573](https://github.com/primer/css/pull/1573) [`386dfa01`](https://github.com/primer/css/commit/386dfa0145a64e2c6edbdf8ab09d9fc3f7151f6a) Thanks [@simurai](https://github.com/simurai)! - Improve the font stack on Windows
- `Segoe UI Variable` -> `Segoe UI Variable Text`.
- "Segoe UI Variable Text" seems to be the better option for a lot of text (markdown). In the future we might can consider having a UI and a "text" font stack.
- Add `Meiryo` before `system-ui`.
- This should have the effect that the browser will use `Meiryo` instead of `Yu Gothic UI` and should improve font rendering, especially for Japanese.
- Note: In an earlier version, `Yu Gothic` was used. But with great [feedback](https://twitter.com/448jp/status/1435087523185758212) from @448jp and @hiloki https://github.com/primer/css/pull/1573#issuecomment-913973890 it seems `Meiryo` is the better default.
- [#1581](https://github.com/primer/css/pull/1581) [`be518b80`](https://github.com/primer/css/commit/be518b8023b56802b1fc67ccc8a5b8398d1b279c) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating deprecations.js file to be more straightforward
* [#1579](https://github.com/primer/css/pull/1579) [`c3b4a0c3`](https://github.com/primer/css/commit/c3b4a0c36302af7bb06ca996f37a63470ab99c62) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing v2 color mode css var fallbacks. `var(--color-v2, var(--color-v1))` becomes `var(--color-v2)`
## 17.8.0
### Minor Changes
- [#1567](https://github.com/primer/css/pull/1567) [`ab72486f`](https://github.com/primer/css/commit/ab72486f62d0f7e2397e3f0953fbcc4c46f5ef25) Thanks [@colebemis](https://github.com/colebemis)! - Remove `base/modes-v2.scss` file
* [#1567](https://github.com/primer/css/pull/1567) [`ab72486f`](https://github.com/primer/css/commit/ab72486f62d0f7e2397e3f0953fbcc4c46f5ef25) Thanks [@colebemis](https://github.com/colebemis)! - Bumps `@primer/primitives` to [v4.7.0](https://github.com/primer/primitives/releases/tag/v4.7.0) which includes new [functional color system variables]
- [#1567](https://github.com/primer/css/pull/1567) [`ab72486f`](https://github.com/primer/css/commit/ab72486f62d0f7e2397e3f0953fbcc4c46f5ef25) Thanks [@colebemis](https://github.com/colebemis)! - Output `dark_high_contrast` theme variables from `base/modes.scss`
## 17.7.0
### Minor Changes
- [#1555](https://github.com/primer/css/pull/1555) [`4ae2174e`](https://github.com/primer/css/commit/4ae2174e33d3bd9be418176af4de75dd97b761c5) Thanks [@jonrohan](https://github.com/jonrohan)! - Add `.wb-break-word` class to existing `.break-word`
### Patch Changes
- [#1563](https://github.com/primer/css/pull/1563) [`679d70b5`](https://github.com/primer/css/commit/679d70b579c5203079e6a0559fe9dccbfcf0acae) Thanks [@simurai](https://github.com/simurai)! - Revert `TimelineItem-badge` fix
## 17.6.2
### Patch Changes
- [#1556](https://github.com/primer/css/pull/1556) [`3ad13aba`](https://github.com/primer/css/commit/3ad13abac3deccc768af0ba5eb90f1365eb977f3) Thanks [@simurai](https://github.com/simurai)! - Fix TimelineItem--condensed background
* [#1552](https://github.com/primer/css/pull/1552) [`966de4ee`](https://github.com/primer/css/commit/966de4ee0f1cfcd5f5a9f75560460adaafd47f06) Thanks [@simurai](https://github.com/simurai)! - Fix `code` in headers
## 17.6.1
### Patch Changes
- [#1550](https://github.com/primer/css/pull/1550) [`8a684ee4`](https://github.com/primer/css/commit/8a684ee4d1572de543aef2f11d4756f6fdfda638) Thanks [@simurai](https://github.com/simurai)! - Add gradient hack to TimelineItem-badge
## 17.6.0
### Minor Changes
- [#1529](https://github.com/primer/css/pull/1529) [`dca8e0ae`](https://github.com/primer/css/commit/dca8e0aeccb326c2bafff1ec86a912987b224f32) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Improve font rendering on Linux
### Patch Changes
- [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses.
* [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module
## 17.5.2
### Patch Changes
- [#1519](https://github.com/primer/css/pull/1519) [`8bfe2b7e`](https://github.com/primer/css/commit/8bfe2b7e410bb2a9e5f5d480b36ef885be1d98da) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix bug where outline was showing up on hover
* [#1525](https://github.com/primer/css/pull/1525) [`06f83622`](https://github.com/primer/css/commit/06f8362209ccb9d0bf8cc47f9ef76a1237a2dfd0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Render `code` at 100% font size irregardless of direct descension from `pre`.
## 17.5.1
### Patch Changes
- [#1517](https://github.com/primer/css/pull/1517) [`7011d046`](https://github.com/primer/css/commit/7011d0469ee012b93a29eff5c4f0f45357aa02fc) Thanks [@simurai](https://github.com/simurai)! - Remove background from .note
## 17.5.0
### Minor Changes
- [#1506](https://github.com/primer/css/pull/1506) [`13cda226`](https://github.com/primer/css/commit/13cda22638cefe6847b1d718ba87a3f62a8ec3bb) Thanks [@jonrohan](https://github.com/jonrohan)! - Creating `.Header-input` class for dark header inputs. This `Header-input` will be used with a `form-control` class.
### Patch Changes
- [#1507](https://github.com/primer/css/pull/1507) [`30523d64`](https://github.com/primer/css/commit/30523d6436e7ea06fa511fa9ba8407429e667b42) Thanks [@simurai](https://github.com/simurai)! - Fix form tooltip transparency
* [#1510](https://github.com/primer/css/pull/1510) [`d1ea5c2c`](https://github.com/primer/css/commit/d1ea5c2c738ae4763dadf7994a9e78c196842bc3) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding focus outline to the invisible buttons `.btn-invisible` and `.close-button`.
## 17.4.0
### Minor Changes
- [#1497](https://github.com/primer/css/pull/1497) [`84bbd501`](https://github.com/primer/css/commit/84bbd501a41c455031d4a1b4d25df6fc6db6e1d8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Add font-weight-medium to marketing styles, and use it in the type scale.
* [#1487](https://github.com/primer/css/pull/1487) [`0298b69b`](https://github.com/primer/css/commit/0298b69bda4c25ed252fbeb6ba2e3fcf4ff096d2) Thanks [@arzg](https://github.com/arzg)! - Move Menlo before Consolas in monospace font stack
### Patch Changes
- [#1483](https://github.com/primer/css/pull/1483) [`84488397`](https://github.com/primer/css/commit/84488397f4a7bce115e2c81b388de959fff20296) Thanks [@jonrohan](https://github.com/jonrohan)! - Make sure truncate is a direct child
* [#1486](https://github.com/primer/css/pull/1486) [`f52d40cc`](https://github.com/primer/css/commit/f52d40cce57bca5a713d0b9d1136f144577cf66d) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Prevents main content to blowout and cause an horizontal scroll
- [#1488](https://github.com/primer/css/pull/1488) [`c345bd38`](https://github.com/primer/css/commit/c345bd3819cf8d42552409baf3ec4ccb59c50107) Thanks [@cheshire137](https://github.com/cheshire137)! - Fix unreadable text when utility is used in dropdown item.
* [#1501](https://github.com/primer/css/pull/1501) [`e072734a`](https://github.com/primer/css/commit/e072734aa18813622ea22e8f9c3e602ec7309105) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Documentation: Remove deprecated faded borders documentation
- [#1472](https://github.com/primer/css/pull/1472) [`8541ed1d`](https://github.com/primer/css/commit/8541ed1db1e0d9c4551ea76ba400d6d0cf682897) Thanks [@simurai](https://github.com/simurai)! - Use variable for the active border of the UnderlineNav
* [#1475](https://github.com/primer/css/pull/1475) [`105296c6`](https://github.com/primer/css/commit/105296c6b4b33d9e84038173bf9af09889a99dcd) Thanks [@simurai](https://github.com/simurai)! - Make `TimelineItem-badge--success` ready for Color Modes V2
- [#1452](https://github.com/primer/css/pull/1452) [`8838a3ac`](https://github.com/primer/css/commit/8838a3ac48ec1589594291313349f49737317b5d) Thanks [@mktcode](https://github.com/mktcode)! - Division using / is deprecated. Replaced it with multiplications.
* [#1499](https://github.com/primer/css/pull/1499) [`2e580a7e`](https://github.com/primer/css/commit/2e580a7ed46fb06786b84f5b1900c8e0cd7450f5) Thanks [@mjacobus](https://github.com/mjacobus)! - Fix label contrast when inside a dropdown
## 17.3.0
### Minor Changes
- [#1451](https://github.com/primer/css/pull/1451) [`9181b479`](https://github.com/primer/css/commit/9181b479a812bf0b4cbf89d838abf53ffba7932d) Thanks [@simurai](https://github.com/simurai)! - Support SF Mono font in Firefox and Safari
* [#1441](https://github.com/primer/css/pull/1441) [`3b552c77`](https://github.com/primer/css/commit/3b552c77af931ba67920a97dbea59acf5d800335) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding anim-hover-grow to replace hover-grow
### Patch Changes
- [#1450](https://github.com/primer/css/pull/1450) [`1d366c4b`](https://github.com/primer/css/commit/1d366c4b2c11f9541063bb62e7a8ad389b3d6567) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding fill mode forwards to anim-fade-out
* [#1448](https://github.com/primer/css/pull/1448) [`8175f884`](https://github.com/primer/css/commit/8175f884474b5e5139cb1647df71200a69c48535) Thanks [@simurai](https://github.com/simurai)! - Replace auto and fade variables
- [#1432](https://github.com/primer/css/pull/1432) [`55ca5f2f`](https://github.com/primer/css/commit/55ca5f2f7300e016516f9457248b055b2c56f7fd) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Fix Layout ordering when using dividers with custom sidebar placement
* [#1443](https://github.com/primer/css/pull/1443) [`c65b5f9c`](https://github.com/primer/css/commit/c65b5f9cf01f024f5f7120a5e80c2acd1d2584f6) Thanks [@jdanyow](https://github.com/jdanyow)! - Fix octicon color for disabled .btn-danger
- [#1442](https://github.com/primer/css/pull/1442) [`6c22133a`](https://github.com/primer/css/commit/6c22133ae1652bafb16ba443169c179b95bf4330) Thanks [@jdanyow](https://github.com/jdanyow)! - Fix octicon color for disabled .btn-primary
## 17.2.1
### Patch Changes
- [#1430](https://github.com/primer/css/pull/1430) [`5bc54f9e`](https://github.com/primer/css/commit/5bc54f9e3b5e764e44f34072a00208870c518f11) Thanks [@jonrohan](https://github.com/jonrohan)! - Revert "Support SF Mono font in Firefox and Safari"
## 17.2.0
### Minor Changes
- [#992](https://github.com/primer/css/pull/992) [`90f95693`](https://github.com/primer/css/commit/90f95693f5cbfb9f6b7b84735bf5dce2e382601b) Thanks [@simurai](https://github.com/simurai)! - Support SF Mono font in Firefox & Safari
### Patch Changes
- [#1423](https://github.com/primer/css/pull/1423) [`6f79bfaa`](https://github.com/primer/css/commit/6f79bfaa7a6fab551fe3e795eda24908c2bf0d2e) Thanks [@jonrohan](https://github.com/jonrohan)! - Properly calculating the variables computed value for dist folder
* [#1427](https://github.com/primer/css/pull/1427) [`6dad1784`](https://github.com/primer/css/commit/6dad17845f1ea345c692f56ecbf8edd60187f80d) Thanks [@jonrohan](https://github.com/jonrohan)! - Don't require direct version of primitives
- [#1422](https://github.com/primer/css/pull/1422) [`882c570f`](https://github.com/primer/css/commit/882c570f9ac38dc213e213b2e98ef4686eb693e2) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Improve dividers and allow sidebar positioning when `Layout` is flowing as row.
* [#1420](https://github.com/primer/css/pull/1420) [`55302dc2`](https://github.com/primer/css/commit/55302dc232cb5cd28c52047a0776549f298a90ce) Thanks [@hpalacio](https://github.com/hpalacio)! - lists.scss: reset `<ol>` without 'type' attr to "decimal"
- [#1424](https://github.com/primer/css/pull/1424) [`30597af9`](https://github.com/primer/css/commit/30597af94da40875a2741f9f4ecc786f8916167c) Thanks [@khiga8](https://github.com/khiga8)! - Ensures that the visual slash separator for breadcrumbs is not announced by screenreaders.
## 17.1.1
### Patch Changes
- [#1418](https://github.com/primer/css/pull/1418) [`a9a61ee6`](https://github.com/primer/css/commit/a9a61ee690f4fff3a7e2e932dc8da5e9cd6cf702) Thanks [@simurai](https://github.com/simurai)! - Undeprecate .css-truncate
## 17.1.0
### Minor Changes
- [#1409](https://github.com/primer/css/pull/1409) [`49981dfc`](https://github.com/primer/css/commit/49981dfc29131e6ad25cef6538abd9308700b48a) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Adding new Layout component
* [#1358](https://github.com/primer/css/pull/1358) [`6b51e877`](https://github.com/primer/css/commit/6b51e877bc3b1a1ae4925edc4fcb5d45907b110e) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding new .Truncate class and deprecating css-truncate
### Patch Changes
- [#1415](https://github.com/primer/css/pull/1415) [`fb6a7e3d`](https://github.com/primer/css/commit/fb6a7e3dc112fc637003ca13dca978e7d8a54d4c) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives@4.3.5
## 17.0.3
### Patch Changes
- [#1410](https://github.com/primer/css/pull/1410) [`d5e425e4`](https://github.com/primer/css/commit/d5e425e40900102b5b728a516de71e4094b7e138) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives@4.3.4
## 17.0.2
### Patch Changes
- [#1408](https://github.com/primer/css/pull/1408) [`1eea5575`](https://github.com/primer/css/commit/1eea557506241412de068c0f2570a0e9606fd6c2) Thanks [@colebemis](https://github.com/colebemis)! - Bump @primer/primitives version
* [#1403](https://github.com/primer/css/pull/1403) [`5ef399cf`](https://github.com/primer/css/commit/5ef399cff004fc30d0b98750af889ffdc4bf8f3b) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Remove !important for base styles for body utilities
## 17.0.1
### Patch Changes
- [#1391](https://github.com/primer/css/pull/1391) [`534c8f66`](https://github.com/primer/css/commit/534c8f66f5a433aaf6daa308e0354d8eeca25f3a) Thanks [@simurai](https://github.com/simurai)! - Improve focus state for .SideNav and .menu
* [#1398](https://github.com/primer/css/pull/1398) [`5ef7bd6e`](https://github.com/primer/css/commit/5ef7bd6ef0eb43f2bb5765c0f3cfd30db3924ec4) Thanks [@colebemis](https://github.com/colebemis)! - Add experimental color variables. **Warning: Do not use these color variables**
- [#1394](https://github.com/primer/css/pull/1394) [`42223f0b`](https://github.com/primer/css/commit/42223f0b219b6213e2d11f99988acdfd47ab9591) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Fix letter spacing for headers not being correctly overridden at break points
## 17.0.0
### Major Changes
- [#1370](https://github.com/primer/css/pull/1370) [`cc0049c2`](https://github.com/primer/css/commit/cc0049c2ad1ad609dc672e12f751245fbecc5d65) Thanks [@simurai](https://github.com/simurai)! - Replace border-overlay with border-primary
* [#1371](https://github.com/primer/css/pull/1371) [`0c6bfc22`](https://github.com/primer/css/commit/0c6bfc22b523545120bea39dc201760d8a9e8b01) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Deprecate bg-shade-gradient
- [#1379](https://github.com/primer/css/pull/1379) [`22a98b5c`](https://github.com/primer/css/commit/22a98b5c87031584c5349f49835e013e8a7e460b) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Add new marketing type scale
* [#1369](https://github.com/primer/css/pull/1369) [`2ae2ae57`](https://github.com/primer/css/commit/2ae2ae5795f68a6004fb4a14eb56bba41828173d) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Removing Inter font files and folder
- [#1339](https://github.com/primer/css/pull/1339) [`0ca2648e`](https://github.com/primer/css/commit/0ca2648e5982f0d21137a556e083d77af33eee36) Thanks [@jonrohan](https://github.com/jonrohan)! - Changeset change supported browsers.
* [#1373](https://github.com/primer/css/pull/1373) [`aeae963d`](https://github.com/primer/css/commit/aeae963d93e273f08fbf47d582316811bbd8eac5) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Remove redundant marketing layout selectors
- [#1380](https://github.com/primer/css/pull/1380) [`4ac39740`](https://github.com/primer/css/commit/4ac39740f27842c625da084f1d03b8e2ec6084f8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: use size modifiers that don't look like breakpoints modifiers
* [#1352](https://github.com/primer/css/pull/1352) [`b4950e39`](https://github.com/primer/css/commit/b4950e395867b558e63b5bb4d46d93f75f35e38e) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Update marketing button styles
- [#1356](https://github.com/primer/css/pull/1356) [`3b7e5d8c`](https://github.com/primer/css/commit/3b7e5d8c0def7975cc6714abe4b60d8efc746f8f) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove dependency on primer/octicons and force overflow visible
* [#1372](https://github.com/primer/css/pull/1372) [`e24b7cb0`](https://github.com/primer/css/commit/e24b7cb024ca2c6bb06cda92ccefa1aff3208131) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Merge overlapping marketing spacing utilities into primer core
### Minor Changes
- [#1357](https://github.com/primer/css/pull/1357) [`3dfb910f`](https://github.com/primer/css/commit/3dfb910fc39ae889fb4c2c3c783aead6ac768d0d) Thanks [@hpalacio](https://github.com/hpalacio)! - typography-base: process 'type' attribute of HTML <ol> tag
### Patch Changes
- [#1368](https://github.com/primer/css/pull/1368) [`95b9f0f0`](https://github.com/primer/css/commit/95b9f0f051bf34be5bcc60e2f2d29a262059c420) Thanks [@simurai](https://github.com/simurai)! - Use `--color-icon-secondary` for `.blankslate-icon`
* [#1350](https://github.com/primer/css/pull/1350) [`2dbc6143`](https://github.com/primer/css/commit/2dbc6143a66b56b29e12d5ae3e7afeaed95373ab) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives
- [#1385](https://github.com/primer/css/pull/1385) [`1cfff7a4`](https://github.com/primer/css/commit/1cfff7a4a39e5612c3f98357bfa2edc1460f2e04) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing typography: 64px → 68px for third size step
* [#1382](https://github.com/primer/css/pull/1382) [`18bb377b`](https://github.com/primer/css/commit/18bb377bef8f65cc75cd1faea9b2264a4061cfd0) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: optimize body typography inheritance
- [#1392](https://github.com/primer/css/pull/1392) [`0fea11a7`](https://github.com/primer/css/commit/0fea11a74b05196c17e2e300b66c93c24d6c9844) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Enable body content utilities to have their font-weight overwritten
## 16.3.0
### Minor Changes
- [#1306](https://github.com/primer/css/pull/1306) [`5d42f1c5`](https://github.com/primer/css/commit/5d42f1c5c36d9732fd69541585a8d8ba4221b978) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding a min-height to input-sm
### Patch Changes
- [#1340](https://github.com/primer/css/pull/1340) [`8506c374`](https://github.com/primer/css/commit/8506c3747fc3d4bfa216e0fbb1d2835db4a9baf4) Thanks [@simurai](https://github.com/simurai)! - Bump @primer/primitives
* [#1302](https://github.com/primer/css/pull/1302) [`90902e1a`](https://github.com/primer/css/commit/90902e1a6044f4b9fde049105f5aec7e09d52777) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving the /fonts/ folder to /src/fonts/
## 16.2.0
### Minor Changes
- [#1294](https://github.com/primer/css/pull/1294) [`7609a074`](https://github.com/primer/css/commit/7609a0742cbb69b2c48af5a2d583c94a14a2d0c6) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding a color text link on hover that will change a color utility class
* [#1295](https://github.com/primer/css/pull/1295) [`fea6ea69`](https://github.com/primer/css/commit/fea6ea692013cbf13b4d93dff1601bb0805beb73) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding text-semibold and text-light utility classes
### Patch Changes
- [#1297](https://github.com/primer/css/pull/1297) [`7a374784`](https://github.com/primer/css/commit/7a37478499c6dbdd30082442abec9dccdfc9efa4) Thanks [@simurai](https://github.com/simurai)! - Separate active and selected states for `.btn`
## 16.1.2
### Patch Changes
- [#1282](https://github.com/primer/css/pull/1282) [`5ee52dfe`](https://github.com/primer/css/commit/5ee52dfe59f1b209ca6c1f2489db0e32660388e9) Thanks [@simurai](https://github.com/simurai)! - Add bg to UnderlineNav Counter
* [#1286](https://github.com/primer/css/pull/1286) [`9044eecf`](https://github.com/primer/css/commit/9044eecf4ef7a1c6ad9ccf0b51def53c52d0def4) Thanks [@jonrohan](https://github.com/jonrohan)! - color-mode mixin fix for keyboard toggle
## 16.1.1
### Patch Changes
- [#1278](https://github.com/primer/css/pull/1278) [`fa4a7c71`](https://github.com/primer/css/commit/fa4a7c714c2666cd339dbf4c77b684e67030af60) Thanks [@jonrohan](https://github.com/jonrohan)! - revert Fixing workflow for rc publishing
## 16.1.0
### Minor Changes
- [#1254](https://github.com/primer/css/pull/1254) [`5d2f0beb`](https://github.com/primer/css/commit/5d2f0beb58b6fab795d5b720e9a14da2f649265c) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Add common marketing utilities to primer/marketing
* [#1201](https://github.com/primer/css/pull/1201) [`29a83bdc`](https://github.com/primer/css/commit/29a83bdcfdc3d647932bfe97c9b3f24f91688280) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Change TableObject status to deprecated
### Patch Changes
- [#1197](https://github.com/primer/css/pull/1197) [`a355160a`](https://github.com/primer/css/commit/a355160a30654327f9e51bf677f9b069a46e95a1) Thanks [@neildaniels](https://github.com/neildaniels)! - Fix .btn-with-count documentation
* [#1274](https://github.com/primer/css/pull/1274) [`322379fe`](https://github.com/primer/css/commit/322379fe273c53c94190177b62dd5deed10beb32) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing buttons: don't animate everything
- [#1272](https://github.com/primer/css/pull/1272) [`88bcd1bf`](https://github.com/primer/css/commit/88bcd1bfd0258c416addf4c943dfbde593a11b7f) Thanks [@simurai](https://github.com/simurai)! - Update `Counter--secondary` bg
* [#1261](https://github.com/primer/css/pull/1261) [`b1346678`](https://github.com/primer/css/commit/b1346678f4119f384ac49b0c63c355f56968071a) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing the `color-mode-theme` mixin. Currently the mixin doesn't take into account when `mode="light"` and `light-theme="dark"`. This fix allows dark themes to be set as light themes and to toggle into single light mode.
## 16.0.2
### Patch Changes
- [#1258](https://github.com/primer/css/pull/1258) [`c6945cd5`](https://github.com/primer/css/commit/c6945cd50c297b621a69aecb619440bfb2bf4c32) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing post publish storybook hook
## 16.0.1
### Patch Changes
- [#1247](https://github.com/primer/css/pull/1247) [`1b6ba39c`](https://github.com/primer/css/commit/1b6ba39c733433fc5488d60b0b8b384b6d2b4d7d) Thanks [@jonrohan](https://github.com/jonrohan)! - Adding changesets to release workflow
## 16.0.0
### :boom: Breaking Change
- Update to Primer Primitives `4.0.0` [primer/primitives#43](https://github.com/primer/primitives/pull/43)
- Add color modes [#1131](https://github.com/primer/css/pull/1131)
### :rocket: Enhancement
- Add `flex-shrink: 0` to `.avatar` [#1183](https://github.com/primer/css/pull/1183)
- Adding timeline-badge success border [#1246](https://github.com/primer/css/pull/1246)
- Add `.anim-rotate` utility class [#1251](https://github.com/primer/css/pull/1251)
### :nail_care: Polish
- Move marketing `@font-face` declarations from vars to type [#1238](https://github.com/primer/css/pull/1238)
### :memo: Documentation
- Update documentation with color modes [#1186](https://github.com/primer/css/pull/1186)
## 15.2.0
### :rocket: Enhancements
- [#1145](https://github.com/primer/css/pull/1145) Make final position responsive
- [#1148](https://github.com/primer/css/pull/1148) flex wrap reverse added
- [#1157](https://github.com/primer/css/pull/1157) Overflow responsive variants
- [#1156](https://github.com/primer/css/pull/1156) Add missing rounded-3 utility
### :memo: Documentation
- [#1160](https://github.com/primer/css/pull/1160) Remove custom emoji from SelectMenu docs
- [#1165](https://github.com/primer/css/pull/1165) Replaced old octicons in examples
- [#1146](https://github.com/primer/css/pull/1146) Corrected a few typos
- [#1142](https://github.com/primer/css/pull/1142) Fix typo in Box documentation
- [#1125](https://github.com/primer/css/pull/1125) Remove reference to Crema
- [#1155](https://github.com/primer/css/pull/1155) Place search subnav example on new line
### :nail_care: Polish
- [#1147](https://github.com/primer/css/pull/1147) Increase input font-size on iOS
- [#1152](https://github.com/primer/css/pull/1152) Remove .autocomplete-results inset border that is occluded by items
### Committers
- [@MauricioHernanCabrera](https://github.com/MauricioHernanCabrera)
- [@ashygee](https://github.com/ashygee)
- [@esdraspavon](https://github.com/esdraspavon)
- [@neildaniels](https://github.com/neildaniels)
- [@nicksloan](https://github.com/nicksloan)
## 15.1.0
### :rocket: Enhancements
- [#1062](https://github.com/primer/css/pull/1062) Make tabnav responsive
- [#1128](https://github.com/primer/css/pull/1128) Add support for table border
- [#1132](https://github.com/primer/css/pull/1132) Add .bg-orange to the list of colors
### :memo: Documentation
- [#1122](https://github.com/primer/css/pull/1122) fix comment typo
### :nail_care: Polish
- [#1121](https://github.com/primer/css/pull/1121) Update layout when the Counter is empty
- [#1126](https://github.com/primer/css/pull/1126) Increase border contrast for Label--yellow
### Committers
- [@colinkeany](https://github.com/colinkeany)
- [@garman](https://github.com/garman)
- [@nikolasveneti](https://github.com/nikolasveneti)
- [@nuthinking](https://github.com/nuthinking)
- [@simurai](https://github.com/simurai)
## 15.0.0
### :rocket: Enhancements
- [#1116](https://github.com/primer/css/pull/1116) Improve accessibility
- [#1083](https://github.com/primer/css/pull/1083) Make sure autocomplete resets button styles
- [#1074](https://github.com/primer/css/pull/1074) Update pagination
- [#1071](https://github.com/primer/css/pull/1071) Update flash alert
- [#1064](https://github.com/primer/css/pull/1064) Update SelectMenu
- [#1040](https://github.com/primer/css/pull/1040) Update box-shadow and borders
- [#1038](https://github.com/primer/css/pull/1038) Update navigation
- [#1034](https://github.com/primer/css/pull/1034) Update labels
- [#1029](https://github.com/primer/css/pull/1029) Update inputs
- [#1027](https://github.com/primer/css/pull/1027) Update buttons
- [#1022](https://github.com/primer/css/pull/1022) Update border radius
### :nail_care: Polish
- [#1109](https://github.com/primer/css/pull/1109) Polish 9
- [#1090](https://github.com/primer/css/pull/1090) Polish 8
- [#1077](https://github.com/primer/css/pull/1077) Polish 7
- [#1055](https://github.com/primer/css/pull/1055) Polish 3
- [#1047](https://github.com/primer/css/pull/1047) Polish 2
- [#1045](https://github.com/primer/css/pull/1045) Polish 1
- [#1041](https://github.com/primer/css/pull/1041) Polish
### Committers
- [@muan](https://github.com/muan)
- [@simurai](https://github.com/simurai)
## 14.4.0
### :rocket: Enhancements
- [#1089](https://github.com/primer/css/pull/1089) Accessible Progress
### :bug: Bug fixes
- [#1060](https://github.com/primer/css/pull/1060) Add support for aria-current=false
### :memo: Documentation
- [#1059](https://github.com/primer/css/pull/1059) Typo in scss.md
- [#1065](https://github.com/primer/css/pull/1065) Convert markdown page to one big example
- [#1075](https://github.com/primer/css/pull/1075) chore: add missing link to color utilities
- [#1067](https://github.com/primer/css/pull/1067) Add .text-gray-light to docs
### Committers
- [@daniseguraf](https://github.com/daniseguraf)
- [@metonym](https://github.com/metonym)
- [@simurai](https://github.com/simurai)
## 14.3.0
### :rocket: Enhancements
- [#1044](https://github.com/primer/css/pull/1044) Accessible form validation
- [#1028](https://github.com/primer/css/pull/1028) Improve .form-group accessibility
### :bug: Bug fixes
- [#670](https://github.com/primer/css/pull/670) Fix Box row top border
- [#1042](https://github.com/primer/css/pull/1042) Fix UnderlineNav in Safari
- [#1035](https://github.com/primer/css/pull/1035) Update UnderlineNav-item to not wrap counter & icon
### :memo: Documentation
- [#1018](https://github.com/primer/css/pull/1018) Update MIGRATING.md
### Committers
- [@emplums](https://github.com/emplums)
- [@jonrohan](https://github.com/jonrohan)
- [@simurai](https://github.com/simurai)
## 14.2.0
### :rocket: Enhancements
- [#1006](https://github.com/primer/css/pull/1006) Use ARIA attributes for states
- [#1014](https://github.com/primer/css/pull/1014) Add aria-disabled state
- [#1001](https://github.com/primer/css/pull/1001) Add Inter bold font file
- [#982](https://github.com/primer/css/pull/982) Applies .selected styles to [aria-selected=true]
### :bug: Bug fixes
- [#1002](https://github.com/primer/css/pull/1002) Fix marketing utilities
- [#1005](https://github.com/primer/css/pull/1005) Add .selected back to the .UnderlineNav
### :memo: Documentation
- [#1012](https://github.com/primer/css/pull/1012) Improve margin/padding docs
- [#1013](https://github.com/primer/css/pull/1013) Fix docs links
- [#1004](https://github.com/primer/css/pull/1004) rm deprecated flash-banner component from docs
### Committers
- [@flavianunes](https://github.com/flavianunes)
- [@ktravers](https://github.com/ktravers)
- [@simurai](https://github.com/simurai)
## 14.1.0
### :rocket: Enhancements
- [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities
- [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables
### :bug: Bug fixes
- [#998](https://github.com/primer/css/pull/998) Use a gray background when hovering SelectMenu items
### :memo: Documentation
- [#989](https://github.com/primer/css/pull/989) Add link to the Stylelint guide
- [#1000](https://github.com/primer/css/pull/1000) Update contributing guide for a general audience
- [#972](https://github.com/primer/css/pull/972) Variables page
### :house: Internal
- [#997](https://github.com/primer/css/pull/997) Fix CHANGELOG links
### Committers
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
- [@skullface](https://github.com/skullface)
## 14.0.0
### :boom: Breaking changes
- [#922](https://github.com/primer/css/pull/922) More SelectMenu improvements
- [#966](https://github.com/primer/css/pull/966) Rename `.flex-item-equal` to `.flex-1`
- [#973](https://github.com/primer/css/pull/973) Deprecate variables in 14.0.0
### :rocket: Enhancements
- [#987](https://github.com/primer/css/pull/987) Add .position-sticky utility
- [#979](https://github.com/primer/css/pull/979) Add `.radio-group` component
- [#981](https://github.com/primer/css/pull/981) Autocomplete + Suggester components
- [#978](https://github.com/primer/css/pull/978) Add `.css-truncate-overflow`
- [#974](https://github.com/primer/css/pull/974) Add Animated Ellipsis
- [#971](https://github.com/primer/css/pull/971) Add variable deprecation data and tests
### :memo: Documentation
- [#988](https://github.com/primer/css/pull/988) Add docs for flexbug no. 9
- [#977](https://github.com/primer/css/pull/977) Update spacing.md
### :house: Internal
- [#952](https://github.com/primer/css/pull/952) Async/awaitify script/dist.js
- [#963](https://github.com/primer/css/pull/963) Generate changelog with semantic-release
- [#968](https://github.com/primer/css/pull/968) Stylelint update
### Committers
- [@BinaryMuse](https://github.com/BinaryMuse)
- [@danchristian](https://github.com/danchristian)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 13.2.0
### :rocket: Enhancements
- [#959](https://github.com/primer/css/pull/959) More buttons
- [#950](https://github.com/primer/css/pull/950) Add Diffstat component
- [#913](https://github.com/primer/css/pull/913) Importing TimelineItem from .com and creating matching docs
- [#953](https://github.com/primer/css/pull/953) Add IssueLabel component
### :bug: Bug fixes
- [#945](https://github.com/primer/css/pull/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected`
### :memo: Documentation
- [#939](https://github.com/primer/css/pull/939) Fix `Box--overlay` example
- [#943](https://github.com/primer/css/pull/943) Fix broken links to typography utilities
### :house: Internal
- [#946](https://github.com/primer/css/pull/946) Add `TODO@version` stylelint rule (local)
### Committers
- [@MohamedElidrissi](https://github.com/MohamedElidrissi)
- [@jonrohan](https://github.com/jonrohan)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 13.1.0
### :rocket: Enhancement
- [#904](https://github.com/primer/css/pull/904) Add Keyboard Shortcuts `kbd` from github/github
- [#926](https://github.com/primer/css/pull/926) Add Flash Banner `.flash-banner` from github/github
- [#927](https://github.com/primer/css/pull/927) Add `.flex-column-reverse` utilities
### :memo: Documentation
- [#932](https://github.com/primer/css/pull/932) Fix CDN links in documentation
- [#933](https://github.com/primer/css/pull/933) Convert most ERB examples to HTML
### Committers
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 13.0.2
### :memo: Documentation
- Use inline octicon in branch name example [#886](https://github.com/primer/css/pull/886)
- Move select menu list into the modal div [#903](https://github.com/primer/css/pull/903)
- Improve SelectMenu docs [#923](https://github.com/primer/css/pull/923)
### :house: Internal
- Update "Ship checklist" [#902](https://github.com/primer/css/pull/902)
- Bump stylelint, et al; add CI tests and script for removing needless disables [#912](https://github.com/primer/css/pull/912)
### Committers
- [@colebemis](https://github.com/colebemis)
- [@mxie](https://github.com/mxie)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 13.0.1
### :bug: Bug Fix
- Remove "Segoe UI Symbol" from font stack [#906](https://github.com/primer/css/pull/906)
### Committers
- [@simurai](https://github.com/simurai)
# 13.0.0
### :boom: Breaking Change
- Remove `.container`, `.columns`, `.column`, and related classes [#662](https://github.com/primer/css/pull/662)
- Remove `.btn-purple` [#736](https://github.com/primer/css/pull/736) :wave: 💜
- Remove `.text-pending` and `.bg-pending` [#888](https://github.com/primer/css/pull/888)
- Remove `.dropdown-menu-content` [#884](https://github.com/primer/css/pull/884)
### :nail_care: Polish
- Select menu improvements [#893](https://github.com/primer/css/pull/893)
### :memo: Documentation
- The layout docs, formerly available at `/css/objects/layout`, are gone and will redirect to `/css/objects/grid`.
### :house: Internal
- Add deprecations test script [#889](https://github.com/primer/css/pull/889)
- Clean up scripts and dev dependencies [#890](https://github.com/primer/css/pull/890)
- Upgrade stylelint-config-primer to v8.0.0 [#892](https://github.com/primer/css/pull/892)
- Upgrade doctocat, live code wrappers [#895](https://github.com/primer/css/pull/895)
### Committers
- [@jonrohan](https://github.com/jonrohan)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
- [@sophshep](https://github.com/sophshep)
# 12.7.0
### :rocket: Enhancement
- Import Dropdown component; add dark variants for dropdown and text fields [#862](https://github.com/primer/css/pull/862)
- Add `.break-word` utility and improve word-break docs [#880](https://github.com/primer/css/pull/880)
- Publish deprecation data [#883](https://github.com/primer/css/pull/883)
### :memo: Documentation
- Fix mistake in flex-justify-start explanation [#877](https://github.com/primer/css/pull/877)
### :house: Internal
- Fix CSS bundle size report when adding bundles [#879](https://github.com/primer/css/pull/879)
- Migrate to GitHub Actions v2 [#881](https://github.com/primer/css/pull/881)
### Committers
- [@dcastil](https://github.com/dcastil)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
- [@vdepizzol](https://github.com/vdepizzol)
# 12.6.2
### :nail_care: Polish
- Add default background-color to SideNav https://github.com/primer/css/pull/873
### :house: Internal
- Change order in RELEASING.md https://github.com/primer/css/pull/875
### Committers
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 12.6.1
### :bug: Bug Fix
- Remove non-ascii characters (en dashes?) from SCSS comments [#870](https://github.com/primer/css/pull/870)
- Fix SideNav "jumping" in Safari [#868](https://github.com/primer/css/pull/868)
### :nail_care: Polish
- Improve Select Menu spacing [#844](https://github.com/primer/css/pull/844)
### :memo: Documentation
- Update colorable URL [#867](https://github.com/primer/css/pull/867)
### :house: Internal
- Update changelog for 12.6.0 [#866](https://github.com/primer/css/pull/866)
### Committers
- [@jonrohan](https://github.com/jonrohan)
- [@kiendang](https://github.com/kiendang)
- [@shawnbot](https://github.com/shawnbot)
- [@shreve](https://github.com/shreve)
- [@simurai](https://github.com/simurai)
# 12.6.0
### 🚀 Enhancements
- Loading toast styles [#852](https://github.com/primer/css/pull/852)
- Header component [#845](https://github.com/primer/css/pull/845)
- Import `.octicon` CSS in the core bundle [#857](https://github.com/primer/css/pull/857)
- Design update for blankslates [#861](https://github.com/primer/css/pull/861)
- Don't let State labels wrap [#863](https://github.com/primer/css/pull/863)
### 📝 Documentation
- Fix some links in linting docs [#856](https://github.com/primer/css/pull/856)
- Updates to the development docs [#855](https://github.com/primer/css/pull/855)
- Generate bundle source READMEs from a template [#859](https://github.com/primer/css/pull/859)
- Render Octicon Ruby helper in docs [#847](https://github.com/primer/css/pull/847)
### 🏠 Internal
- Add GitHub `styleguide.css` to Storybook [#849](https://github.com/primer/css/pull/849)
### Committers
- [@ashygee](https://github.com/ashygee)
- [@emilybrick](https://github.com/emilybrick)
- [@jonrohan](https://github.com/jonrohan)
- [@shawnbot](https://github.com/shawnbot)
- [@vdepizzol](https://github.com/vdepizzol)
# 12.5.0
### :rocket: Enhancement
- Add `.Toast` component [#831](https://github.com/primer/css/pull/831)
- Add `.SideNav` component [#827](https://github.com/primer/css/pull/827)
- Add `.SelectMenu` component [#808](https://github.com/primer/css/pull/808)
- Add `font-display: swap` to `@font-face` declarations [#780](https://github.com/primer/css/pull/780)
- Add `flex-grow-0`, `flex-order-[1,2,none]` and `width-auto` utilities [#763](https://github.com/primer/css/pull/763)
- Change default for `$marketing-font-path` to `/fonts/` [#837](https://github.com/primer/css/pull/837)
### :bug: Bug Fix
- Improve monospaced font on Chrome Android [#812](https://github.com/primer/css/pull/812)
### :memo: Documentation
- Add multi-word naming conventions to BEM docs [#836](https://github.com/primer/css/pull/836)
- Color system docs updates [#811](https://github.com/primer/css/pull/811)
- Color utility table tweaks [#842](https://github.com/primer/css/pull/842)
- Fix markdown typos in Contributing docs page [#846](https://github.com/primer/css/pull/846)
### Committers
- [@ampinsk](https://github.com/ampinsk)
- [@emilybrick](https://github.com/emilybrick)
- [@emplums](https://github.com/emplums)
- [@jonrohan](https://github.com/jonrohan)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
- [@skullface](https://github.com/skullface)
- [@vdepizzol](https://github.com/vdepizzol)
# 12.4.1
### :bug: Bug fixes
- Fix [#822](https://github.com/primer/css/issues/822) (`.border-dashed` issues) via [#824](https://github.com/primer/css/issues/824)
### :memo: Documentation
- Typos fixed in [#802](https://github.com/primer/css/issues/802) (thank you, [@The-Compiler](https://github.com/The-Compiler)!)
- Nav updates [#803](https://github.com/primer/css/issues/803)
- Fix tables of contents [#762](https://github.com/primer/css/issues/762)
- Add deprecation warning for `.btn-purple`, due to disappear in 13.0.0 via [#736](https://github.com/primer/css/issues/736)
- Lots more documentation updates in [#814](https://github.com/primer/css/issues/814)
### :house: Internal
- Decommission `primer/deploy` [#809](https://github.com/primer/css/issues/809)
### Committers
- [@emplums](https://github.com/emplums)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
- [@The-Compiler](https://github.com/The-Compiler)
# 12.4.0
### :rocket: Enhancement
- More responsive border utilities [#775](https://github.com/primer/css/pull/775)
- Add `overflow: visible` utilities [#798](https://github.com/primer/css/pull/798)
- Add `yellow` color utilities that will replace `pending` [#737](https://github.com/primer/css/pull/737)
### :bug: Bug Fix
- Fix Ruby Sass compiler warnings by quoting keys in `$hue-maps` declaration [#794](https://github.com/primer/css/pull/794)
### :house: Internal
- Remove `test-all-modules` scripts and old monorepo test scripts [#795](https://github.com/primer/css/pull/795)
- Resolve all but one ([#796](https://github.com/primer/css/pull/796)) vulnerability in npm dev dependencies [#797](https://github.com/primer/css/pull/797)
### Committers
- [@broccolini](https://github.com/broccolini)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 12.3.1
### 🐛 Bug Fix
- Add `aria-selected="true"` support to tabbed navigation styles to play nicely with [`<tab-container>`](https://github.com/github/tab-container-element)
### 🏠 Internal
- Resolve the vulnerability alert with `tar@<4.4.2` in [CVE-2018-20834](https://nvd.nist.gov/vuln/detail/CVE-2018-20834)
### Committers
- [@shawnbot](https://github.com/shawnbot)
# 12.3.0
### :rocket: Enhancement
- More color utilities! [#760](https://github.com/primer/css/pull/760) ([@shawnbot](https://github.com/shawnbot))
- Add pink to Primer! 💖🌸💕🌷💞🎀💗🌺💝 [#776](https://github.com/primer/css/pull/776), [#778](https://github.com/primer/css/pull/778) ([@emplums](https://github.com/emplums)))
### :house: Internal
- Update storybook [#777](https://github.com/primer/css/pull/777) ([@emplums](https://github.com/emplums))
- Add bundle size report [#772](https://github.com/primer/css/pull/772) ([@shawnbot](https://github.com/shawnbot))
### :memo: Documentation
- Update Primer references to Primer CSS [#771](https://github.com/primer/css/pull/771) ([@emplums](https://github.com/emplums))
- Add Edit on GitHub links to docs [#770](https://github.com/primer/css/pull/770) ([@emplums](https://github.com/emplums))
- Anchor Link in Docs [#768](https://github.com/primer/css/pull/768) ([@emplums](https://github.com/emplums))
### :house: Internal
- Update RELEASING [#757](https://github.com/primer/css/pull/757) ([@simurai](https://github.com/simurai))
### Committers
- [@emplums](https://github.com/emplums)
- [@shawnbot](https://github.com/shawnbot)
- [@simurai](https://github.com/simurai)
# 12.2.3
### :bug: Bug Fix
- Remove references to a non-existent `Progress-value` class https://github.com/primer/css/pull/751
### :house: Internal
- Upgrade stylelint config https://github.com/primer/css/pull/753
#### Committers: 1
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 12.2.2
### :bug: Bug Fix
- Fix hide utilities when toggling between breakpoints [#746](https://github.com/primer/css/pull/746)
### :house: Internal
- Prevent Storybook publish failures from breaking builds on `main` [#728](https://github.com/primer/css/pull/728)
- Upgrade to [cssstats v3.3.0](https://github.com/cssstats/cssstats/releases/tag/v3.3.0), which fixes our selector stats JSON files
#### Committers: 2
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Simurai ([simurai](https://github.com/simurai))
# 12.2.1
### :bug: Bug Fix
- Fix source order of directional border utilities [#727](https://github.com/primer/css/pull/727)
- Fix UnderlineNav selected border width [#733](https://github.com/primer/css/pull/733)
### :memo: Documentation
- Fix changelog committers listings for versions 12.0.1 and 12.0.2 [#729](https://github.com/primer/css/pull/729)
- Fix code examples from being cut off [#725](https://github.com/primer/css/pull/725)
#### Committers: 2
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Simurai ([simurai](https://github.com/simurai))
# 12.2.0
### :rocket: Enhancement
- Add more `.border-white-fade` utilities [#713](https://github.com/primer/css/pull/713)
### :nail_care: Polish
- Fix `<details>` spacing [#675](https://github.com/primer/css/pull/675)
### :bug: Bug Fixes
- Accessibility fixes for marketing buttons [#716](https://github.com/primer/css/pull/716)
### :memo: Documentation
- Fix scrolling of code examples [#717](https://github.com/primer/css/pull/717)
### :house: Internal
- Fix `npm link` ([#715](https://github.com/primer/css/issue/715)) by removing `prepare` npm script [#718](https://github.com/primer/css/pull/718)
#### Committers: 4
- Diana Mounter ([broccolini](https://github.com/broccolini))
- Max Stoiber ([mxstbr](https://github.com/mxstbr))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Simurai ([simurai](https://github.com/simurai))
# 12.1.1
### :bug: Bug Fix
- Remove UI from font file path [#709](https://github.com/primer/css/pull/709)
### :memo: Documentation
- Removes sync functionality from docs [#710](https://github.com/primer/css/pull/710)
### :house: Internal
- Fixes Storybook [#707](https://github.com/primer/css/pull/707) and [#711](https://github.com/primer/css/pull/711)
#### Committers: 3
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Emily Plummer ([emplums](https://github.com/emplums))
# 12.1.0
### :rocket: Enhancement
- Per-axis overflow utilities [#701](https://github.com/primer/css/pull/701)
- Add `0` to responsive marketing positioning utilities (`top-lg-0`, et al) [#697](https://github.com/primer/css/pull/697)
- Add negative offset utilities to marketing/utilities/layout [#639](https://github.com/primer/css/pull/639)
### :memo: Documentation
- Fix changelog committers list for 12.0.2 (accidentally listed under 12.0.1)
### :house: Internal
- Remove a bunch of unused dev dependencies [#703](https://github.com/primer/css/pull/703)
- Update `script/selector-diff-report` to compare against `@primer/css` (not `primer`!)
#### Committers: 3
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Tyson Rosage ([trosage](https://github.com/trosage))
# 12.0.2
### :bug: Bug fix
- Restore missing marketing padding utilities [#695](https://github.com/primer/css/pull/695)
### :memo: Documentation
- Explain why `.tooltipped` should be used sparingly [#676](https://github.com/primer/css/pull/676)
- Fix trailing slash errors in Next.js [#681](https://github.com/primer/css/pull/681)
- Add static assets to Now deployments [#687](https://github.com/primer/css/pull/687)
- Shiny new social and README header by @ashygee [#689](https://github.com/primer/css/pull/689)
### :house: Internal
- Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/main/RELEASING.md#in-this-repo)
- Rename InterUI font to "Inter", per [inter v3.3](https://github.com/rsms/inter/releases/tag/v3.3) [#696](https://github.com/primer/css/pull/696)
#### Committers: 4
- Ash Guillaume ([ashygee](https://github.com/ashygee))
- David Graham ([dgraham](https://github.com/dgraham))
- Mu-An Chiou ([muan](https://github.com/muan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 12.0.1
### :bug: Bug Fix
- Add missing `h000-mktg` class [#667](https://github.com/primer/css/pull/667)
- Fix UnderlineNav overflow issues [#684](https://github.com/primer/css/pull/684)
- Fix double borders on Box-header [#686](https://github.com/primer/css/pull/686)
### :house: Internal
- Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v<version>`)
#### Committers: 2
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 12.0.0
:rotating_light: **Starting with version 12.0.0, the `primer` package is now known as `@primer/css`**. See [MIGRATING.md](https://github.com/primer/css/tree/main/MIGRATING.md) for more info.
#### :boom: Breaking Change
- [#666](https://github.com/primer/css/pull/666) Reorganize into a single `@primer/css` package ([@shawnbot](https://github.com/shawnbot))
#### Committers: 2
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
# 11.0.0
#### :boom: Breaking Change
- [#438](https://github.com/primer/primer/pull/438) Remove `primer-page-sections` package. ([@sophshep](https://github.com/sophshep))
- [#439](https://github.com/primer/primer/pull/439) Remove `primer-page-headers` package. ([@sophshep](https://github.com/sophshep))
- [#440](https://github.com/primer/primer/pull/440) Remove `primer-tables` package. ([@sophshep](https://github.com/sophshep))
- [#459](https://github.com/primer/primer/pull/459) Move responsive position utilities from marketing to core. ([@sophshep](https://github.com/sophshep))
- [#656](https://github.com/primer/primer/pull/656) Remove colorizeTooltip mixin. ([@shawnbot](https://github.com/shawnbot))
- [#657](https://github.com/primer/primer/pull/657) Remove `BtnGroup-form` class. ([@shawnbot](https://github.com/shawnbot))
- [#658](https://github.com/primer/primer/pull/658) Remove `.avatar-stack` in favor of `.AvatarStack`. ([@shawnbot](https://github.com/shawnbot))
#### :rocket: Enhancement
- [#583](https://github.com/primer/primer/pull/583) Updates to Marketing Typography. ([@sophshep](https://github.com/sophshep))
- [#660](https://github.com/primer/primer/pull/660) Add `$marketing-font-path`. ([@shawnbot](https://github.com/shawnbot))
- [#661](https://github.com/primer/primer/pull/661) Spacer variable refactor. ([@shawnbot](https://github.com/shawnbot))
- [#663](https://github.com/primer/primer/pull/663) Add deprecation warning for column grid classes and add `container-sm` utility class. ([@jonrohan](https://github.com/jonrohan))
#### :bug: Bug Fix
- [#654](https://github.com/primer/primer/pull/654) Fix typo ("Chroma") in `primer-base` comment. ([@Jiang-Xuan](https://github.com/Jiang-Xuan))
- [#655](https://github.com/primer/primer/pull/655) Fix typo ("conditonally") in `docs/src/SideNav.js` comment. ([@0xflotus](https://github.com/0xflotus))
### :house: Internal
- [#659](https://github.com/primer/primer/pull/659) Generate CSS selector diff report on Travis. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 4
- 0xflotus ([0xflotus](https://github.com/0xflotus))
- Jiang-Xuan ([Jiang-Xuan](https://github.com/Jiang-Xuan))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Sophie Shepherd ([sophshep](https://github.com/sophshep))
# 10.10.5
#### :bug: Bug Fix
- [#650](https://github.com/primer/primer/pull/650) Fix border radius edge utility specificity. ([@shawnbot](https://github.com/shawnbot))
#### :memo: Documentation
- [#649](https://github.com/primer/primer/pull/649) Sandboxed code examples. ([@shawnbot](https://github.com/shawnbot))
#### :house: Internal
- Only check links on Travis if `[check-links]` is included in the commit message
- a5658d3 Run `now alias` without the branch name on merge to `main`
#### Committers: 1
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.10.4
#### :memo: Documentation
- [#642](https://github.com/primer/primer/pull/642) docs: add Ash's new header illustration. ([@shawnbot](https://github.com/shawnbot))
#### :house: Internal
- [#641](https://github.com/primer/primer/pull/641) test(docs): improve style guide URL path test. ([@shawnbot](https://github.com/shawnbot))
- [#635](https://github.com/primer/primer/pull/635) docs: Releases link, Status key page move. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 1
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.10.3
#### :memo: Documentation
- [#632](https://github.com/primer/primer/pull/632) Happy new year! ([@shawnbot](https://github.com/shawnbot))
- [#626](https://github.com/primer/primer/pull/626) Branch deployment, docs for the docs. ([@shawnbot](https://github.com/shawnbot))
- [#616](https://github.com/primer/primer/pull/616) Start up the docs directory. ([@shawnbot](https://github.com/shawnbot))
#### :house: Internal
- [#631](https://github.com/primer/primer/pull/631) Docs release fixes. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 2
- Emily Brick ([emilybrick](https://github.com/emilybrick))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.10.2
#### :memo: Documentation
- [#614](https://github.com/primer/primer/pull/614) fix broken border-radius helper example. ([@joelhawksley](https://github.com/joelhawksley))
#### :house: Internal
- [#615](https://github.com/primer/primer/pull/615) pin npm-run-all@4.1.5. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 2
- Joel Hawksley ([joelhawksley](https://github.com/joelhawksley))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.10.1
#### :memo: Documentation
- [#606](https://github.com/primer/primer/pull/606) Fix for Progress Broken Package Link. ([@emilybrick](https://github.com/emilybrick))
#### :house: Internal
- [#608](https://github.com/primer/primer/pull/608) Update releasing docs. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 2
- Emily Brick ([emilybrick](https://github.com/emilybrick))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.10.0
#### :rocket: Enhancement
- [#573](https://github.com/primer/primer/pull/573) Add Progress component. ([@emilybrick](https://github.com/emilybrick))
- [#561](https://github.com/primer/primer/pull/561) Add HTML `hidden` attribute docs, increase `[hidden]` selector specificity. ([@shawnbot](https://github.com/shawnbot) h/t @jonrohan)
#### :bug: Bug Fix
- [#604](https://github.com/primer/primer/pull/604) Fix Button group focus ring z-index issues. ([@shawnbot](https://github.com/shawnbot))
- [#570](https://github.com/primer/primer/pull/570) Make `.blankslate-narrow` responsive. ([@crhallberg](https://github.com/crhallberg))
- [#591](https://github.com/primer/primer/pull/591) Add fs-extra to `primer-module-build.dependencies`. ([@shawnbot](https://github.com/shawnbot))
#### :memo: Documentation
- [#585](https://github.com/primer/primer/pull/585) Improve contributing docs and add DEVELOP.md. ([@shawnbot](https://github.com/shawnbot))
#### :house: Internal
- [#597](https://github.com/primer/primer/pull/597) Fix primerize, add "fresh" run-script, etc. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 3
- Chris Hallberg ([crhallberg](https://github.com/crhallberg))
- Emily Brick ([emilybrick](https://github.com/emilybrick))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.9.0
#### :rocket: Enhancement
- [#586](https://github.com/primer/primer/pull/586) Hiding .Counter component when it's empty.. ([@jonrohan](https://github.com/jonrohan))
- [#545](https://github.com/primer/primer/pull/545) Simplify responsive utilities with \$responsive-variants. ([@shawnbot](https://github.com/shawnbot))
- [#557](https://github.com/primer/primer/pull/557) Add !important to [hidden]. ([@muan](https://github.com/muan))
#### :memo: Documentation
- [#580](https://github.com/primer/primer/pull/580) Remove invalid button classes. ([@shawnbot](https://github.com/shawnbot))
#### :house: Internal
- [#581](https://github.com/primer/primer/pull/581) Use code-blocks. ([@shawnbot](https://github.com/shawnbot))
- [#530](https://github.com/primer/primer/pull/530) Adding user details to storybook publish script. ([@jonrohan](https://github.com/jonrohan))
- [#579](https://github.com/primer/primer/pull/579) Upgrade to lerna@2.11, rebuild package-lock. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 5
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Mickaël Derriey ([mderriey](https://github.com/mderriey))
- Mu-An Chiou ([muan](https://github.com/muan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Sophie Shepherd ([sophshep](https://github.com/sophshep))
# 10.8.1
#### :bug: Bug Fix
- [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums))
#### :memo: Documentation
- [#554](https://github.com/primer/primer/pull/554) Updates releasing documentation ([@emplums](https://github.com/emplums))
#### :rocket: Enhancement
- [#555](https://github.com/primer/primer/pull/555) Add version check to CI ([@shawnbot](https://github.com/shawnbot))
# 10.8.0
#### :rocket: Enhancement
- [#525](https://github.com/primer/primer/pull/525) Add \$spacer-0 alias. ([@AustinPaquette](https://github.com/AustinPaquette))
- [#522](https://github.com/primer/primer/pull/522) Add .BtnGroup-parent, deprecate .BtnGroup-form. ([@muan](https://github.com/muan))
- [#544](https://github.com/primer/primer/pull/544) Add lh-0 utility class. ([@shawnbot](https://github.com/shawnbot))
- [#548](https://github.com/primer/primer/pull/548) Add text underline utility. ([@AustinPaquette](https://github.com/AustinPaquette))
- [#549](https://github.com/primer/primer/pull/549) Add .user-select-none utility class. ([@AustinPaquette](https://github.com/AustinPaquette))
#### :memo: Documentation
- [#528](https://github.com/primer/primer/pull/528) Update release docs. ([@emplums](https://github.com/emplums))
#### Committers: 3
- Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Mu-An Chiou ([@muan](https://github.com/muan))
- Emily Plummer ([@emplums](https://github.com/emplums))
# 10.7.0
#### :nail_care: Polish
- [#511](https://github.com/primer/primer/pull/511) change double quotes to single quotes in Avatar stack stories. ([@AustinPaquette](https://github.com/AustinPaquette))
#### :memo: Documentation
- [#520](https://github.com/primer/primer/pull/520) Update issue templates. ([@broccolini](https://github.com/broccolini))
- [#516](https://github.com/primer/primer/pull/516) Fix modules/primer-product/README.md. ([@9585999](https://github.com/9585999))
- [#513](https://github.com/primer/primer/pull/513) Deleting the dev branch workflow instructions. ([@jonrohan](https://github.com/jonrohan))
- [#507](https://github.com/primer/primer/pull/507) Moving the color docs to the style guide. ([@jonrohan](https://github.com/jonrohan))
#### :house: Internal
- [#517](https://github.com/primer/primer/pull/517) Modifying notify script to publish from each package. ([@jonrohan](https://github.com/jonrohan))
- [#515](https://github.com/primer/primer/pull/515) Auto publish storybook. ([@jonrohan](https://github.com/jonrohan))
- [#510](https://github.com/primer/primer/pull/510) [WIP] Patch release 10.6.2. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 5
- Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette))
- Diana Mounter ([broccolini](https://github.com/broccolini))
- DieGOs ([9585999](https://github.com/9585999))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.6.1
#### :bug: Bug Fix
- [#506](https://github.com/primer/primer/pull/506) Fix white border on last avatar in AvatarStack (take two). ([@shawnbot](https://github.com/shawnbot))
- [#501](https://github.com/primer/primer/pull/501) Set different z-index for .details-overlay. ([@muan](https://github.com/muan))
#### Committers: 2
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- [muan](https://github.com/muan)
# 10.6.0
#### :bug: Bug Fix
- [#491](https://github.com/primer/primer/pull/491) Add `backface-visibility` to `.hover-grow`. ([@brandonrosage](https://github.com/brandonrosage))
#### :memo: Documentation
- [#490](https://github.com/primer/primer/pull/490) Add release documentation. ([@emplums](https://github.com/emplums))
#### :house: Internal
- [#475](https://github.com/primer/primer/pull/475) Import primer-module-build to the monorepo. ([@shawnbot](https://github.com/shawnbot))
- [#479](https://github.com/primer/primer/pull/479) Add "scoreboard" test suite. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 4
- Brandon Rosage ([brandonrosage](https://github.com/brandonrosage))
- Emily ([emplums](https://github.com/emplums))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- [muan](https://github.com/muan)
# 10.5.0
#### :rocket: Enhancement
- [#487](https://github.com/primer/primer/pull/487) Import Pagination Component. ([@emplums](https://github.com/emplums))
- [#474](https://github.com/primer/primer/pull/474) Add text-mono utility class. ([@emplums](https://github.com/emplums))
- [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan))
#### :bug: Bug Fix
- [#465](https://github.com/primer/primer/pull/465) Fix Popover--right-bottom caret positioning. ([@shawnbot](https://github.com/shawnbot))
- [#458](https://github.com/primer/primer/pull/458) Fix broken pointer from packages to modules. ([@tysongach](https://github.com/tysongach))
#### :memo: Documentation
- [#486](https://github.com/primer/primer/pull/486) Documenting the text-inheritance color utility. ([@jonrohan](https://github.com/jonrohan))
- [#481](https://github.com/primer/primer/pull/481) Styleguide Polish. ([@emplums](https://github.com/emplums))
- [#464](https://github.com/primer/primer/pull/464) Fix markdown stories. ([@shawnbot](https://github.com/shawnbot))
- [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan))
- [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos))
#### Committers: 7
- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Emily ([emplums](https://github.com/emplums))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Tyson Gach ([tysongach](https://github.com/tysongach))
- [muan](https://github.com/muan)
# 10.4.0 (2018-03-14)
#### :rocket: Enhancement
- [#456](https://github.com/primer/primer/pull/456) Adding height-fit utility class. ([@jonrohan](https://github.com/jonrohan))
#### :memo: Documentation
- [#455](https://github.com/primer/primer/pull/455) Add colorizeTooltip deprecation warning. ([@jonrohan](https://github.com/jonrohan))
- [#452](https://github.com/primer/primer/pull/452) Update dead links in CONTRIBUTING.md. ([@agisilaos](https://github.com/agisilaos))
#### Committers: 3
- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- [muan](https://github.com/muan)
# 10.3.0 (2018-01-17)
#### :rocket: Enhancement
- [#426](https://github.com/primer/primer/pull/426) Add em spacer variables. ([@broccolini](https://github.com/broccolini))
- [#430](https://github.com/primer/primer/pull/430) Increase input font-size to 16px on mobile. ([@broccolini](https://github.com/broccolini))
#### :bug: Bug Fix
- [#416](https://github.com/primer/primer/pull/416) Point style field to build file in subhead component. ([@muan](https://github.com/muan))
- [#424](https://github.com/primer/primer/pull/424) Add missing $spacer-12 in $marketingSpacers variable. ([@gladwearefriends](https://github.com/gladwearefriends))
#### :nail_care: Polish
- [#418](https://github.com/primer/primer/pull/418) Button color contrast improvements. ([@broccolini](https://github.com/broccolini))
#### :memo: Documentation
- [#427](https://github.com/primer/primer/pull/427) Adding stories from markdown for the other modules that didn't have any stories. ([@jonrohan](https://github.com/jonrohan))
#### :house: Internal
- [#420](https://github.com/primer/primer/pull/420) Update licenses to 2018 🎊. ([@jonrohan](https://github.com/jonrohan))
#### Committers: 4
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Diana Mounter ([broccolini](https://github.com/broccolini))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- [muan](https://github.com/muan)
# 10.2.0 (2017-12-11)
#### :rocket: Enhancement
- [#376](https://github.com/primer/primer/pull/376) Extend spacing scale for marketing. ([@gladwearefriends](https://github.com/gladwearefriends))
- [#409](https://github.com/primer/primer/pull/409) Add Sass key to package.json. ([@broccolini](https://github.com/broccolini))
- [#358](https://github.com/primer/primer/pull/358) automatically style first and last breadcrumb. ([@gronke](https://github.com/gronke))
- [#394](https://github.com/primer/primer/pull/394) Point style field to built css. ([@koddsson](https://github.com/koddsson))
#### :memo: Documentation
- [#411](https://github.com/primer/primer/pull/411) Updates to stylelint package links/docs for new structure. ([@jonrohan](https://github.com/jonrohan))
#### Committers: 4
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Diana Mounter ([broccolini](https://github.com/broccolini))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Kristján Oddsson ([koddsson](https://github.com/koddsson))
- Stefan Grönke ([gronke](https://github.com/gronke))
# 10.1.0 (2017-11-15)
#### :rocket: Enhancement
- [#385](https://github.com/primer/primer/pull/385) New Avatar stack. ([@califa](https://github.com/califa) & [@sophshep](https://github.com/sophshep))
- [#404](https://github.com/primer/primer/pull/404) Tooltip component updates ([@broccolini](https://github.com/broccolini))
#### :memo: Documentation
- [#405](https://github.com/primer/primer/pull/405) Add deprecation warning for `.avatar-stack`. ([@jonrohan](https://github.com/jonrohan))
- [#391](https://github.com/primer/primer/pull/391) Update shields.io url to https. ([@NuttasitBoonwat](https://github.com/NuttasitBoonwat))
#### Committers: 5
- Diana Mounter ([broccolini](https://github.com/broccolini))
- Joel Califa ([califa](https://github.com/califa))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Sophie Shepherd ([sophshep](https://github.com/sophshep))
- [NuttasitBoonwat](https://github.com/NuttasitBoonwat)
# 10.0.1 (2017-11-14)
#### :bug: Bug Fix
- Fixing `peerDependencies` to be greater than equal to versions. Fixing version mismatch with buttons and box.
# 10.0.0 (2017-11-13)
#### :boom: Breaking Change
- [#395](https://github.com/primer/primer/pull/395) Renaming primer-css to primer. ([@jonrohan](https://github.com/jonrohan))
- [#379](https://github.com/primer/primer/pull/379) Deprecating primer-cards and form-cards. ([@jonrohan](https://github.com/jonrohan))
- [#336](https://github.com/primer/primer/pull/336) Move `primer-breadcrumbs` from marketing to core ([@jonrohan](<(https://github.com/jonrohan)>)
#### :rocket: Enhancement
- [#371](https://github.com/primer/primer/pull/371) Add .details-reset. ([@muan](https://github.com/muan))
- [#375](https://github.com/primer/primer/pull/375) New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle. ([@sophshep](https://github.com/sophshep))
- [#383](https://github.com/primer/primer/pull/383) Add 'Popover' component. ([@brandonrosage](https://github.com/brandonrosage))
- [#377](https://github.com/primer/primer/pull/377) Refactor and add underline nav component. ([@ampinsk](https://github.com/ampinsk))
- [#337](https://github.com/primer/primer/pull/337) Add marketing buttons to primer-marketing. ([@gladwearefriends](https://github.com/gladwearefriends))
- [#342](https://github.com/primer/primer/pull/342) Add Subhead component. ([@shawnbot](https://github.com/shawnbot))
- [#341](https://github.com/primer/primer/pull/341) Add branch-name component from github/github. ([@shawnbot](https://github.com/shawnbot))
#### :bug: Bug Fix
- [#360](https://github.com/primer/primer/pull/360) Remove ::before ::after padding hack on markdown. ([@jonrohan](https://github.com/jonrohan))
- [#320](https://github.com/primer/primer/pull/320) Remove -webkit-text-decoration-skip override. ([@antons](https://github.com/antons))
- [#359](https://github.com/primer/primer/pull/359) Change markdown li break to handle Safari 10.x user stylesheet bug. ([@feministy](https://github.com/feministy))
- [#388](https://github.com/primer/primer/pull/388) Button border-radius fix to override Chroma 62. ([@broccolini](https://github.com/broccolini))
- [#307](https://github.com/primer/primer/pull/307) Do not suppress opacity transition for tooltipped-no-delay. ([@astorije](https://github.com/astorije))
#### :house: Internal
- [#396](https://github.com/primer/primer/pull/396) Use lerna-changelog to generate a changelog. ([@jonrohan](https://github.com/jonrohan))
- [#382](https://github.com/primer/primer/pull/382) Update Button docs. ([@JasonEtco](https://github.com/JasonEtco))
- [#390](https://github.com/primer/primer/pull/390) Updating `storiesFromMarkdown` to read in rails Octicons helper and replace with react component. ([@jonrohan](https://github.com/jonrohan))
- [#389](https://github.com/primer/primer/pull/389) Publish alpha release any time we're not on a release branch or main. ([@jonrohan](https://github.com/jonrohan))
- [#384](https://github.com/primer/primer/pull/384) Add test to check for the current year in the license and source. ([@jonrohan](https://github.com/jonrohan))
- [#374](https://github.com/primer/primer/pull/374) Improve Pull Request template. ([@agisilaos](https://github.com/agisilaos))
#### Committers: 13
- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
- Amanda Pinsker ([ampinsk](https://github.com/ampinsk))
- Anton Sotkov ([antons](https://github.com/antons))
- Brandon Rosage ([brandonrosage](https://github.com/brandonrosage))
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Diana Mounter ([broccolini](https://github.com/broccolini))
- Jason Etcovitch ([JasonEtco](https://github.com/JasonEtco))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Jérémie Astori ([astorije](https://github.com/astorije))
- Mu-An ✌️ Chiou ([muan](https://github.com/muan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Sophie Shepherd ([sophshep](https://github.com/sophshep))
- liz abinante! ([feministy](https://github.com/feministy))
**Special thanks to @shaharke for transferring ownership of the Primer npm package to us so that we could make the rename happen!** :heart:
# 9.6.0
### Added
- Storybook. We've added a storybook prototyping environment for testing components in seclusion. To start the server run `npm start`
- Adding yeoman generator for creating a primer module. `generator-primer-module`
- Importing `stylelint-config-primer` from https://github.com/primer/stylelint-config/ into monorepo.
- Importing `stylelint-selector-no-utility` from https://github.com/primer/stylelint-selector-no-utility into monorepo.
### Changes
- Deployment and publishing scripts refinements.
# 9.5.0
### Added
- It's now possible to style `<summary>` elements as buttons and have them appear in the active/selected state when the enclosing [`<details>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is open. #346
### Changes
- Updates our release candidate versioning logic so that prerelease increments are done on a per-module basis, fixing #350.
# 9.4.0
### Added
- Add `v-align-baseline` class to `primer-utilities` #324
- Add deprecation warnings for `primer-cards` and `primer-forms/lib/form-validation.scss` #347 (these will be removed in v10.0.0)
### Changes
- Update npm metadata for `primer`, `primer-core`, `primer-product`, and `primer-marketing` #328
- Remove `HEAD` heading from the changelog #327
# 9.3.0
## Added
- Docs for `primer-layout` (grid), `primer-support`, `primer-utilities`, and `primer-marketing-utilities`
- Primer keys for `category` and `module_type` to `package.json` (for use in documentation and gathering stats)
## Changes
- Removes `docs` from `gitignore`
- Removes the `^` from all dependencies so that we can publish exact versions
- Consolidates release notes from various sources into one changelog located in `/modules/primer/CHANGELOG.md`
# 9.2.0
## Added
- Add `test-docs` npm script in each module to check that every CSS class is documented (or at least mentioned) in the module's own markdown docs
## Changes
- Remove per-module configurations (`.gitignore`, `.postcss.json`, `.stylelintrc.json`) and `CHANGELOG.md` files in #284
- Replace most static `font-size`, `font-weight`, and `line-height` CSS property values with their [SCSS variable equivalents](https://github.com/primer/primer/blob/c9ea37316fbb73c4d9931c52b42bc197260c0bf6/modules/primer-support/lib/variables/typography.scss#L12-L33) in #252
- Refactor CI scripts to use Travis conditional deployment for release candidate and final release publish steps in #290
# 9.1.1
This release updates primer modules to use variables for spacing units instead of pixel values.
## Changes
- primer-alerts: 1.2.0 => 1.2.1
- primer-avatars: 1.1.0 => 1.1.1
- primer-base: 1.2.0 => 1.2.1
- primer-blankslate: 1.1.0 => 1.1.1
- primer-box: 2.2.0 => 2.2.1
- primer-breadcrumb: 1.1.0 => 1.1.1
- primer-buttons: 2.1.0 => 2.1.1
- primer-cards: 0.2.0 => 0.2.1
- primer-core: 6.1.0 => 6.1.1
- primer-css: 9.1.0 => 9.1.1
- primer-forms: 1.1.0 => 1.1.1
- primer-labels: 1.2.0 => 1.2.1
- primer-layout: 1.1.0 => 1.1.1
- primer-markdown: 3.4.0 => 3.4.1
- primer-marketing-type: 1.1.0 => 1.1.1
- primer-marketing-utilities: 1.1.0 => 1.1.1
- primer-marketing: 5.1.0 => 5.1.1
- primer-navigation: 1.1.0 => 1.1.1
- primer-page-headers: 1.1.0 => 1.1.1
- primer-page-sections: 1.1.0 => 1.1.1
- primer-product: 5.1.0 => 5.1.1
- primer-support: 4.1.0 => 4.1.1
- primer-table-object: 1.1.0 => 1.1.1
- primer-tables: 1.1.0 => 1.1.1
- primer-tooltips: 1.1.0 => 1.1.1
- primer-truncate: 1.1.0 => 1.1.1
- primer-utilities: 4.4.0 => 4.4.1
# 9.1.0
This release updates our [stylelint config](/primer/stylelint-config-primer) to [v2.0.0](https://github.com/primer/stylelint-config/releases/tag/v2.0.0), and to stylelint v7.13.0. Each module also now has a `lint` npm script, and there are top-level `test` and `lint` scripts that you can use to lint and test all modules in one go.
This release also includes major improvements to our Travis build scripts to automatically publish PR builds, release candidates, and the "final" versions to npm.
# 9.0.0 - Core dependency & repo urls
We discovered that `primer-core` specified and outdated version of `primer-base` in it's dependencies. The outdated version did not have `normalize.scss` included which could cause some issues. This has issue occurred during v7.0.0 when creating the new monorepo. Also fixes repo urls in `package.json` for individual packages.
See PR [#243](https://github.com/primer/primer/pull/243)
## Changes
### Primer Core v6.0.0
- Fixed `primer-base` dependency to point to latest version
**Repo urls corrected from `packages` to `modules` in:**
- primer-base v1.1.5
- primer-box v2.1.8
- primer-buttons v2.0.6
- primer-forms v1.0.13
- primer-layout v1.0.5
- primer-navigation v1.0.6
- primer-support v4.0.7
- primer-table-object v1.0.9
- primer-tooltips v1.0.2
- primer-truncate v1.0.2
- primer-utilities v4.3.5
### Primer Product v5.0.2
**Repo urls corrected from `packages` to `modules` in:**
- primer-alerts v1.1.8
- primer-avatars v1.0.2
- primer-blankslate v1.0.2
- primer-labels v1.1.6
- primer-markdown v3.3.13
- primer-support v4.0.7
### Primer Marketing v5.0.2
**Repo urls corrected from `packages` to `modules` in:**
- primer-breadcrumb v1.0.2
- primer-cards v0.1.8
- primer-marketing-support v1.0.2
- primer-marketing-type v1.0.2
- primer-marketing-utilities v1.0.2
- primer-page-headers v1.0.2
- primer-page-sections v1.0.2
- primer-support v4.0.7
- primer-tables v1.0.2
# 8.0.0 - Imports
Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer/pull/239)
## Changes
### Primer Core v5.0.1
- Re-ordered imports in `index.scss` to ensure utilities come last in the cascade
### Primer Product v5.0.1
- Re-ordered imports in `index.scss` to move markdown import to end of list to match former setup in GitHub.com
### Primer Marketing v5.0.1
- Re-ordered imports in `index.scss` to ensure marketing utilities come last in the cascade
# 7.0.0 - Monorepo
In an effort to improve our publishing workflow we turned Primer into a monorepo, made this repo the source of truth for Primer by removing Primer modules from GitHub, and setup Lerna for managing multiple packages and maintaining independent versioning for all our modules.
This is exciting because:
- we can spend less time hunting down the cause of a broken build and more time focussing on making Primer more useful and robust for everyone to use
- we can be more confident that changes we publish won't cause unexpected problems on GitHub.com and many other GitHub websites that use Primer
- we no longer have files like package.json, scripts, and readme's in the GitHub app that don't really belong there
- **we can accept pull requests from external contributors** again!
See PR for more details on this change: https://github.com/primer/primer/pull/230
## Other changes:
### Primer Core v4.0.3
#### primer-support v4.0.5
- Update fade color variables to use rgba instead of transparentize color function for better Sass readability
- Update support variables and mixins to use new color variables
#### primer-layout v1.0.3
- Update grid gutter styles naming convention and add responsive modifiers
- Deprecate `single-column` and `table-column` from layout module
- Remove `@include clearfix` from responsive container classes
#### primer-utilities v4.3.3
- Add `show-on-focus` utility class for accessibility
- Update typography utilities to use new color variables
- Add `.p-responsive` class
#### primer-base v1.1.3
- Update `b` tag font weight to use variable in base styles
### Primer Marketing v4.0.3
#### primer-tables
- Update marketing table colors to use new variables
# 6.0.0
- Add `State--small` to labels module
- Fix responsive border utilities
- Added and updated typography variables and mixins; updated variables used in typography utilities; updated margin, padding, and typography readmes
- Darken `.box-shadow-extra-large` shadow
- Update `.tooltip-multiline` to remove `word-break: break-word` property
- Add `.border-purple` utility class
- Add responsive border utilities to primer-marketing
- Add `ws-normal` utility for `whitespace: normal`
- Updated syntax and classnames for `Counters` and `Labels`, moved into combined module with states.
# 5.1.0
- Add negative margin utilities
- Move `.d-flex` & `.d-flex-inline` to be with other display utility classes in `visibility-display.scss`
- Delete `.shade-gradient` in favor of `.bg-shade-gradient`
- Removed alt-body-font variable from primer-marketing
- Removed un-used `alt` typography styles from primer-marketing
- Add green border utility
# 5.0.0
- Added new border variable and utility, replaced deprecated flash border variables
- Updated variable name in form validation
- Updated `.sr-only` to not use negative margin
- Added and removed border variables and utilities
- Add filter utility to Primer Marketing
- Removed all custom color variables within Primer-marketing in favor of the new color system
- Updated style for form group error display so it is positioned properly
- Updated state closed color and text and background pending utilities
- Removed local font css file from primer-marketing/support
- Updated all color variables and replaced 579 hex refs across modules with new variables, added additional shades to start introducing a new color system which required updating nearly all primer modules
- Added layout utility `.sr-only` for creating screen reader only elements
- Added `.flex{-infix}-item-equal` utilities for creating equal width and equal height flex items.
- Added `.flex{-infix}-row-reverse` utility for reversing rows of content
- Updated `.select-menu-button-large` to use `em` units for sizing of the CSS triangle.
- Added `.box-shadow-extra-large` utility for large, diffused shadow
- Updated: removed background color from markdown body
- Updated: remove background on the only item in an avatar stack
- Added form utility `.form-checkbox-details` to allow content to be shown/hidden based on a radio button being checked
- Added form utility to override Webkit's incorrect assumption of where to try to autofill contact information
# 4.7.0
- Update primer modules to use bold variable applying `font-weight: 600`
# 4.6.0
- Added `CircleBadge` component for badge-like displays within product/components/avatars
- Added Box shadow utilities `box-shadow`, `box-shadow-medium`, `box-shadow-large`, `box-shadow-none`
- Moved visibility and display utilities to separate partial at the end of the imports list, moved flexbox to it's own partial
- Added `flex-shrink-0` to address Flexbox Safari bug
- Updated: Using spacing variables in the `.flash` component
- Updated Box component styles and documentation
- Added `.wb-break-all` utility
# 4.4.0
- Adding primer-marketing module to primer
- Added red and blue border color variables and utilities
- Updated: `$spacer-5` has been changed to `32px` from `36px`
- Updated: `$spacer-6` has been changed to `40px` from `48px`
- Deprecated `link-blue`, updated `link-gray` and `link-gray-dark`, added `link-hover-blue` - Updated: blankslate module to use support variables for sizing
# 4.3.0
- Renamed `.flex-table` to `.TableObject`
- Updated: `$spacer-1` has been changed to `4px` from `3px`
- Updated: `$spacer-2` has been changed to `6px` from `8px`
- Added: `.text-shadow-dark` & `.text-shadow-light` utilities
- Updated: Moved non-framework CSS out of Primer modules. Added `box.scss` to `primer-core`. Added `discussion-timeline.scss` to `primer-product`, and moved `blob-csv.scss` into `/primer-product/markdown` directory
- Added: Flex utilities
- Refactor: Site typography to use Primer Marketing styles
- Added: `.list-style-none` utility
- Refactor: Button groups into some cleaner CSS
- Updated: Reorganizing how we separate primer-core, primer-product, primer-marketing css
# 4.2.0
- Added: Responsive styles for margin and padding utilities, display, float, and new responsive hide utility, and updates to make typography responsive
- Added: new container styles and grid styles with responsive options
- Added: updated underline nav styles
- Deprecate: Deprecating a lot of color and layout utilities
- Added: More type utilities for different weights and larger sizes.
- Added: Well defined browser support
# 4.1.0
- Added: [primer-markdown](https://github.com/primer/markdown) to the build
- Fixes: Pointing "style" package.json to `build/build.css` file.
- Added: Update font stack to system fonts
- Added: Updated type scale as part of system font update
- Added: `.Box` component for replacing boxed groups, simple box, and table-list styles
- Added: New type utilities for headings and line-height
- Deprecated: `vertical-middle` was replaced with `v-align-middle`.
- Added: Layout utilities for vertical alignment, overflow, width and height, visibility, and display table
- Added: Changing from font icons to SVG
# 4.0.2
- Added npm build scripts to add `build/build.css` to the npm package
# 4.0.1
- Fixed: missing primer-layout from build
# 4.0.0
- Whole new npm build system, pulling in the code from separate component repos
# 3.0.0
- Added: Animation utilities
- Added: Whitespace scale, and margin and padding utilities
- Added: Border utilities
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for any behavior that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at emilybrick@github.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
## Contributing
> [!WARNING]
> **This project is in KTLO mode!** New features, functionalities, or major enhancements are unlikely to be accepted. Use existing utility classes from this project where needed. For more complete patterns that include styling and markup, please use [primer/react](https://github.com/primer/react) or, if necessary, [primer/view_components](https://github.com/primer/view_components).
Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
## Using the issue tracker
The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
* Please **do not** use the issue tracker for personal support requests.
* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!
Guidelines for bug reports:
1. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) to ensure your problem isn't caused by a simple error in your own code.
2. **Use the GitHub issue search** — check if the issue has already been reported.
3. **Check if the issue has been fixed** — try to reproduce it using the latest `main` branch in the repository.
4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).
## Feature requests
Feature requests are welcome, but take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.
## Pull requests
Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
### Updating Primer CSS
Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
1. Fork and clone [this repository](https://github.com/primer/css).
2. Configure and install the dependencies: `npm install`
3. Create a new branch from main `git checkout -b my-branch-name`
4. Make your changes and commit them.
5. Create a changeset for your changes: `npx changeset`
- See [changesets/changesets](https://github.com/changesets/changesets) for more information.
6. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
7. Wait for CI tests to finish.
- If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
- If the tests fail, review the logs and address any issues.
- If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
8. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
9. Pat yourself on the back and wait for your pull request to be reviewed.
Here are a few things you can do that will increase the likelihood of your pull request being accepted:
- Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
- Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
## Releasing a new Primer CSS version
See [RELEASING.md](RELEASING.md) for our release process.
## Resources
- [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
- [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
- [GitHub Help](https://help.github.com)
[fork]: https://github.com/primer/css/fork
[pr]: https://github.com/primer/css/compare
[style]: https://primer.style/css/principles
================================================
FILE: DEVELOP.md
================================================
# Primer CSS Development
> [!WARNING]
> **This project is in KTLO mode!** New features, functionalities, or major enhancements are unlikely to be accepted. Use existing utility classes from this project where needed. For more complete patterns that include styling and markup, please use [primer/react](https://github.com/primer/react) or, if necessary, [primer/view_components](https://github.com/primer/view_components).
If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
## Structure
Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
### Paths
Here's what you need to know about how the files are structured in both git and in the published npm module:
- In git, all of the SCSS source files live in the `src/` directory.
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
```scss
@import '@primer/css/utilities/index.scss';
```
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
## Install
Run `npm install` to install the npm dependencies.
### The docs directory
The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
### Code blocks
All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
## Storybook
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
```sh
npm run storybook
```
### The Storybook directory
Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
### Stories
Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
## Scripts
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
- `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
- `stylelint` lints the CSS source files.
- `eslint` lints the JavaScript source files.
- `test` runs our test suite.
- `storybook` runs storybook local development server.
The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
[@primer/css]: https://www.npmjs.com/package/@primer/css
[run-scripts]: https://docs.npmjs.com/cli/run-script
[now]: https://zeit.co/now
[npm]: https://www.npmjs.com/
[npx]: https://www.npmjs.com/package/npx
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2021 GitHub Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Primer CSS
The CSS implementation of GitHub's Primer Design System
[](https://www.npmjs.com/package/@primer/css)
[](https://github.com/primer/css/actions/workflows/ci.yml)
[](https://github.com/primer/css/graphs/contributors)
[](https://github.com/primer/css/commits/main)
[](https://github.com/primer/css/blob/main/LICENSE)
> :warning: **This project is in KTLO mode!** Use existing utility classes from this project where needed. For more complete patterns that include styling and markup, please use [primer/react](https://github.com/primer/react) or, if necessary, [primer/view_components](https://github.com/primer/view_components).
## Documentation
Our documentation site lives at [primer.style/css](https://primer.style/css). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
## Install
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
```sh
npm install --save @primer/css
```
## Usage
The included source files are written in [Sass] using SCSS syntax. Once installed, you can add your project's `node_modules` directory to your Sass [include paths](https://github.com/sass/node-sass#includepaths) (AKA [load paths](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/) in Ruby), then import it like this:
```scss
@import "@primer/css/index.scss";
```
You can import individual Primer modules directly from the `@primer/css` package:
```scss
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
```
## Development
See [DEVELOP.md](DEVELOP.md) for development docs.
## Releasing (for GitHub staff)
You can find docs about our release process in [RELEASING.md](RELEASING.md).
## License
[MIT](./LICENSE) © [GitHub](https://github.com/)
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[npm]: https://www.npmjs.com/
[sass]: http://sass-lang.com/
================================================
FILE: RELEASING.md
================================================
# Releasing a new version of Primer CSS 🎉
## Prepare the release (in `primer/css`)
The release process is automated by [changesets]. After you familiarize yourself with how they work. We use an [action workflow integrated in ci](https://github.com/atlassian/changesets#integrating-with-ci).
1. Visit the pull requests page and find the [latest Release tracking pr from primer-css](https://github.com/primer/css/pulls/primer-css). If there isn't one, we'll need to build the next release by merging in PRs with changeset files.
## Test the release candidate (in `github/github`):
1. Create a new branch in the `github/github` repo, name it `primer-<version>`.
1. Update the Primer CSS version to the published release candidate with:
```sh
bin/npm install @primer/css@<version>-rc.<sha>
```
Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
1. If you need to make changes to github/github due to the Primer CSS release, do them in a branch and merge _that_ into your release branch after testing.
1. Add or re-request reviewers and fix any breaking tests.
1. Test on review-lab.
## Publish the release (in `primer/css`)
1. If the release PR got approved and you've done necessary testing, merge it.
After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if actions has finished.
2. Done! 🎉
## Update github.com (in `github/github`):
1. Install the latest published version in the same `primer-<version>` branch created earlier with:
```
bin/npm install @primer/css@<version> -w ./npm-workspaces/primer/
```
Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
1. Fix any breaking tests.
1. Deploy! :rocket:
[changelog]: ../CHANGELOG.md
[changesets]: https://github.com/atlassian/changesets
================================================
FILE: __tests__/.eslintrc.json
================================================
{
"extends": [
"plugin:jest/recommended"
],
"rules": {
"eslint-comments/no-use": 0
}
}
================================================
FILE: __tests__/build.test.js
================================================
import fs from 'fs'
let distDir
beforeAll(() => {
distDir = fs.readdirSync('./dist')
})
describe('./dist/ folder', () => {
let distCSS, distMap, distJS
beforeAll(() => {
distCSS = distDir.filter(i => i.match(/\.css$/))
distMap = distDir.filter(i => i.match(/\.map$/))
distJS = distDir.filter(i => i.match(/\.js$/))
})
it('is not empty', () => {
expect(distDir).not.toBeNull()
expect(distDir.length).not.toBe(0)
})
it('contains source maps', () => {
for (const file of distCSS) {
if (file.includes('support')) { continue }
expect(distMap).toContain(`${file}.map`)
}
})
it('contains stats export files', () => {
for (const file of distCSS) {
expect(distJS).toContain(file.replace('.css', '.js'))
}
})
it('contains stats/ folder', () => {
expect(distDir).toContain('stats')
})
})
describe('./dist/stats/ folder', () => {
let statsDir
beforeAll(() => {
statsDir = fs.readdirSync('./dist/stats')
})
it('is not empty', () => {
expect(statsDir).not.toBeNull()
expect(statsDir.length).not.toBe(0)
})
it('contains a css file for each stat file', () => {
for (const file of statsDir) {
expect(distDir).toContain(file.replace('.json', '.css'))
}
})
})
================================================
FILE: __tests__/css.test.js
================================================
import {
getCurrentVersion,
getPackageStats,
getSelectorDiff,
getVariableDiff,
currentVersionDeprecations
} from './utils/css'
import semver from 'semver'
let selectorsDiff, variablesDiff, version
beforeAll(async () => {
selectorsDiff = getSelectorDiff()
variablesDiff = getVariableDiff()
version = getCurrentVersion()
})
describe('css', () => {
it('The support.css file contains no compiled css', () => {
const supportStats = getPackageStats('support')
expect(supportStats.size).toEqual(0)
})
})
describe('deprecations', () => {
it('expects deprecations and their replacement to not be equal.', () => {
const deprecations = currentVersionDeprecations()
Object.keys(deprecations["selectors"]).forEach(deprecation => {
const replacement = deprecations["selectors"][deprecation]
expect(deprecation).not.toEqual(replacement)
})
})
})
================================================
FILE: __tests__/docs.test.js
================================================
import {getNavigationLinks, getContentFrontmatter} from './utils/docs'
let navLinks, contentFM
beforeAll(async () =
gitextract_l4nf6gy6/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .github/ │ ├── CODEOWNERS │ ├── ISSUE_TEMPLATE/ │ │ ├── primer-bug-report.md │ │ ├── primer-feature-request.md │ │ └── style-guide-bug-report.md │ ├── dependabot.yml │ ├── pull_request_template.md │ ├── release_template.md │ └── workflows/ │ ├── axe.yml │ ├── ci.yml │ ├── codeql.yml │ ├── deploy_preview.yml │ ├── deploy_production.yml │ ├── release.yml │ ├── release_tracking.yml │ ├── stale.yml │ └── welcome.yml ├── .gitignore ├── .npmignore ├── .npmrc ├── .vercelignore ├── .vscode/ │ └── story-template.code-snippets ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── DEVELOP.md ├── LICENSE ├── README.md ├── RELEASING.md ├── __tests__/ │ ├── .eslintrc.json │ ├── build.test.js │ ├── css.test.js │ ├── docs.test.js │ └── utils/ │ ├── css.js │ └── docs.js ├── deprecations.js ├── docs/ │ ├── .babelrc │ ├── .eslintrc.json │ ├── .storybook/ │ │ ├── main.js │ │ ├── manager.js │ │ ├── preview-head.html │ │ ├── preview.css │ │ ├── preview.js │ │ ├── storybook.css │ │ └── theme.js │ ├── package.json │ ├── postcss.config.js │ ├── script/ │ │ └── build-storybook │ └── stories/ │ ├── Contributing.mdx │ ├── GettingStarted.mdx │ ├── Introduction.mdx │ ├── components/ │ │ └── Layout/ │ │ ├── AppFrame.stories.jsx │ │ ├── LayoutAlpha.stories.jsx │ │ ├── LayoutBeta.stories.jsx │ │ ├── PageLayout.stories.jsx │ │ ├── SplitPageLayout.stories.jsx │ │ ├── Stack.stories.jsx │ │ ├── StackExamples.stories.jsx │ │ └── StackFeatures.stories.jsx │ ├── deprecated-components/ │ │ ├── BoxOverlay/ │ │ │ ├── BoxOverlay.mdx │ │ │ └── BoxOverlay.stories.tsx │ │ ├── BranchName/ │ │ │ ├── BranchName.mdx │ │ │ └── BranchName.stories.tsx │ │ ├── Button/ │ │ │ ├── Button.mdx │ │ │ └── Button.stories.tsx │ │ ├── FilterList/ │ │ │ ├── FilterList.mdx │ │ │ └── FilterList.stories.tsx │ │ ├── Forms/ │ │ │ ├── Forms.mdx │ │ │ └── Forms.stories.tsx │ │ ├── Header/ │ │ │ ├── Header.mdx │ │ │ └── Header.stories.tsx │ │ ├── IssueLabel/ │ │ │ ├── IssueLabel.mdx │ │ │ └── IssueLabel.stories.tsx │ │ ├── Loaders/ │ │ │ ├── Loaders.mdx │ │ │ └── Loaders.stories.tsx │ │ ├── Markdown/ │ │ │ └── Markdown.stories.tsx │ │ ├── Marketing/ │ │ │ ├── Marketing.mdx │ │ │ └── Marketing.stories.tsx │ │ ├── Pagination/ │ │ │ ├── Pagination.mdx │ │ │ └── Pagination.stories.tsx │ │ ├── SelectMenu/ │ │ │ ├── SelectMenu.mdx │ │ │ └── SelectMenu.stories.tsx │ │ ├── SideNav/ │ │ │ ├── SideNav.mdx │ │ │ └── SideNav.stories.tsx │ │ ├── SubNav/ │ │ │ ├── SubNav.mdx │ │ │ └── SubNav.stories.tsx │ │ ├── Toast/ │ │ │ ├── Toast.mdx │ │ │ └── Toast.stories.tsx │ │ └── Tooltip/ │ │ ├── Tooltip.mdx │ │ └── Tooltip.stories.tsx │ ├── helpers/ │ │ └── pageLayoutBehavior.jsx │ ├── principles/ │ │ ├── Accessibility.mdx │ │ ├── HTML.mdx │ │ ├── Principles.mdx │ │ └── SCSS.mdx │ ├── support/ │ │ ├── Breakpoints.mdx │ │ ├── Deprecations.mdx │ │ ├── Linting.mdx │ │ ├── Prototyping.mdx │ │ ├── Spacing.mdx │ │ ├── Theming.mdx │ │ └── Typography.mdx │ └── utilities/ │ ├── Animation.stories.jsx │ ├── Border.stories.jsx │ ├── Color.stories.jsx │ ├── Details.stories.jsx │ ├── Flexbox.stories.jsx │ ├── Grid.stories.jsx │ ├── Layout.stories.jsx │ ├── Margin.stories.jsx │ ├── MarketingFilters.mdx │ ├── MarketingFilters.stories.jsx │ ├── MarketingLayout.mdx │ ├── MarketingLayout.stories.jsx │ ├── MarketingTypography.mdx │ ├── MarketingTypography.stories.jsx │ ├── Padding.stories.jsx │ ├── Shadow.stories.jsx │ └── Typography.stories.jsx ├── eslint.config.cjs ├── migrations/ │ ├── v16.md │ └── v18.md ├── package.json ├── postcss.config.cjs ├── prettier.config.cjs ├── script/ │ ├── .eslintrc.json │ ├── analyze-variables.js │ ├── axe-docs │ ├── build-css.js │ ├── build-docs │ ├── bundle-size-report.js │ ├── check-for-changeset │ ├── dist.js │ ├── prepublish │ ├── pretest │ ├── primer-css-compiler.js │ ├── selector-diff-report │ ├── stylelint-add-disables.js │ └── stylelint-remove-disables.js ├── src/ │ ├── autocomplete/ │ │ ├── README.md │ │ ├── index.scss │ │ └── suggester.scss │ ├── avatars/ │ │ ├── README.md │ │ ├── avatar-parent-child.scss │ │ ├── circle-badge.scss │ │ └── index.scss │ ├── base/ │ │ ├── README.md │ │ ├── base.scss │ │ ├── index.scss │ │ ├── kbd.scss │ │ ├── native-colors.scss │ │ ├── normalize.scss │ │ ├── octicons.scss │ │ └── typography-base.scss │ ├── box/ │ │ ├── README.md │ │ ├── box-overlay.scss │ │ └── index.scss │ ├── branch-name/ │ │ ├── README.md │ │ ├── branch-name.scss │ │ └── index.scss │ ├── buttons/ │ │ ├── README.md │ │ ├── button-group.scss │ │ ├── button.scss │ │ ├── index.scss │ │ └── misc.scss │ ├── color-modes/ │ │ ├── index.scss │ │ └── themes/ │ │ ├── dark.scss │ │ ├── dark_colorblind.scss │ │ ├── dark_dimmed.scss │ │ ├── dark_high_contrast.scss │ │ ├── dark_tritanopia.scss │ │ ├── light.scss │ │ ├── light_colorblind.scss │ │ ├── light_high_contrast.scss │ │ └── light_tritanopia.scss │ ├── core/ │ │ ├── README.md │ │ └── index.scss │ ├── deprecations.json │ ├── docs.scss │ ├── forms/ │ │ ├── README.md │ │ ├── form-control.scss │ │ ├── form-group.scss │ │ ├── form-select.scss │ │ ├── index.scss │ │ ├── input-group.scss │ │ └── radio-group.scss │ ├── header/ │ │ ├── README.md │ │ ├── header.scss │ │ └── index.scss │ ├── index.scss │ ├── labels/ │ │ ├── README.md │ │ ├── index.scss │ │ ├── issue-labels.scss │ │ └── mixins.scss │ ├── layout/ │ │ ├── README.md │ │ ├── app-frame.scss │ │ ├── container.scss │ │ ├── grid-offset.scss │ │ ├── grid.scss │ │ ├── index.scss │ │ ├── page-layout.scss │ │ └── stack.scss │ ├── loaders/ │ │ ├── README.md │ │ ├── index.scss │ │ └── loaders.scss │ ├── markdown/ │ │ ├── README.md │ │ ├── blob-csv.scss │ │ ├── code.scss │ │ ├── footnotes.scss │ │ ├── headings.scss │ │ ├── images.scss │ │ ├── index.scss │ │ ├── lists.scss │ │ ├── markdown-body.scss │ │ └── tables.scss │ ├── marketing/ │ │ ├── README.md │ │ ├── buttons/ │ │ │ ├── button.scss │ │ │ └── index.scss │ │ ├── index.scss │ │ ├── links/ │ │ │ ├── index.scss │ │ │ └── link.scss │ │ ├── support/ │ │ │ ├── index.scss │ │ │ └── variables.scss │ │ ├── type/ │ │ │ ├── index.scss │ │ │ └── typography.scss │ │ └── utilities/ │ │ ├── animations.scss │ │ ├── borders.scss │ │ ├── filters.scss │ │ ├── index.scss │ │ └── layout.scss │ ├── navigation/ │ │ ├── README.md │ │ ├── filter-list.scss │ │ ├── index.scss │ │ ├── sidenav.scss │ │ └── subnav.scss │ ├── pagination/ │ │ ├── README.md │ │ ├── index.scss │ │ └── pagination.scss │ ├── primitives/ │ │ ├── index.scss │ │ └── temp-typography-tokens.scss │ ├── product/ │ │ ├── README.md │ │ └── index.scss │ ├── select-menu/ │ │ ├── README.md │ │ ├── index.scss │ │ └── select-menu.scss │ ├── support/ │ │ ├── README.md │ │ ├── index.scss │ │ ├── mixins/ │ │ │ ├── color-modes.scss │ │ │ ├── layout.scss │ │ │ ├── misc.scss │ │ │ └── typography.scss │ │ └── variables/ │ │ ├── layout.scss │ │ ├── misc.scss │ │ └── typography.scss │ ├── table-object/ │ │ ├── index.scss │ │ └── table-object.scss │ ├── toasts/ │ │ ├── README.md │ │ ├── index.scss │ │ └── toasts.scss │ ├── tooltips/ │ │ ├── README.md │ │ ├── index.scss │ │ └── tooltips.scss │ └── utilities/ │ ├── README.md │ ├── animations.scss │ ├── borders.scss │ ├── box-shadow.scss │ ├── colors.scss │ ├── details.scss │ ├── flexbox.scss │ ├── index.scss │ ├── layout.scss │ ├── margin.scss │ ├── padding.scss │ ├── typography.scss │ └── visibility-display.scss └── stylelint.config.cjs
SYMBOL INDEX (30 symbols across 9 files)
FILE: __tests__/utils/css.js
function diffLists (line 11) | function diffLists(before, after) {
function getSelectors (line 21) | function getSelectors(versionPath) {
function getVariables (line 26) | function getVariables(versionPath) {
function getCurrentVersion (line 31) | function getCurrentVersion() {
function getPackageStats (line 36) | function getPackageStats(packageName) {
function getDeprecations (line 41) | function getDeprecations(versionPath) {
function currentVersionSelectors (line 46) | function currentVersionSelectors() {
function currentVersionVariables (line 50) | function currentVersionVariables() {
function currentVersionDeprecations (line 54) | function currentVersionDeprecations() {
function lastVersionSelectors (line 58) | function lastVersionSelectors() {
function lastVersionVariables (line 62) | function lastVersionVariables() {
function getSelectorDiff (line 66) | function getSelectorDiff() {
function getVariableDiff (line 70) | function getVariableDiff() {
FILE: __tests__/utils/docs.js
function collectNavLinks (line 12) | function collectNavLinks(links) {
function getNavigationLinks (line 26) | function getNavigationLinks() {
function getContentFrontmatter (line 31) | async function getContentFrontmatter() {
FILE: docs/stories/helpers/pageLayoutBehavior.jsx
function PageLayoutBehavior (line 2) | function PageLayoutBehavior() {
FILE: script/analyze-variables.js
function analyzeVariables (line 21) | async function analyzeVariables(fileName) {
function checkNode (line 44) | function checkNode(node) {
function collectVariables (line 54) | function collectVariables() {
FILE: script/bundle-size-report.js
function getBundles (line 15) | function getBundles(path) {
function isSupportBundleName (line 134) | function isSupportBundleName(bundleName) {
FILE: script/dist.js
function dist (line 26) | async function dist() {
function getExternalImports (line 85) | function getExternalImports(scss, relativeTo) {
function getPathName (line 96) | function getPathName(path) {
function writeVariableData (line 102) | async function writeVariableData() {
FILE: script/primer-css-compiler.js
function compiler (line 4) | async function compiler(css, options) {
FILE: script/stylelint-add-disables.js
function isDisableComment (line 54) | function isDisableComment(line) {
FILE: script/stylelint-remove-disables.js
constant REMOVED (line 11) | const REMOVED = `===REMOVED@${Date.now()}===`
function parseDisableComment (line 73) | function parseDisableComment(str) {
Condensed preview — 277 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (929K chars).
[
{
"path": ".changeset/README.md",
"chars": 512,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 285,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.5.0/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\","
},
{
"path": ".github/CODEOWNERS",
"chars": 189,
"preview": "* @primer/design-reviewers @primer/engineer-reviewers\npackage.json @primer/design-reviewers @primer/engineer-reviewers\np"
},
{
"path": ".github/ISSUE_TEMPLATE/primer-bug-report.md",
"chars": 821,
"preview": "---\nname: Primer CSS bug report\nabout: Create a report to help us improve Primer CSS\n\n---\n\n**Describe the bug**\nA clear "
},
{
"path": ".github/ISSUE_TEMPLATE/primer-feature-request.md",
"chars": 571,
"preview": "---\nname: Primer CSS feature request\nabout: Suggest an idea for this project\n\n---\n\n**Is your feature request related to "
},
{
"path": ".github/ISSUE_TEMPLATE/style-guide-bug-report.md",
"chars": 811,
"preview": "---\nname: Style guide bug report\nabout: Create a report to help us improve\n\n---\n\n**Describe the bug**\nA clear and concis"
},
{
"path": ".github/dependabot.yml",
"chars": 716,
"preview": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where "
},
{
"path": ".github/pull_request_template.md",
"chars": 798,
"preview": "### What are you trying to accomplish?\n\n<!-- Please provide a short description of the changes and link to any related i"
},
{
"path": ".github/release_template.md",
"chars": 283,
"preview": "Preparing for a release.\n\n### Checklist\n\nMake sure these items are checked before merging.\n\n- [ ] Preview the docs chang"
},
{
"path": ".github/workflows/axe.yml",
"chars": 1436,
"preview": "name: axe\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\njobs:\n axe:\n runs-on: ub"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1315,
"preview": "name: CI\non:\n push:\n branches:\n - main\n pull_request:\njobs:\n stylelint:\n runs-on: ubuntu-latest\n steps:"
},
{
"path": ".github/workflows/codeql.yml",
"chars": 2339,
"preview": "# For most projects, this workflow file will not need changing; you simply need\n# to commit it to your repository.\n#\n# Y"
},
{
"path": ".github/workflows/deploy_preview.yml",
"chars": 1684,
"preview": "name: Deploy\non:\n pull_request:\n\npermissions:\n contents: write\n pages: write\n id-token: write\n deployments: write\n "
},
{
"path": ".github/workflows/deploy_production.yml",
"chars": 1329,
"preview": "name: Deploy\non:\n push:\n branches:\n - 'main'\n workflow_dispatch:\n\npermissions:\n contents: write\n pages: writ"
},
{
"path": ".github/workflows/release.yml",
"chars": 3610,
"preview": "name: Release\non:\n push:\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref }}\n cancel-in-progress: true\n\npe"
},
{
"path": ".github/workflows/release_tracking.yml",
"chars": 389,
"preview": "name: Release Event Tracking\n# Measure a datadog event every time a release occurs\n\non:\n pull_request:\n types:\n "
},
{
"path": ".github/workflows/stale.yml",
"chars": 1057,
"preview": "name: Stale\non:\n schedule:\n - cron: '0 * * * *'\n\njobs:\n stale:\n runs-on: ubuntu-latest\n steps:\n - uses: "
},
{
"path": ".github/workflows/welcome.yml",
"chars": 5527,
"preview": "name: Welcome\non:\n pull_request:\n types:\n # On by default if you specify no types.\n - \"opened\"\n - \"re"
},
{
"path": ".gitignore",
"chars": 163,
"preview": "*.log\n*.tgz\n.DS_Store\n.cache/\n.changelog/\n.next/\n.sass-cache\n.storybuild/\n.stylelintcache\n_site\ndist/\ndocs/dist\nnode_mod"
},
{
"path": ".npmignore",
"chars": 178,
"preview": "__tests__/\n.changeset/\n.github/\ndocs/\nscript/\n# we ignore this because everything in src/ is copied out in script/prepub"
},
{
"path": ".npmrc",
"chars": 71,
"preview": "git-tag-version=false\nlegacy-peer-deps=true\nno-audit=true\nno-fund=true\n"
},
{
"path": ".vercelignore",
"chars": 48,
"preview": ".*.sw?\n.changelog/\ndist/\ndocs/dist\ndocs/public/\n"
},
{
"path": ".vscode/story-template.code-snippets",
"chars": 3276,
"preview": "{\n \"story-template\": {\n \"prefix\": \"story-template\",\n \"body\": [\n \"import React from 'react'\","
},
{
"path": "CHANGELOG.md",
"chars": 147132,
"preview": "# @primer/css\n\n## 22.1.1\n\n### Patch Changes\n\n- [#3012](https://github.com/primer/css/pull/3012) [`31df244`](https://gith"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3350,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 5559,
"preview": "## Contributing\n\n> [!WARNING] \n> **This project is in KTLO mode!** New features, functionalities, or major enhancements "
},
{
"path": "DEVELOP.md",
"chars": 4224,
"preview": "# Primer CSS Development\n\n> [!WARNING]\n> **This project is in KTLO mode!** New features, functionalities, or major enhan"
},
{
"path": "LICENSE",
"chars": 1078,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2021 GitHub Inc.\n\nPermission is hereby granted, free of charge, to any person obtai"
},
{
"path": "README.md",
"chars": 2414,
"preview": "# Primer CSS\nThe CSS implementation of GitHub's Primer Design System\n\n[![npm package](https://img.shields.io/npm/v/@prim"
},
{
"path": "RELEASING.md",
"chars": 2010,
"preview": "# Releasing a new version of Primer CSS 🎉\n\n## Prepare the release (in `primer/css`)\n\nThe release process is automated by"
},
{
"path": "__tests__/.eslintrc.json",
"chars": 103,
"preview": "{\n \"extends\": [\n \"plugin:jest/recommended\"\n ],\n \"rules\": {\n \"eslint-comments/no-use\": 0\n }\n}\n"
},
{
"path": "__tests__/build.test.js",
"chars": 1275,
"preview": "import fs from 'fs'\n\nlet distDir\n\nbeforeAll(() => {\n distDir = fs.readdirSync('./dist')\n})\n\ndescribe('./dist/ folder', "
},
{
"path": "__tests__/css.test.js",
"chars": 891,
"preview": "import {\n getCurrentVersion,\n getPackageStats,\n getSelectorDiff,\n getVariableDiff,\n currentVersionDeprecations\n} fr"
},
{
"path": "__tests__/docs.test.js",
"chars": 810,
"preview": "import {getNavigationLinks, getContentFrontmatter} from './utils/docs'\n\nlet navLinks, contentFM\n\nbeforeAll(async () => {"
},
{
"path": "__tests__/utils/css.js",
"chars": 2046,
"preview": "import {join, dirname} from 'path'\nimport semver from 'semver'\nimport { fileURLToPath } from 'url'\nimport fs from 'fs'\n\n"
},
{
"path": "__tests__/utils/docs.js",
"chars": 1167,
"preview": "import fs from 'fs'\nimport frontMatter from 'front-matter'\nimport yaml from 'js-yaml'\nimport {globby} from 'globby'\nimpo"
},
{
"path": "deprecations.js",
"chars": 859,
"preview": "/**\n Deprecated Selectors\n -------------------------\n These are deprecated selectors and should not be used. Th"
},
{
"path": "docs/.babelrc",
"chars": 191,
"preview": "{\n \"sourceType\": \"unambiguous\",\n \"presets\": [\n \"@babel/preset-react\",\n [\n \"@babel/preset-env\",\n {\n "
},
{
"path": "docs/.eslintrc.json",
"chars": 383,
"preview": "{\n \"extends\": [\n \"plugin:react/recommended\",\n \"plugin:jsx-a11y/recommended\",\n \"plugin:storybook/recommended\"\n "
},
{
"path": "docs/.storybook/main.js",
"chars": 726,
"preview": "/** @type { import('@storybook/react-webpack5').StorybookConfig } */\nconst config = {\n stories: ['../stories/**/*.mdx',"
},
{
"path": "docs/.storybook/manager.js",
"chars": 113,
"preview": "import {addons} from '@storybook/manager-api'\nimport theme from './theme'\n\naddons.setConfig({\n theme: theme,\n})\n"
},
{
"path": "docs/.storybook/preview-head.html",
"chars": 97,
"preview": "<link href=\"https://unpkg.com/@github/details-dialog-element/dist/index.css\" rel=\"stylesheet\" />\n"
},
{
"path": "docs/.storybook/preview.css",
"chars": 1303,
"preview": "@import '@primer/primitives/dist/css/base/size/size.css';\n@import '@primer/primitives/dist/css/base/typography/typograph"
},
{
"path": "docs/.storybook/preview.js",
"chars": 3989,
"preview": "import '../../src/docs.scss'\nimport '../../src/index.scss'\nimport '../../src/base/index.scss'\nimport './preview.css'\nimp"
},
{
"path": "docs/.storybook/storybook.css",
"chars": 1331,
"preview": ".story-wrap {\n font-family: var(--fontStack-system);\n color: var(--fgColor-default);\n}\n\n#storybook-preview-wrapper {\n "
},
{
"path": "docs/.storybook/theme.js",
"chars": 1680,
"preview": "import {create} from '@storybook/theming'\nimport packageJson from '../../package.json'\n\nexport default create({\n brandT"
},
{
"path": "docs/package.json",
"chars": 958,
"preview": "{\n \"private\": true,\n \"name\": \"docs\",\n \"repository\": \"primer/css\",\n \"scripts\": {\n \"storybook\": \"NODE_ENV=test stor"
},
{
"path": "docs/postcss.config.js",
"chars": 398,
"preview": "// This config file is necessary to get postcss-loader to work in\n// ./src/@primer/gatsby-theme-doctocat/components/live"
},
{
"path": "docs/script/build-storybook",
"chars": 423,
"preview": "#!/bin/bash\nset -e\n# Add base url to be able to serve static files\nif [ -n \"$1\" ]; then\n echo '<base href=\"/storybook/\""
},
{
"path": "docs/stories/Contributing.mdx",
"chars": 4031,
"preview": "While this contributing guide is for GitHub employees, all contributions from the community are welcome.\n\n## Adding new "
},
{
"path": "docs/stories/GettingStarted.mdx",
"chars": 4773,
"preview": "Primer CSS is [open-sourced on GitHub](https://github.com/primer/css) and [available on npm](https://www.npmjs.com/packa"
},
{
"path": "docs/stories/Introduction.mdx",
"chars": 4202,
"preview": "<img src=\"hero-illustration.svg\" alt=\"\" class=\"mb-3\" />\n\n{/*\nTODO: Fix old docs deploy & get working link\n<div className"
},
{
"path": "docs/stories/components/Layout/AppFrame.stories.jsx",
"chars": 3009,
"preview": "import React from 'react'\nimport clsx from 'clsx'\n//import { AppHeaderTemplate as AppHeader } from '../App/AppHeader.sto"
},
{
"path": "docs/stories/components/Layout/LayoutAlpha.stories.jsx",
"chars": 5193,
"preview": "import React from 'react'\nimport clsx from 'clsx'\n\nexport default {\n title: 'Components/Layout/Alpha',\n excludeStories"
},
{
"path": "docs/stories/components/Layout/LayoutBeta.stories.jsx",
"chars": 15966,
"preview": "import React from 'react'\nimport clsx from 'clsx'\nimport PageLayoutBehavior from '../../helpers/pageLayoutBehavior.jsx'\n"
},
{
"path": "docs/stories/components/Layout/PageLayout.stories.jsx",
"chars": 9385,
"preview": "// create a \"playground\" demo page that may set some defaults and allow story to access component controls\nimport React "
},
{
"path": "docs/stories/components/Layout/SplitPageLayout.stories.jsx",
"chars": 3964,
"preview": "// create a \"playground\" demo page that may set some defaults and allow story to access component controls\nimport React "
},
{
"path": "docs/stories/components/Layout/Stack.stories.jsx",
"chars": 16811,
"preview": "import React from 'react'\nimport clsx from 'clsx'\n\nexport default {\n title: 'Components/Layout/Stack',\n excludeStories"
},
{
"path": "docs/stories/components/Layout/StackExamples.stories.jsx",
"chars": 2411,
"preview": "import React from 'react'\nimport {\n StackTemplate\n} from './Stack.stories'\n\nexport default {\n title: 'Components/Layou"
},
{
"path": "docs/stories/components/Layout/StackFeatures.stories.jsx",
"chars": 8173,
"preview": "import React from 'react'\nimport {\n StackTemplate\n} from './Stack.stories'\n\nexport default {\n title: 'Components/Layou"
},
{
"path": "docs/stories/deprecated-components/BoxOverlay/BoxOverlay.mdx",
"chars": 663,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as BoxOverlayStories from './BoxOverlay.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.tsx",
"chars": 2950,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/BranchName/BranchName.mdx",
"chars": 285,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as BranchNameStories from './BranchName.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/BranchName/BranchName.stories.tsx",
"chars": 1227,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Button/Button.mdx",
"chars": 4156,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as ButtonStories from './Button.stories'\n\n<Meta of={Butt"
},
{
"path": "docs/stories/deprecated-components/Button/Button.stories.tsx",
"chars": 14513,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/FilterList/FilterList.mdx",
"chars": 356,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as FilterListStories from './FilterList.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/FilterList/FilterList.stories.tsx",
"chars": 785,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Forms/Forms.mdx",
"chars": 4669,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as FormsStories from './Forms.stories'\n\n<Meta of={FormsS"
},
{
"path": "docs/stories/deprecated-components/Forms/Forms.stories.tsx",
"chars": 14836,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Header/Header.mdx",
"chars": 1772,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as HeaderStories from './Header.stories'\n\n<Meta of={Head"
},
{
"path": "docs/stories/deprecated-components/Header/Header.stories.tsx",
"chars": 3093,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/IssueLabel/IssueLabel.mdx",
"chars": 423,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as IssueLabelStories from './IssueLabel.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/IssueLabel/IssueLabel.stories.tsx",
"chars": 1318,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Loaders/Loaders.mdx",
"chars": 371,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as LoaderStories from './Loaders.stories'\n\n<Meta of={Loa"
},
{
"path": "docs/stories/deprecated-components/Loaders/Loaders.stories.tsx",
"chars": 847,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Markdown/Markdown.stories.tsx",
"chars": 13099,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Marketing/Marketing.mdx",
"chars": 830,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as MarketingStories from './Marketing.stories'\n\n<Meta of"
},
{
"path": "docs/stories/deprecated-components/Marketing/Marketing.stories.tsx",
"chars": 6781,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Pagination/Pagination.mdx",
"chars": 1301,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as PaginationStories from './Pagination.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/Pagination/Pagination.stories.tsx",
"chars": 1481,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/SelectMenu/SelectMenu.mdx",
"chars": 6035,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as SelectMenuStories from './SelectMenu.stories'\n\n<Meta "
},
{
"path": "docs/stories/deprecated-components/SelectMenu/SelectMenu.stories.tsx",
"chars": 43241,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/SideNav/SideNav.mdx",
"chars": 1234,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as SideNavStories from './SideNav.stories'\n\n<Meta of={Si"
},
{
"path": "docs/stories/deprecated-components/SideNav/SideNav.stories.tsx",
"chars": 6729,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/SubNav/SubNav.mdx",
"chars": 569,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as SubNavStories from './SubNav.stories'\n\n<Meta of={SubN"
},
{
"path": "docs/stories/deprecated-components/SubNav/SubNav.stories.tsx",
"chars": 3604,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Toast/Toast.mdx",
"chars": 1571,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as ToastStories from './Toast.stories'\n\n<Meta of={ToastS"
},
{
"path": "docs/stories/deprecated-components/Toast/Toast.stories.tsx",
"chars": 8582,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/deprecated-components/Tooltip/Tooltip.mdx",
"chars": 2513,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as TooltipStories from './Tooltip.stories'\n\n<Meta of={To"
},
{
"path": "docs/stories/deprecated-components/Tooltip/Tooltip.stories.tsx",
"chars": 5489,
"preview": "import React from 'react'\nimport {BADGE} from '@geometricpanda/storybook-addon-badges'\n\nexport default {\n title: 'Depre"
},
{
"path": "docs/stories/helpers/pageLayoutBehavior.jsx",
"chars": 1438,
"preview": "import React from 'react'\nexport default function PageLayoutBehavior() {\n\n const pageLayoutSelector = '.PageLayout.Page"
},
{
"path": "docs/stories/principles/Accessibility.mdx",
"chars": 12042,
"preview": "# Accessibility\n\nAccessibility is everyone’s responsibility, and the purpose of this document is to provide general acce"
},
{
"path": "docs/stories/principles/HTML.mdx",
"chars": 3007,
"preview": "# HTML\n\n## General formatting\n\n- Use soft-tabs with a two space indent. Spaces are the only way to guarantee code render"
},
{
"path": "docs/stories/principles/Principles.mdx",
"chars": 10398,
"preview": "# Principles\n\nThe CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and "
},
{
"path": "docs/stories/principles/SCSS.mdx",
"chars": 2042,
"preview": "# SCSS\n\n## Spacing\n\n- Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same "
},
{
"path": "docs/stories/support/Breakpoints.mdx",
"chars": 5453,
"preview": "# Breakpoints\n\nOur breakpoints are based on screen widths where our content starts to break. **Our breakpoints may chang"
},
{
"path": "docs/stories/support/Deprecations.mdx",
"chars": 1776,
"preview": "# Deprecations\n\nAs of version 12.7.0, we publish CSS selector and SCSS variable deprecation data (as of 14.0.0) with `@p"
},
{
"path": "docs/stories/support/Linting.mdx",
"chars": 6037,
"preview": "# Linting\n\nWe use linters to enforce coding principles and standards. On every pull request we run the linters on the co"
},
{
"path": "docs/stories/support/Prototyping.mdx",
"chars": 1446,
"preview": "# Prototyping\n\nYou're welcome to use whatever prototyping tool suits your needs, however we've set up some options that "
},
{
"path": "docs/stories/support/Spacing.mdx",
"chars": 3890,
"preview": "# Spacing\n\n## Spacing scale\n\nThe spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly "
},
{
"path": "docs/stories/support/Theming.mdx",
"chars": 4237,
"preview": "# Theming\n\nPrimer CSS offers multiple color themes for components and utilities. The colors change based on the active t"
},
{
"path": "docs/stories/support/Typography.mdx",
"chars": 3270,
"preview": "# Typography\n\n## Type scale\n\nThe typography scale is designed to work for GitHub's product UI and marketing sites. Font "
},
{
"path": "docs/stories/utilities/Animation.stories.jsx",
"chars": 6972,
"preview": "export default {\n title: 'Utilities/Animation'\n}\n\nexport const FadeIn = ({}) => (\n <div class=\"anim-fade-in\">\n <svg"
},
{
"path": "docs/stories/utilities/Border.stories.jsx",
"chars": 2783,
"preview": "export default {\n title: 'Utilities/Border'\n}\n\nexport const Default = ({}) => <span class=\"color-bg-subtle p-2 border\">"
},
{
"path": "docs/stories/utilities/Color.stories.jsx",
"chars": 10748,
"preview": "export default {\n title: 'Utilities/Color',\n}\n\nexport const Text = ({}) => (\n <div style={{display: 'inline-flex', fle"
},
{
"path": "docs/stories/utilities/Details.stories.jsx",
"chars": 1089,
"preview": "export default {\n title: 'Utilities/Details'\n}\n\nexport const Overlay = ({}) => (\n <details class=\"details-overlay\">\n "
},
{
"path": "docs/stories/utilities/Flexbox.stories.jsx",
"chars": 17033,
"preview": "export default {\n title: 'Utilities/Flexbox'\n}\n\nexport const Flex = ({}) => (\n <div class=\"border d-flex\">\n <div cl"
},
{
"path": "docs/stories/utilities/Grid.stories.jsx",
"chars": 9940,
"preview": "export default {\n title: 'Utilities/Grid'\n}\n\nexport const Flexbox = ({}) => (\n <div class=\"d-flex flex-column flex-md-"
},
{
"path": "docs/stories/utilities/Layout.stories.jsx",
"chars": 13694,
"preview": "export default {\n title: 'Utilities/Layout'\n}\n\nexport const Display = ({}) => (\n <div class=\"d-inline border\">\n .d-"
},
{
"path": "docs/stories/utilities/Margin.stories.jsx",
"chars": 3760,
"preview": "export default {\n title: 'Utilities/Margin'\n}\n\nexport const Uniform = ({}) => (\n <div class=\"d-flex flex-items-baselin"
},
{
"path": "docs/stories/utilities/MarketingFilters.mdx",
"chars": 432,
"preview": "import {Canvas, Meta} from '@storybook/blocks'\n\nimport * as MarketingFiltersStories from './MarketingFilters.stories'\n\n<"
},
{
"path": "docs/stories/utilities/MarketingFilters.stories.jsx",
"chars": 196,
"preview": "export default {\n title: 'Utilities/Marketing/Filters',\n}\n\nexport const Grayscale = ({}) => (\n <>\n <img src=\"https:"
},
{
"path": "docs/stories/utilities/MarketingLayout.mdx",
"chars": 996,
"preview": "import {Canvas, Meta} from '@storybook/blocks'\n\nimport * as MarketingLayoutStories from './MarketingLayout.stories'\n\n<Me"
},
{
"path": "docs/stories/utilities/MarketingLayout.stories.jsx",
"chars": 691,
"preview": "export default {\n title: 'Utilities/Marketing/Layout',\n}\n\nexport const Positions = ({}) => (\n <>\n <div class=\"posit"
},
{
"path": "docs/stories/utilities/MarketingTypography.mdx",
"chars": 995,
"preview": "import {Canvas, Meta, Story} from '@storybook/blocks'\n\nimport * as MarketingTypographyStories from './MarketingTypograph"
},
{
"path": "docs/stories/utilities/MarketingTypography.stories.jsx",
"chars": 3091,
"preview": "export default {\n title: 'Utilities/Marketing/Typography',\n}\n\nexport const HeadingUtilities = ({}) => (\n <>\n <p cla"
},
{
"path": "docs/stories/utilities/Padding.stories.jsx",
"chars": 2683,
"preview": "export default {\n title: 'Utilities/Padding'\n}\n\nexport const Uniform = ({}) => (\n <div>\n <div class=\"p-0 mr-3 color"
},
{
"path": "docs/stories/utilities/Shadow.stories.jsx",
"chars": 2795,
"preview": "export default {\n title: 'Utilities/Shadow'\n}\n\nexport const Small = ({}) => (\n <span class=\"color-shadow-small p-2\">\n "
},
{
"path": "docs/stories/utilities/Typography.stories.jsx",
"chars": 4331,
"preview": "export default {\n title: 'Utilities/Typography'\n}\n\nexport const Heading = ({}) => (\n <div>\n <p class=\"h1\">Pizza .h1"
},
{
"path": "eslint.config.cjs",
"chars": 106,
"preview": "module.exports = [{\n \"languageOptions\": {\n \"sourceType\": \"module\",\n \"ecmaVersion\": \"latest\"\n }\n}]\n"
},
{
"path": "migrations/v16.md",
"chars": 18684,
"preview": "Primer v16.0.0 introduces the idea of _color modes_ and _functional variables_. A color mode defines a set of colors in "
},
{
"path": "migrations/v18.md",
"chars": 3760,
"preview": "Primer CSS `v18.0.0` replaces color modes V1 with V2. To help with the migration, please refer to the guide below.\n\n<Not"
},
{
"path": "package.json",
"chars": 3169,
"preview": "{\n \"name\": \"@primer/css\",\n \"version\": \"22.1.1\",\n \"description\": \"The CSS implementation of GitHub's Primer Design Sys"
},
{
"path": "postcss.config.cjs",
"chars": 531,
"preview": "const autoprefixer = require('autoprefixer')\nconst sass = require('@csstools/postcss-sass')\nconst scss = require('postcs"
},
{
"path": "prettier.config.cjs",
"chars": 52,
"preview": "module.exports = require('@github/prettier-config')\n"
},
{
"path": "script/.eslintrc.json",
"chars": 41,
"preview": "{\n \"rules\": {\n \"no-console\": 0\n }\n}\n"
},
{
"path": "script/analyze-variables.js",
"chars": 2869,
"preview": "#!/usr/bin/env node\nimport postcss from 'postcss'\nimport {join} from 'path'\nimport fs from 'fs'\nimport atImport from 'po"
},
{
"path": "script/axe-docs",
"chars": 2925,
"preview": "#!/bin/bash\n\n# This workflow runs axe checks on modified doc/content/components/* or doc/content/components/* pages beca"
},
{
"path": "script/build-css.js",
"chars": 790,
"preview": "#!/usr/bin/env node\nimport {globby} from 'globby'\nimport compiler from './primer-css-compiler.js'\nimport {dirname, join}"
},
{
"path": "script/build-docs",
"chars": 261,
"preview": "#!/bin/bash -e\n\n# Build the base project so we can pull out the JSON data\nnpm run dist\ncp -rf dist docs\n\n# Now build the"
},
{
"path": "script/bundle-size-report.js",
"chars": 3593,
"preview": "#!/usr/bin/env node\nimport { join } from 'path'\nimport { table } from 'table'\nimport { dirname } from 'path'\nimport { fi"
},
{
"path": "script/check-for-changeset",
"chars": 1131,
"preview": "#! /bin/bash\n\nDEEPEN_LENGTH=${DEEPEN_LENGTH:-10}\nMAX_DEPTH=${MAX_DEPTH:-300}\n\ndepth=0\n\n# Fetch the base ref, i.e. main\ng"
},
{
"path": "script/dist.js",
"chars": 3453,
"preview": "#!/usr/bin/env node\nimport {globby} from 'globby'\nimport compiler from './primer-css-compiler.js'\nimport cssstats from '"
},
{
"path": "script/prepublish",
"chars": 215,
"preview": "#!/bin/bash\nset -e\n\n# generate the build directory\nnpm run dist > /dev/null\n\nfiles=$(git ls-files src | sed -e 's#^src/#"
},
{
"path": "script/pretest",
"chars": 139,
"preview": "#!/bin/bash\nset -e\n\nmkdir -p tmp\ncd tmp\necho \"{\\\"package\\\":\\\"tmp\\\",\\\"version\\\":\\\"0.0.0\\\"}\" > package.json\nnpm i @primer/"
},
{
"path": "script/primer-css-compiler.js",
"chars": 292,
"preview": "import postcss from 'postcss'\nimport postCssConfig from '../postcss.config.cjs'\n\nexport default async function compiler("
},
{
"path": "script/selector-diff-report",
"chars": 418,
"preview": "#!/bin/bash\nset -e\n\nfunction log() {\n echo \"$@\" 1>&2\n}\n\nfunction warn() {\n echo \"$@\" 1>&2\n}\n\npkg=\"@primer/css\"\npath=\"d"
},
{
"path": "script/stylelint-add-disables.js",
"chars": 2114,
"preview": "#!/usr/bin/env -S NODE_NO_WARNINGS=1 node\n// Disables stylelint rules in SASS/CSS files with next-line comments. This is"
},
{
"path": "script/stylelint-remove-disables.js",
"chars": 2565,
"preview": "#!/usr/bin/env node\nimport {execFile} from 'child_process'\nimport {readFileSync, writeFileSync} from 'fs'\n\nconst files ="
},
{
"path": "src/autocomplete/README.md",
"chars": 635,
"preview": "---\nbundle: \"autocomplete\"\ngenerated: true\n---\n\n# Primer CSS: `autocomplete` bundle\n\n## Usage\n\nPrimer CSS source files a"
},
{
"path": "src/autocomplete/index.scss",
"chars": 78,
"preview": "// support files\n@import '../support/index.scss';\n@import './suggester.scss';\n"
},
{
"path": "src/autocomplete/suggester.scss",
"chars": 2747,
"preview": "// Needs refactoring\n// stylelint-disable selector-max-type, selector-no-qualifying-type\n\n.suggester {\n position: relat"
},
{
"path": "src/avatars/README.md",
"chars": 615,
"preview": "---\nbundle: \"avatars\"\ngenerated: true\n---\n\n# Primer CSS: `avatars` bundle\n\n## Usage\n\nPrimer CSS source files are written"
},
{
"path": "src/avatars/avatar-parent-child.scss",
"chars": 508,
"preview": "// .avatar-parent-child is when you see a small avatar at the bottom right\n// corner of a larger avatar.\n//\n// No Styleg"
},
{
"path": "src/avatars/circle-badge.scss",
"chars": 1067,
"preview": "// Circle badge icon with drop shadow for icons and logos\n\n.CircleBadge {\n display: flex;\n align-items: center;\n just"
},
{
"path": "src/avatars/index.scss",
"chars": 114,
"preview": "@import '../support/index.scss';\n\n// Avatars\n@import './avatar-parent-child.scss';\n@import './circle-badge.scss';\n"
},
{
"path": "src/base/README.md",
"chars": 603,
"preview": "---\nbundle: \"base\"\ngenerated: true\n---\n\n# Primer CSS: `base` bundle\n\n## Usage\n\nPrimer CSS source files are written in [S"
},
{
"path": "src/base/base.scss",
"chars": 2800,
"preview": "// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography\n* {\n box-sizing: border-box;\n}\n\n"
},
{
"path": "src/base/index.scss",
"chars": 199,
"preview": "@import '../support/index.scss';\n@import './native-colors.scss';\n@import './normalize.scss';\n@import './base.scss';\n@imp"
},
{
"path": "src/base/kbd.scss",
"chars": 957,
"preview": "// Keyboard shortcuts\n// stylelint-disable selector-max-type\n\nkbd {\n display: inline-block;\n padding: var(--base-size-"
},
{
"path": "src/base/native-colors.scss",
"chars": 673,
"preview": "// color-scheme\n// Enables color modes for native elements\n\n@include color-mode(light) { color-scheme: light; }\n\n@includ"
},
{
"path": "src/base/normalize.scss",
"chars": 6635,
"preview": "// stylelint-disable\n/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the "
},
{
"path": "src/base/octicons.scss",
"chars": 123,
"preview": ".octicon {\n display: inline-block;\n overflow: visible !important;\n vertical-align: text-bottom;\n fill: currentColor;"
},
{
"path": "src/base/typography-base.scss",
"chars": 1526,
"preview": "// Headings\n// --------------------------------------------------\n// stylelint-disable selector-max-type\nh1,\nh2,\nh3,\nh4,"
},
{
"path": "src/box/README.md",
"chars": 599,
"preview": "---\nbundle: \"box\"\ngenerated: true\n---\n\n# Primer CSS: `box` bundle\n\n## Usage\n\nPrimer CSS source files are written in [SCS"
},
{
"path": "src/box/box-overlay.scss",
"chars": 1120,
"preview": ".Box--overlay {\n // stylelint-disable-next-line primer/responsive-widths\n width: 448px;\n margin-right: auto;\n margin"
},
{
"path": "src/box/index.scss",
"chars": 63,
"preview": "@import '../support/index.scss';\n@import './box-overlay.scss';\n"
},
{
"path": "src/branch-name/README.md",
"chars": 631,
"preview": "---\nbundle: \"branch-name\"\ngenerated: true\n---\n\n# Primer CSS: `branch-name` bundle\n\n## Usage\n\nPrimer CSS source files are"
},
{
"path": "src/branch-name/branch-name.scss",
"chars": 1018,
"preview": "// stylelint-disable selector-max-type, selector-no-qualifying-type\n\n// A nice way to display branch names inside the UI"
},
{
"path": "src/branch-name/index.scss",
"chars": 80,
"preview": "// support files\n@import '../support/index.scss';\n@import './branch-name.scss';\n"
},
{
"path": "src/buttons/README.md",
"chars": 615,
"preview": "---\nbundle: \"buttons\"\ngenerated: true\n---\n\n# Primer CSS: `buttons` bundle\n\n## Usage\n\nPrimer CSS source files are written"
},
{
"path": "src/buttons/button-group.scss",
"chars": 2376,
"preview": "// Button group\n//\n// A button group is a series of buttons laid out next to each other, all part\n// of one visual butto"
},
{
"path": "src/buttons/button.scss",
"chars": 10924,
"preview": "// stylelint-disable selector-max-type, no-duplicate-selectors\n\n// Base button styles\n.btn {\n position: relative;\n dis"
},
{
"path": "src/buttons/index.scss",
"chars": 112,
"preview": "@import '../support/index.scss';\n@import './button.scss';\n@import './button-group.scss';\n@import './misc.scss';\n"
},
{
"path": "src/buttons/misc.scss",
"chars": 6175,
"preview": "// stylelint-disable selector-max-type\n\n// Link-like buttons\n//\n// This class is for styling <button> and <input> elemen"
},
{
"path": "src/color-modes/index.scss",
"chars": 368,
"preview": "// All themes\n\n@import './themes/light.scss';\n@import './themes/light_colorblind.scss';\n@import './themes/light_high_con"
},
{
"path": "src/color-modes/themes/dark.scss",
"chars": 62,
"preview": "@import '@primer/primitives/dist/css/functional/themes/dark';\n"
},
{
"path": "src/color-modes/themes/dark_colorblind.scss",
"chars": 73,
"preview": "@import '@primer/primitives/dist/css/functional/themes/dark-colorblind';\n"
},
{
"path": "src/color-modes/themes/dark_dimmed.scss",
"chars": 69,
"preview": "@import '@primer/primitives/dist/css/functional/themes/dark-dimmed';\n"
},
{
"path": "src/color-modes/themes/dark_high_contrast.scss",
"chars": 76,
"preview": "@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast';\n"
},
{
"path": "src/color-modes/themes/dark_tritanopia.scss",
"chars": 73,
"preview": "@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia';\n"
},
{
"path": "src/color-modes/themes/light.scss",
"chars": 63,
"preview": "@import '@primer/primitives/dist/css/functional/themes/light';\n"
},
{
"path": "src/color-modes/themes/light_colorblind.scss",
"chars": 74,
"preview": "@import '@primer/primitives/dist/css/functional/themes/light-colorblind';\n"
},
{
"path": "src/color-modes/themes/light_high_contrast.scss",
"chars": 77,
"preview": "@import '@primer/primitives/dist/css/functional/themes/light-high-contrast';\n"
},
{
"path": "src/color-modes/themes/light_tritanopia.scss",
"chars": 74,
"preview": "@import '@primer/primitives/dist/css/functional/themes/light-tritanopia';\n"
},
{
"path": "src/core/README.md",
"chars": 603,
"preview": "---\nbundle: \"core\"\ngenerated: true\n---\n\n# Primer CSS: `core` bundle\n\n## Usage\n\nPrimer CSS source files are written in [S"
},
{
"path": "src/core/index.scss",
"chars": 610,
"preview": "/*!\n * @primer/css/core\n * http://primer.style/css\n *\n * Released under MIT license. Copyright (c) 2019 GitHub Inc.\n */\n"
},
{
"path": "src/deprecations.json",
"chars": 15586,
"preview": "{\n \"selectors\": {\n \"color-text-primary\": \"color-fg-default\",\n \"color-text-secondary\": \"color-fg-muted\",\n \"colo"
},
{
"path": "src/docs.scss",
"chars": 330,
"preview": "/*!\n * Primer CSS\n * https://primer.style\n *\n * Released under MIT license.\n */\n\n// Docs styles\n// Only meant for the do"
},
{
"path": "src/forms/README.md",
"chars": 607,
"preview": "---\nbundle: \"forms\"\ngenerated: true\n---\n\n# Primer CSS: `forms` bundle\n\n## Usage\n\nPrimer CSS source files are written in "
},
{
"path": "src/forms/form-control.scss",
"chars": 7812,
"preview": "// Needs refactoring\n// stylelint-disable selector-no-qualifying-type\n// stylelint-disable selector-max-type\n// Base for"
},
{
"path": "src/forms/form-group.scss",
"chars": 7750,
"preview": "// stylelint-disable selector-max-type\n\n// Form groups\n//\n// Usage:\n//\n// <div class=\"form-group\">\n// <div class=\"form"
},
{
"path": "src/forms/form-select.scss",
"chars": 1950,
"preview": "// Custom select\n//\n// Apply `.select` to any `<select>` element for custom styles.\n.form-select {\n display: inline-blo"
},
{
"path": "src/forms/index.scss",
"chars": 183,
"preview": "@import '../support/index.scss';\n@import './form-control.scss';\n@import './form-select.scss';\n@import './form-group.scss"
},
{
"path": "src/forms/input-group.scss",
"chars": 1787,
"preview": ".input-group {\n display: table;\n\n .form-control {\n position: relative;\n width: 100%;\n\n &:focus {\n z-inde"
},
{
"path": "src/forms/radio-group.scss",
"chars": 1976,
"preview": "// Tab like radio group\n\n.radio-group {\n @include clearfix;\n}\n\n.radio-label {\n float: left;\n // stylelint-disable-nex"
},
{
"path": "src/header/README.md",
"chars": 611,
"preview": "---\nbundle: \"header\"\ngenerated: true\n---\n\n# Primer CSS: `header` bundle\n\n## Usage\n\nPrimer CSS source files are written i"
},
{
"path": "src/header/header.scss",
"chars": 1394,
"preview": ".Header {\n z-index: 32; // TODO: Figure out z-index system\n display: flex;\n padding: var(--base-size-16);\n // stylel"
},
{
"path": "src/header/index.scss",
"chars": 58,
"preview": "@import '../support/index.scss';\n@import './header.scss';\n"
},
{
"path": "src/index.scss",
"chars": 470,
"preview": "/*!\n * Primer CSS\n * https://primer.style\n *\n * Released under MIT license.\n */\n\n// Primer main file\n//\n// Imports all P"
},
{
"path": "src/labels/README.md",
"chars": 611,
"preview": "---\nbundle: \"labels\"\ngenerated: true\n---\n\n# Primer CSS: `labels` bundle\n\n## Usage\n\nPrimer CSS source files are written i"
},
{
"path": "src/labels/index.scss",
"chars": 89,
"preview": "@import '../support/index.scss';\n@import './mixins.scss';\n@import './issue-labels.scss';\n"
},
{
"path": "src/labels/issue-labels.scss",
"chars": 516,
"preview": "// Issue Labels\n\n// TODO: Replace with .Label once solid backgrounds are supported\n\n.IssueLabel {\n @include labels-base"
},
{
"path": "src/labels/mixins.scss",
"chars": 1167,
"preview": "// Label mixins\n\n// Default: 20px\n// Large: 24px\n// Inline: em based\n\n@mixin labels-base {\n display: inline-block;\n //"
},
{
"path": "src/layout/README.md",
"chars": 611,
"preview": "---\nbundle: \"layout\"\ngenerated: true\n---\n\n# Primer CSS: `layout` bundle\n\n## Usage\n\nPrimer CSS source files are written i"
},
{
"path": "src/layout/app-frame.scss",
"chars": 3506,
"preview": "// stylelint-disable max-nesting-depth\n// stylelint-disable primer/spacing\n\n.AppFrame {\n\n // AppFrame structure\n // =="
},
{
"path": "src/layout/container.scss",
"chars": 559,
"preview": "// Fixed-width, centered column for site content.\n// Handy container styles that match our breakpoints\n\n// 544px\n.contai"
},
{
"path": "src/layout/grid-offset.scss",
"chars": 1051,
"preview": "// Optional offset options to work with grid.scss\n\n// Offset Columns\n\n@each $breakpoint, $variant in $responsive-variant"
},
{
"path": "src/layout/grid.scss",
"chars": 3040,
"preview": "// GRID\n\n// Columns\n\n// stylelint-disable-next-line declaration-property-value-no-unknown\n.col-1 { width: (1 * 0.083333"
}
]
// ... and 77 more files (download for full content)
About this extraction
This page contains the full source code of the primer/css GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 277 files (858.4 KB), approximately 263.3k tokens, and a symbol index with 30 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.