s) 35 | > code { 36 | padding: 0; 37 | margin: 0; 38 | word-break: normal; 39 | white-space: pre; 40 | background: transparent; 41 | border: 0; 42 | } 43 | } 44 | 45 | .highlight { 46 | margin-bottom: var(--base-size-16); 47 | 48 | pre { 49 | margin-bottom: 0; 50 | word-break: normal; 51 | } 52 | } 53 | 54 | .highlight pre, 55 | pre { 56 | padding: var(--base-size-16); 57 | overflow: auto; 58 | // stylelint-disable-next-line primer/typography 59 | font-size: 85%; 60 | // stylelint-disable-next-line primer/typography 61 | line-height: 1.45; 62 | color: var(--fgColor-default, var(--color-fg-default)); 63 | background-color: var(--bgColor-muted, var(--color-canvas-subtle)); 64 | // stylelint-disable-next-line primer/borders 65 | border-radius: $border-radius; 66 | } 67 | 68 | pre code, 69 | pre tt { 70 | display: inline; 71 | padding: 0; 72 | margin: 0; 73 | overflow: visible; 74 | line-height: inherit; 75 | word-wrap: normal; 76 | background-color: transparent; 77 | border: 0; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/forms/input-group.scss: -------------------------------------------------------------------------------- 1 | .input-group { 2 | display: table; 3 | 4 | .form-control { 5 | position: relative; 6 | width: 100%; 7 | 8 | &:focus { 9 | z-index: 2; 10 | } 11 | 12 | + .btn { 13 | margin-left: 0; 14 | } 15 | } 16 | 17 | // For when you want the input group to behave like inline-block. 18 | &.inline { 19 | display: inline-table; 20 | } 21 | 22 | // within input group, if button exists change focus styles to match input (no offset) 23 | &:focus-within { 24 | // stylelint-disable-next-line selector-max-type 25 | button { 26 | outline-offset: 0; 27 | } 28 | } 29 | 30 | // Autocomplete with embedded icon 31 | .form-control.autocomplete-embedded-icon-wrap { 32 | display: inline-flex; 33 | padding: calc(var(--base-size-4) * 1.25) var(--base-size-8); 34 | } 35 | } 36 | 37 | .input-group .form-control, 38 | .input-group-button { 39 | display: table-cell; 40 | } 41 | 42 | .input-group-button { 43 | width: 1%; 44 | vertical-align: middle; // Match the inputs 45 | } 46 | 47 | .input-group-button--autocomplete-embedded-icon { 48 | vertical-align: bottom; 49 | } 50 | 51 | .input-group .form-control:first-child, 52 | .input-group-button:first-child .btn { 53 | border-top-right-radius: 0; 54 | border-bottom-right-radius: 0; 55 | } 56 | 57 | .input-group .form-control:first-child, 58 | .input-group-button:first-child .btn:not(.btn-primary) { 59 | border-color: var(--control-borderColor-rest, var(--color-border-default)); 60 | } 61 | 62 | .input-group-button:first-child .btn { 63 | // stylelint-disable-next-line primer/spacing 64 | margin-right: -1px; 65 | } 66 | 67 | .input-group .form-control:last-child, 68 | .input-group-button:last-child .btn { 69 | border-top-left-radius: 0; 70 | border-bottom-left-radius: 0; 71 | } 72 | 73 | .input-group .form-control:last-child, 74 | .input-group-button:last-child .btn:not(.btn-primary) { 75 | border-color: var(--control-borderColor-rest, var(--color-border-default)); 76 | } 77 | 78 | .input-group-button:last-child .btn { 79 | // stylelint-disable-next-line primer/spacing 80 | margin-left: -1px; 81 | } 82 | -------------------------------------------------------------------------------- /RELEASING.md: -------------------------------------------------------------------------------- 1 | # Releasing a new version of Primer CSS 🎉 2 | 3 | ## Prepare the release (in `primer/css`) 4 | 5 | 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). 6 | 7 | 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. 8 | 9 | ## Test the release candidate (in `github/github`): 10 | 11 | 1. Create a new branch in the `github/github` repo, name it `primer-`. 12 | 13 | 1. Update the Primer CSS version to the published release candidate with: 14 | 15 | ```sh 16 | bin/npm install @primer/css@-rc. 17 | ``` 18 | 19 | Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`. 20 | 21 | 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. 22 | 23 | 1. Add or re-request reviewers and fix any breaking tests. 24 | 25 | 1. Test on review-lab. 26 | 27 | 28 | ## Publish the release (in `primer/css`) 29 | 30 | 1. If the release PR got approved and you've done necessary testing, merge it. 31 | 32 | 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. 33 | 34 | 2. Done! 🎉 35 | 36 | 37 | ## Update github.com (in `github/github`): 38 | 39 | 1. Install the latest published version in the same `primer-` branch created earlier with: 40 | 41 | ``` 42 | bin/npm install @primer/css@ -w ./npm-workspaces/primer/ 43 | ``` 44 | 45 | Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`. 46 | 47 | 1. Fix any breaking tests. 48 | 49 | 1. Deploy! :rocket: 50 | 51 | [changelog]: ../CHANGELOG.md 52 | [changesets]: https://github.com/atlassian/changesets 53 | -------------------------------------------------------------------------------- /src/forms/radio-group.scss: -------------------------------------------------------------------------------- 1 | // Tab like radio group 2 | 3 | .radio-group { 4 | @include clearfix; 5 | } 6 | 7 | .radio-label { 8 | float: left; 9 | // stylelint-disable-next-line primer/spacing 10 | padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input 11 | // stylelint-disable-next-line primer/spacing 12 | margin-left: -1px; 13 | // stylelint-disable-next-line primer/typography 14 | font-size: $body-font-size; 15 | // stylelint-disable-next-line primer/typography 16 | line-height: 20px; // Specifically not inherit our `` default 17 | color: var(--fgColor-default, var(--color-fg-default)); 18 | cursor: pointer; 19 | // stylelint-disable-next-line primer/borders, primer/colors 20 | border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); 21 | 22 | :checked + & { 23 | position: relative; 24 | z-index: 1; 25 | border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); 26 | } 27 | 28 | &:first-of-type { 29 | margin-left: 0; 30 | // stylelint-disable-next-line primer/borders 31 | border-top-left-radius: $border-radius; 32 | // stylelint-disable-next-line primer/borders 33 | border-bottom-left-radius: $border-radius; 34 | } 35 | 36 | &:last-of-type { 37 | // stylelint-disable-next-line primer/borders 38 | border-top-right-radius: $border-radius; 39 | // stylelint-disable-next-line primer/borders 40 | border-bottom-right-radius: $border-radius; 41 | } 42 | 43 | .octicon { 44 | margin-left: var(--base-size-4); 45 | color: var(--fgColor-muted, var(--color-fg-subtle)); 46 | } 47 | } 48 | 49 | .radio-input { 50 | z-index: 3; 51 | float: left; 52 | // stylelint-disable-next-line primer/spacing 53 | margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16); 54 | 55 | &:disabled { 56 | position: relative; // enables z-index 57 | 58 | + .radio-label { 59 | color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); 60 | cursor: default; 61 | background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle)); 62 | 63 | .octicon { 64 | color: inherit; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /docs/stories/principles/SCSS.mdx: -------------------------------------------------------------------------------- 1 | # SCSS 2 | 3 | ## Spacing 4 | 5 | - Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment. 6 | - Put spaces after `:` in property declarations. 7 | - Put spaces before `{` in rule declarations. 8 | - Put line breaks between rulesets. 9 | - When grouping selectors, keep individual selectors to a single line. 10 | - Place closing braces of declaration blocks on a new line. 11 | - Each declaration should appear on its own line for more accurate error reporting. 12 | 13 | ## Formatting 14 | 15 | - Use hex color codes `#000` unless using `rgba()` in raw CSS (the SCSS `rgba()` function is overloaded to accept hex colors, as in `rgba(#000, .5)`). 16 | - Use `//` for comment blocks (instead of `/* */`). 17 | - Avoid specifying units for zero values, e.g., `margin: 0;` instead of `margin: 0px;`. 18 | - Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. 19 | 20 | ## Guidelines for using Sass features (WIP) 21 | 22 | _When and when not to create:_ 23 | 24 | - Variables 25 | - Mixins 26 | - Functions 27 | 28 | ## Lint rules (WIP) 29 | 30 | As a rule of thumb, avoid unnecessary nesting in SCSS. At most, aim for three levels. If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting). 31 | 32 | - Nesting depth: 3 33 | - Extends: no 34 | - Duplicated properties: no 35 | - Final new lines: yes 36 | - Hex length: 6 37 | - ID selectors: no 38 | - Leading zero: yes 39 | - Naming format: lowercase-with-hyphens 40 | - Property order: see [HTML property order](./html) 41 | - Selector depth: 3 42 | - Single line properties: yes 43 | 44 | ## Examples 45 | 46 | Here are some good examples that apply the above guidelines: 47 | 48 | ```css 49 | // Example of good basic formatting practices 50 | .styleguide-format { 51 | color: #000; 52 | background-color: rgba(0, 0, 0, 0.5); 53 | border: 1px solid #0f0; 54 | } 55 | 56 | // Example of individual selectors getting their own lines (for error reporting) 57 | .multiple, 58 | .classes, 59 | .get-new-lines { 60 | display: block; 61 | } 62 | 63 | // Avoid unnecessary shorthand declarations 64 | .not-so-good { 65 | margin: 0 0 20px; 66 | } 67 | .good { 68 | margin-bottom: 20px; 69 | } 70 | ``` 71 | -------------------------------------------------------------------------------- /script/stylelint-add-disables.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env -S NODE_NO_WARNINGS=1 node 2 | // Disables stylelint rules in SASS/CSS files with next-line comments. This is 3 | // useful when introducing a new rule that causes many failures. The comments 4 | // can be fixed and removed at while updating the file later. 5 | // 6 | // Usage: 7 | // 8 | // script/stylelint-add-disables.js src/**/*.scss 9 | 10 | import fs from 'fs' 11 | import {execFile} from 'child_process' 12 | 13 | execFile('stylelint', ['--quiet', '--formatter', 'json', process.argv[2]], (error, stdout, stderr) => { 14 | for (const result of JSON.parse(stdout || stderr || '[]')) { 15 | const filename = result.source 16 | const jsLines = fs.readFileSync(filename, 'utf8').split('\n') 17 | const offensesByLine = {} 18 | let addedLines = 0 19 | 20 | // Produces {47: ['github/no-d-none', 'github/no-blur'], 83: ['github/no-blur']} 21 | for (const message of result.warnings) { 22 | if (offensesByLine[message.lin] && offensesByLine[message.line].includes(message.rule)) { 23 | continue 24 | } else if (offensesByLine[message.line]) { 25 | offensesByLine[message.line].push(message.rule) 26 | } else { 27 | offensesByLine[message.line] = [message.rule] 28 | } 29 | } 30 | 31 | for (const line of Object.keys(offensesByLine)) { 32 | const lineIndex = Number(line) - 1 + addedLines 33 | const previousLine = jsLines[lineIndex - 1] 34 | const ruleIds = Array.from(new Set(offensesByLine[line])).join(', ') 35 | if (isDisableComment(previousLine)) { 36 | if (previousLine.match(/\s?\*\/$/)) { 37 | jsLines[lineIndex - 1] = previousLine.replace(/\s?\*\/$/, `, ${ruleIds} */`) 38 | } else { 39 | jsLines[lineIndex - 1] = `${jsLines[lineIndex - 1]}, ${ruleIds}` 40 | } 41 | } else { 42 | const leftPad = ' '.repeat(jsLines[lineIndex].match(/^\s*/g)[0].length) 43 | jsLines.splice(lineIndex, 0, `${leftPad}// stylelint-disable-next-line ${ruleIds}`) 44 | addedLines += 1 45 | } 46 | } 47 | 48 | if (result.warnings.length !== 0) { 49 | fs.writeFileSync(filename, jsLines.join('\n'), 'utf8') 50 | } 51 | } 52 | }) 53 | 54 | function isDisableComment(line) { 55 | return line && line.match(/\/(\*|\/) stylelint-disable(-next-line)? .+(\*\/)?/) 56 | } 57 | -------------------------------------------------------------------------------- /__tests__/utils/css.js: -------------------------------------------------------------------------------- 1 | import {join, dirname} from 'path' 2 | import semver from 'semver' 3 | import { fileURLToPath } from 'url' 4 | import fs from 'fs' 5 | 6 | const __dirname = dirname(fileURLToPath(import.meta.url)) 7 | 8 | const currentPath = join(__dirname, '../../') 9 | const lastPath = join(__dirname, '../../tmp/node_modules/@primer/css') 10 | 11 | function diffLists(before, after) { 12 | const added = [...new Set(after.filter(value => !before.includes(value)))] 13 | const removed = [...new Set(before.filter(value => !after.includes(value)))] 14 | return { 15 | changed: added.length + removed.length, 16 | added, 17 | removed 18 | } 19 | } 20 | 21 | function getSelectors(versionPath) { 22 | const stats = JSON.parse(fs.readFileSync(join(versionPath, './stats/primer.json'))) 23 | return stats.selectors.values 24 | } 25 | 26 | function getVariables(versionPath) { 27 | const variables = JSON.parse(fs.readFileSync(join(versionPath, './variables.json'))) 28 | return Object.keys(variables) 29 | } 30 | 31 | export function getCurrentVersion() { 32 | const pkg = JSON.parse(fs.readFileSync(join(currentPath, './package.json'))) 33 | return semver.parse(pkg.version) 34 | } 35 | 36 | export function getPackageStats(packageName) { 37 | const stats = JSON.parse(fs.readFileSync(join(currentPath, './dist', `./stats/${packageName}.json`))) 38 | return stats 39 | } 40 | 41 | function getDeprecations(versionPath) { 42 | const deprecations = JSON.parse(fs.readFileSync(join(versionPath, './deprecations.json'))) 43 | return deprecations 44 | } 45 | 46 | function currentVersionSelectors() { 47 | return getSelectors(join(currentPath, './dist')) 48 | } 49 | 50 | function currentVersionVariables() { 51 | return getVariables(join(currentPath, './dist')) 52 | } 53 | 54 | export function currentVersionDeprecations() { 55 | return getDeprecations(join(currentPath, './dist')) 56 | } 57 | 58 | function lastVersionSelectors() { 59 | return getSelectors(join(lastPath, './dist')) 60 | } 61 | 62 | function lastVersionVariables() { 63 | return getVariables(join(lastPath, './dist')) 64 | } 65 | 66 | export function getSelectorDiff() { 67 | return diffLists(lastVersionSelectors(), currentVersionSelectors()) 68 | } 69 | 70 | export function getVariableDiff() { 71 | return diffLists(lastVersionVariables(), currentVersionVariables()) 72 | } 73 | -------------------------------------------------------------------------------- /src/marketing/utilities/layout.scss: -------------------------------------------------------------------------------- 1 | // Layout utilities 2 | 3 | // Responsive utilities to position content 4 | // No utilities for sm and xl breakpoints 5 | @each $breakpoint, $variant in $marketing-position-variants { 6 | @include breakpoint($breakpoint) { 7 | @each $scale, $size in $spacer-map-extended { 8 | @if ($size != 0 or $variant != '') { 9 | // stylelint-disable-next-line primer/spacing 10 | .top#{$variant}-#{$scale} { top: $size !important; } 11 | // stylelint-disable-next-line primer/spacing 12 | .right#{$variant}-#{$scale} { right: $size !important; } 13 | // stylelint-disable-next-line primer/spacing 14 | .bottom#{$variant}-#{$scale} { bottom: $size !important; } 15 | // stylelint-disable-next-line primer/spacing 16 | .left#{$variant}-#{$scale} { left: $size !important; } 17 | } 18 | 19 | @if ($size != 0) { 20 | // stylelint-disable-next-line primer/spacing 21 | .top#{$variant}-n#{$scale} { top: -$size !important; } 22 | // stylelint-disable-next-line primer/spacing 23 | .right#{$variant}-n#{$scale} { right: -$size !important; } 24 | // stylelint-disable-next-line primer/spacing 25 | .bottom#{$variant}-n#{$scale} { bottom: -$size !important; } 26 | // stylelint-disable-next-line primer/spacing 27 | .left#{$variant}-n#{$scale} { left: -$size !important; } 28 | } 29 | } 30 | } 31 | } 32 | 33 | // Negative offset columns 34 | @each $breakpoint, $variant in $responsive-variants { 35 | @include breakpoint($breakpoint) { 36 | @for $offset from 1 through 7 { 37 | // stylelint-disable-next-line primer/spacing 38 | .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); } 39 | } 40 | } 41 | } 42 | 43 | // Width and height utilities, especially needed when the 44 | // dimensions of an image are set in HTML 45 | .width-auto { width: auto !important; } 46 | .height-auto { height: auto !important; } 47 | 48 | // Make an object fill its parent 49 | .object-fit-cover { object-fit: cover !important; } 50 | 51 | // Handling z-index 52 | .z-1 { z-index: 1 !important; } 53 | .z-2 { z-index: 2 !important; } 54 | .z-3 { z-index: 3 !important; } 55 | 56 | // Negative z-index 57 | .z-n1 { z-index: -1 !important; } 58 | .z-n2 { z-index: -2 !important; } 59 | -------------------------------------------------------------------------------- /src/navigation/filter-list.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-max-specificity 2 | 3 | // Filters list 4 | // 5 | // A vertical list of filters. 6 | .filter-list { 7 | list-style-type: none; 8 | 9 | &.small .filter-item { 10 | // stylelint-disable-next-line primer/spacing 11 | padding: 6px 12px; 12 | // stylelint-disable-next-line primer/typography 13 | font-size: $font-size-small; 14 | } 15 | 16 | &.pjax-active .filter-item { 17 | color: var(--fgColor-muted, var(--color-fg-muted)); 18 | background-color: transparent; 19 | 20 | &.pjax-active { 21 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 22 | background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); 23 | } 24 | } 25 | } 26 | 27 | .filter-item { 28 | position: relative; 29 | display: block; 30 | padding: var(--base-size-8) var(--base-size-16); 31 | margin-bottom: var(--base-size-4); 32 | overflow: hidden; 33 | // stylelint-disable-next-line primer/typography 34 | font-size: $h5-size; 35 | color: var(--fgColor-muted, var(--color-fg-muted)); 36 | text-decoration: none; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | cursor: pointer; 40 | // stylelint-disable-next-line primer/borders 41 | border-radius: $border-radius; 42 | 43 | &:hover { 44 | text-decoration: none; 45 | background-color: var(--bgColor-muted, var(--color-canvas-subtle)); 46 | } 47 | 48 | &.selected, 49 | &[aria-selected='true'], 50 | &[aria-current]:not([aria-current='false']) { 51 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 52 | background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); 53 | 54 | // fallback :focus state 55 | &:focus { 56 | @include focusOutlineOnEmphasis; 57 | 58 | // remove fallback :focus if :focus-visible is supported 59 | &:not(:focus-visible) { 60 | outline: solid 1px transparent; 61 | box-shadow: none; 62 | } 63 | } 64 | 65 | // default focus state 66 | &:focus-visible { 67 | @include focusOutlineOnEmphasis; 68 | } 69 | } 70 | 71 | .count { 72 | float: right; 73 | // stylelint-disable-next-line primer/typography 74 | font-weight: $font-weight-bold; 75 | } 76 | 77 | .bar { 78 | position: absolute; 79 | top: var(--base-size-2); 80 | right: 0; 81 | bottom: var(--base-size-2); 82 | z-index: -1; 83 | display: inline-block; 84 | background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle)); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Primer CSS 2 | The CSS implementation of GitHub's Primer Design System 3 | 4 | [](https://www.npmjs.com/package/@primer/css) 5 | [](https://github.com/primer/css/actions/workflows/ci.yml) 6 | [](https://github.com/primer/css/graphs/contributors) 7 | [](https://github.com/primer/css/commits/main) 8 | [](https://github.com/primer/css/blob/main/LICENSE) 9 | 10 | > :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). 11 | 12 | ## Documentation 13 | 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. 14 | 15 | ## Install 16 | This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command: 17 | 18 | ```sh 19 | npm install --save @primer/css 20 | ``` 21 | 22 | ## Usage 23 | 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: 24 | 25 | ```scss 26 | @import "@primer/css/index.scss"; 27 | ``` 28 | 29 | You can import individual Primer modules directly from the `@primer/css` package: 30 | 31 | ```scss 32 | @import "@primer/css/core/index.scss"; 33 | @import "@primer/css/product/index.scss"; 34 | @import "@primer/css/marketing/index.scss"; 35 | ``` 36 | 37 | ## Development 38 | See [DEVELOP.md](DEVELOP.md) for development docs. 39 | 40 | ## Releasing (for GitHub staff) 41 | You can find docs about our release process in [RELEASING.md](RELEASING.md). 42 | 43 | ## License 44 | 45 | [MIT](./LICENSE) © [GitHub](https://github.com/) 46 | 47 | 48 | [install-npm]: https://docs.npmjs.com/getting-started/installing-node 49 | [npm]: https://www.npmjs.com/ 50 | [sass]: http://sass-lang.com/ 51 | -------------------------------------------------------------------------------- /src/markdown/lists.scss: -------------------------------------------------------------------------------- 1 | // Base styles 2 | // stylelint-disable selector-no-qualifying-type 3 | // stylelint-disable selector-max-type 4 | .markdown-body { 5 | // Lists, Blockquotes & Such 6 | ul, 7 | ol { 8 | // stylelint-disable-next-line primer/spacing 9 | padding-left: 2em; 10 | 11 | &.no-list { 12 | padding: 0; 13 | list-style-type: none; 14 | } 15 | } 16 | 17 | ol[type='a s'] { 18 | list-style-type: lower-alpha; 19 | } 20 | 21 | ol[type='A s'] { 22 | list-style-type: upper-alpha; 23 | } 24 | 25 | ol[type='i s'] { 26 | list-style-type: lower-roman; 27 | } 28 | 29 | ol[type='I s'] { 30 | list-style-type: upper-roman; 31 | } 32 | 33 | ol[type='1'] { 34 | list-style-type: decimal; 35 | } 36 | 37 | // Reset style to decimal (HTML default) specifically for AsciiDoc 38 | // construction (doesn't affect MarkDown) 39 | div > ol:not([type]) { 40 | list-style-type: decimal; 41 | } 42 | 43 | // Did someone complain about list spacing? Encourage them 44 | // to create the spacing with their markdown formatting. 45 | // List behavior should be controled by the markup, not the css. 46 | // 47 | // For lists with padding between items, use blank 48 | // lines between items. This will generate paragraphs with 49 | // padding to space things out. 50 | // 51 | // - item 52 | // 53 | // - item 54 | // 55 | // - item 56 | // 57 | // For list without padding, don't use blank lines. 58 | // 59 | // - item 60 | // - item 61 | // - item 62 | // 63 | // Modifying the css to emulate these behaviors merely brakes 64 | // one case in the process of solving another. Don't change 65 | // this unless it's really really a bug. 66 | ul ul, 67 | ul ol, 68 | ol ol, 69 | ol ul { 70 | margin-top: 0; 71 | margin-bottom: 0; 72 | } 73 | 74 | li > p { 75 | margin-top: var(--base-size-16); 76 | } 77 | 78 | li + li { 79 | // stylelint-disable-next-line primer/spacing 80 | margin-top: $em-spacer-3; 81 | } 82 | 83 | dl { 84 | padding: 0; 85 | 86 | dt { 87 | padding: 0; 88 | margin-top: var(--base-size-16); 89 | // stylelint-disable-next-line primer/typography 90 | font-size: 1em; 91 | font-style: italic; 92 | // stylelint-disable-next-line primer/typography 93 | font-weight: $font-weight-bold; 94 | } 95 | 96 | dd { 97 | padding: 0 var(--base-size-16); 98 | margin-bottom: var(--base-size-16); 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ main, next_major ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ main ] 20 | schedule: 21 | - cron: '34 14 * * 0' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v5 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v4 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v4 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v4 71 | -------------------------------------------------------------------------------- /docs/stories/deprecated-components/Tooltip/Tooltip.mdx: -------------------------------------------------------------------------------- 1 | import {Canvas, Meta, Story} from '@storybook/blocks' 2 | 3 | import * as TooltipStories from './Tooltip.stories' 4 | 5 | 6 | 7 | # Tooltip 8 | 9 | Please note that the `.tooltipped` component is **deprecated**. We recommend using the [Tooltip component](https://primer.style/view-components/components/alpha/tooltip) instead. 10 | 11 | Add tooltips built entirely in CSS to appropriate elements. 12 | 13 | ## Implementation and accessibility 14 | 15 | Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence. 16 | 17 | Before adding a tooltip, please consider: Is this information essential and necessary\* Can the UI be made clearer? Can the information be shown on the page by default? And check out [alternatives to Tooltips](https://primer.style/design/accessibility/tooltip-alternatives) to explore your options. 18 | 19 | ### Attention 20 | 21 | - **Never** use tooltips on static elements. They should only be used on interactive elements, because users cannot tab-focus into static elements, which may make the content inaccessible for keyboard-only users and screen readers. 22 | - we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content such as an icon-only button. 23 | - Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon. 24 | 25 | ## Tooltip direction 26 | 27 | Specify the direction of a tooltip with north, south, east, and west directions: 28 | 29 | 30 | 31 | ## Tooltip alignment 32 | 33 | Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented. 34 | 35 | 36 | 37 | ## Tooltips with multiple lines 38 | 39 | Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`. 40 | 41 | 42 | 43 | ## Tooltips with no delay 44 | 45 | By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this. 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/markdown/headings.scss: -------------------------------------------------------------------------------- 1 | // Needs refactoring 2 | // stylelint-disable selector-max-compound-selectors, selector-max-specificity 3 | // stylelint-disable selector-max-type 4 | .markdown-body { 5 | // Headings 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | h6 { 12 | margin-top: var(--base-size-24); 13 | margin-bottom: var(--base-size-16); 14 | // stylelint-disable-next-line primer/typography 15 | font-weight: $font-weight-bold; 16 | // stylelint-disable-next-line primer/typography 17 | line-height: $lh-condensed; 18 | 19 | .octicon-link { 20 | color: var(--fgColor-default, var(--color-fg-default)); 21 | vertical-align: middle; 22 | visibility: hidden; 23 | } 24 | 25 | &:hover .anchor { 26 | text-decoration: none; 27 | 28 | .octicon-link { 29 | visibility: visible; 30 | } 31 | } 32 | 33 | tt, 34 | code { 35 | // stylelint-disable-next-line primer/spacing 36 | padding: 0 0.2em; 37 | font-size: inherit; 38 | } 39 | } 40 | 41 | h1 { 42 | // stylelint-disable-next-line primer/spacing 43 | padding-bottom: 0.3em; 44 | // stylelint-disable-next-line primer/typography 45 | font-size: 2em; 46 | // stylelint-disable-next-line primer/borders, primer/colors 47 | border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); 48 | } 49 | 50 | h2 { 51 | // stylelint-disable-next-line primer/spacing 52 | padding-bottom: 0.3em; 53 | // stylelint-disable-next-line primer/typography 54 | font-size: 1.5em; 55 | // stylelint-disable-next-line primer/borders, primer/colors 56 | border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); 57 | } 58 | 59 | h3 { 60 | // stylelint-disable-next-line primer/typography 61 | font-size: 1.25em; 62 | } 63 | 64 | h4 { 65 | // stylelint-disable-next-line primer/typography 66 | font-size: 1em; 67 | } 68 | 69 | h5 { 70 | // stylelint-disable-next-line primer/typography 71 | font-size: 0.875em; 72 | } 73 | 74 | h6 { 75 | // stylelint-disable-next-line primer/typography 76 | font-size: 0.85em; 77 | color: var(--fgColor-muted, var(--color-fg-muted)); 78 | } 79 | 80 | summary { 81 | h1, 82 | h2, 83 | h3, 84 | h4, 85 | h5, 86 | h6 { 87 | display: inline-block; 88 | 89 | .anchor { 90 | // stylelint-disable-next-line primer/spacing 91 | margin-left: -40px; 92 | } 93 | } 94 | 95 | h1, 96 | h2 { 97 | padding-bottom: 0; 98 | border-bottom: 0; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /docs/stories/components/Layout/StackExamples.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | StackTemplate 4 | } from './Stack.stories' 5 | 6 | export default { 7 | title: 'Components/Layout/Stack/Examples' 8 | } 9 | 10 | export const ButtonInlineStack = StackTemplate.bind({}) 11 | ButtonInlineStack.args = { 12 | direction: "inline", 13 | gap: "condensed", 14 | children: ( 15 | <> 16 | Button 17 | Button 18 | Button 19 | 20 | ) 21 | }; 22 | 23 | export const PageSections = StackTemplate.bind({}) 24 | PageSections.args = { 25 | direction: "block", 26 | gap: "normal", 27 | children: ( 28 | <> 29 | Section 1 30 | Section 2 31 | Section 3 32 | 33 | ) 34 | }; 35 | 36 | export const Composition = StackTemplate.bind({}) 37 | Composition.args = { 38 | direction: "block", 39 | gap: "normal", 40 | children: ( 41 | <> 42 | 44 | 46 | Heading 47 | Lorem ipsum dolor sit amet avec consequer domulus sit lorem ipsum dolor sit amet. 48 | 50 | Inline labels set to wrap 51 | Label 2 52 | Label 3 53 | Label 4 54 | Label 5 55 | 56 | )} /> 57 | 58 | )} /> 59 | 60 | 62 | Heading 63 | Lorem ipsum dolor sit amet avec consequer domulus sit lorem ipsum dolor sit amet. 64 | 66 | Inline labels set to wrap 67 | Label 2 68 | Label 3 69 | Label 4 70 | Label 5 71 | 72 | )} /> 73 | 74 | )} /> 75 | 76 | )} /> 77 | 78 | ) 79 | }; -------------------------------------------------------------------------------- /src/utilities/margin.scss: -------------------------------------------------------------------------------- 1 | // Margin spacer utilities 2 | // stylelint-disable primer/spacing 3 | 4 | // Loop through the breakpoint values 5 | @each $breakpoint, $variant in $responsive-variants { 6 | @include breakpoint($breakpoint) { 7 | // Loop through the spacer values 8 | @each $scale, $size in $spacer-map-rem-extended { 9 | @if ($scale < length($spacer-map-rem)) { 10 | /* Set a $size margin to all sides at $breakpoint */ 11 | .m#{$variant}-#{$scale} { margin: $size !important; } 12 | } 13 | 14 | /* Set a $size margin on the top at $breakpoint */ 15 | .mt#{$variant}-#{$scale} { margin-top: $size !important; } 16 | /* Set a $size margin on the bottom at $breakpoint */ 17 | .mb#{$variant}-#{$scale} { margin-bottom: $size !important; } 18 | 19 | @if ($scale < length($spacer-map-rem)) { 20 | /* Set a $size margin on the right at $breakpoint */ 21 | .mr#{$variant}-#{$scale} { margin-right: $size !important; } 22 | /* Set a $size margin on the left at $breakpoint */ 23 | .ml#{$variant}-#{$scale} { margin-left: $size !important; } 24 | } 25 | 26 | @if ($size != 0) { 27 | /* Set a negative $size margin on top at $breakpoint */ 28 | .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; } 29 | /* Set a negative $size margin on the bottom at $breakpoint */ 30 | .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; } 31 | 32 | @if ($scale < length($spacer-map-rem)) { 33 | /* Set a negative $size margin on the right at $breakpoint */ 34 | .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; } 35 | /* Set a negative $size margin on the left at $breakpoint */ 36 | .ml#{$variant}-n#{$scale} { margin-left : calc(-1 * $size) !important; } 37 | } 38 | } 39 | 40 | @if ($scale < length($spacer-map-rem)) { 41 | /* Set a $size margin on the left & right at $breakpoint */ 42 | .mx#{$variant}-#{$scale} { 43 | margin-right: $size !important; 44 | margin-left: $size !important; 45 | } 46 | } 47 | 48 | /* Set a $size margin on the top & bottom at $breakpoint */ 49 | .my#{$variant}-#{$scale} { 50 | margin-top: $size !important; 51 | margin-bottom: $size !important; 52 | } 53 | } 54 | 55 | /* responsive horizontal auto margins */ 56 | .mx#{$variant}-auto { 57 | margin-right: auto !important; 58 | margin-left: auto !important; 59 | } 60 | } 61 | } 62 | 63 | .m-auto { margin: auto !important; } 64 | 65 | .mt-auto { margin-top: auto !important; } 66 | .mr-auto { margin-right: auto !important; } 67 | .mb-auto { margin-bottom: auto !important; } 68 | .ml-auto { margin-left: auto !important; } 69 | -------------------------------------------------------------------------------- /src/support/mixins/misc.scss: -------------------------------------------------------------------------------- 1 | // Generate a two-color caret for any element. 2 | @mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) { 3 | &::after, 4 | &::before { 5 | position: absolute; 6 | // stylelint-disable-next-line primer/spacing 7 | top: 11px; 8 | right: 100%; 9 | left: calc(var(--base-size-8) * -1); 10 | display: block; 11 | width: 8px; 12 | height: 16px; 13 | pointer-events: none; 14 | content: ' '; 15 | clip-path: polygon(0 50%, 100% 0, 100% 100%); 16 | } 17 | 18 | &::after { 19 | // stylelint-disable-next-line primer/spacing 20 | margin-left: 2px; 21 | background-color: var(--bgColor-default, var(--color-canvas-default)); 22 | background-image: linear-gradient($background, $background); 23 | } 24 | 25 | &::before { 26 | // stylelint-disable-next-line primer/colors 27 | background-color: $border; 28 | } 29 | } 30 | 31 | // global focus styles 32 | 33 | // inset box-shadow for form controls 34 | @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) { 35 | // stylelint-disable-next-line primer/colors 36 | border-color: var(--focus-outlineColor, var(--color-accent-fg)); 37 | outline: none; 38 | // stylelint-disable-next-line primer/box-shadow 39 | box-shadow: inset 0 0 0 $outlineWidth $outlineColor; 40 | } 41 | 42 | // box-shadow for :target styles (no inset) 43 | // !important to override PCSS utilities 44 | @mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) { 45 | outline: none !important; 46 | // stylelint-disable-next-line primer/box-shadow 47 | box-shadow: 0 0 0 $outlineWidth $outlineColor !important; 48 | } 49 | 50 | // outline 51 | @mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) { 52 | outline: 2px solid $outlineColor; 53 | outline-offset: $outlineOffset; 54 | box-shadow: none; 55 | } 56 | 57 | // outline with fg box-shadow for buttons 58 | @mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) { 59 | outline: 2px solid $outlineColor; 60 | outline-offset: $outlineOffset; 61 | // stylelint-disable-next-line primer/box-shadow 62 | box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 63 | } 64 | 65 | // if min-width is undefined, return only min-height 66 | @mixin minTouchTarget($min-height: 32px, $min-width: '') { 67 | position: absolute; 68 | top: 50%; 69 | left: 50%; 70 | width: 100%; 71 | height: 100%; 72 | min-height: $min-height; 73 | content: ''; 74 | transform: translateX(-50%) translateY(-50%); 75 | 76 | @if $min-width != '' { 77 | min-width: $min-width; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /docs/stories/utilities/Padding.stories.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Utilities/Padding' 3 | } 4 | 5 | export const Uniform = ({}) => ( 6 | 7 | .p-0 8 | .p-1 9 | .p-2 10 | .p-3 11 | .p-4 12 | .p-5 13 | .p-6 14 | 15 | ) 16 | 17 | export const Directional = ({}) => ( 18 | 19 | .pt-3 20 | .pr-3 21 | .pb-3 22 | .pl-3 23 | .py-3 24 | .px-3 25 | 26 | ) 27 | 28 | export const DirectionalExtended = ({}) => ( 29 | 30 | .pt-7 31 | .pt-8 32 | .pt-9 33 | .pt-10 34 | .pt-11 35 | .pt-12 36 | 37 | ) 38 | 39 | export const Responsive = ({}) => ( 40 | 41 | .px-sm-2 .px-md-4 42 | 43 | ) 44 | 45 | export const ResponsiveContainer = ({}) => ( 46 | 47 | .p-responsive 48 | 49 | ) 50 | -------------------------------------------------------------------------------- /script/stylelint-remove-disables.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import {execFile} from 'child_process' 3 | import {readFileSync, writeFileSync} from 'fs' 4 | 5 | const files = process.argv.slice(2) 6 | if (files.length === 0) { 7 | files.push('app/assets/stylesheets') 8 | } 9 | 10 | // we use an empty "marker" to delineate removed lines 11 | const REMOVED = `===REMOVED@${Date.now()}===` 12 | 13 | execFile('stylelint', ['--rd', '--quiet', '--formatter', 'json', process.argv[2]], (error, stdout) => { 14 | 15 | // Filter to only needless disables comments 16 | const results = JSON.parse(stdout) 17 | .filter(result => result.warnings.length > 0) 18 | .map(({source, warnings}) => { 19 | return { 20 | source, 21 | warnings: warnings.filter(warning => warning.rule === '--report-needless-disables') 22 | } 23 | }) 24 | 25 | for (const {source, warnings} of results) { 26 | console.log(`--- ${source}\n+++ ${source}`) 27 | const lines = readFileSync(source, 'utf8').split(/\n/) 28 | for (const {text, line: lineNum} of warnings) { 29 | const ruleName = text.match(/^Needless disable for "(.+)"$/)[1] 30 | const line = lines[lineNum - 1] 31 | let disableComment = parseDisableComment(line) 32 | 33 | if (disableComment) { 34 | const rules = new Set(disableComment.rules) 35 | rules.delete(ruleName) 36 | let replacementLine = line 37 | if (rules.size === 0) { 38 | console.log(`@@ ${lineNum},${lineNum - 1} @@`) 39 | replacementLine = line.replace(`// ${disableComment.content}`, REMOVED) 40 | } else { 41 | console.log(`@@ ${lineNum},${lineNum} @@`) 42 | replacementLine = line.replace(disableComment.content, `${disableComment.type} ${Array.from(rules).join(', ')}`) 43 | } 44 | lines[lineNum - 1] = replacementLine 45 | 46 | if (lines[lineNum - 2]) { 47 | console.log(`${lines[lineNum - 2]}`) 48 | } 49 | console.log(`- ${line}`) 50 | if (!replacementLine.includes(REMOVED)) { 51 | console.log(`+ ${replacementLine}`) 52 | } 53 | if (lines[lineNum]) { 54 | console.log(`${lines[lineNum]}`) 55 | } 56 | } 57 | } 58 | console.log('') 59 | const output = lines.map(line => { 60 | if (line.trim() === REMOVED) { 61 | return null 62 | } else if (line.includes(REMOVED)) { 63 | line = line.replace(REMOVED, '').trimEnd() 64 | } 65 | 66 | return line 67 | }).filter(line => line !== null).join('\n') 68 | 69 | writeFileSync(source, output, 'utf8') 70 | } 71 | }) 72 | 73 | function parseDisableComment(str) { 74 | const match = str.match(/(stylelint-disable((-next)?-line)?)\s+(.+)$/) 75 | return match 76 | ? { 77 | content: match[0], 78 | type: match[1], 79 | rules: match[4].split(/,\s+/) 80 | } 81 | : false 82 | } 83 | -------------------------------------------------------------------------------- /src/buttons/button-group.scss: -------------------------------------------------------------------------------- 1 | // Button group 2 | // 3 | // A button group is a series of buttons laid out next to each other, all part 4 | // of one visual button, but separated by rules to be separate. 5 | 6 | .BtnGroup { 7 | display: inline-block; 8 | vertical-align: middle; 9 | 10 | @include clearfix(); 11 | 12 | // Proper spacing for multiple button groups (a la, gollum editor) 13 | + .BtnGroup, 14 | + .btn { 15 | margin-left: var(--base-size-4); 16 | } 17 | } 18 | 19 | .BtnGroup-item { 20 | position: relative; 21 | float: left; 22 | border-right-width: 0; 23 | border-radius: 0; 24 | 25 | &:first-child { 26 | // stylelint-disable-next-line primer/borders 27 | border-top-left-radius: $border-radius; 28 | // stylelint-disable-next-line primer/borders 29 | border-bottom-left-radius: $border-radius; 30 | } 31 | 32 | &:last-child { 33 | // stylelint-disable-next-line primer/borders 34 | border-right-width: $border-width; 35 | // stylelint-disable-next-line primer/borders 36 | border-top-right-radius: $border-radius; 37 | // stylelint-disable-next-line primer/borders 38 | border-bottom-right-radius: $border-radius; 39 | } 40 | 41 | &.selected, 42 | &[aria-selected='true'], 43 | &:focus, 44 | &:active, 45 | &:hover { 46 | // stylelint-disable-next-line primer/borders 47 | border-right-width: $border-width; 48 | 49 | + .BtnGroup-item, 50 | + .BtnGroup-parent .BtnGroup-item { 51 | border-left-width: 0; 52 | } 53 | } 54 | } 55 | 56 | .BtnGroup-parent { 57 | float: left; 58 | 59 | &:first-child .BtnGroup-item { 60 | // stylelint-disable-next-line primer/borders 61 | border-top-left-radius: $border-radius; 62 | // stylelint-disable-next-line primer/borders 63 | border-bottom-left-radius: $border-radius; 64 | } 65 | 66 | &:last-child .BtnGroup-item { 67 | // stylelint-disable-next-line primer/borders 68 | border-right-width: $border-width; 69 | // stylelint-disable-next-line primer/borders 70 | border-top-right-radius: $border-radius; 71 | // stylelint-disable-next-line primer/borders 72 | border-bottom-right-radius: $border-radius; 73 | } 74 | 75 | .BtnGroup-item { 76 | border-right-width: 0; 77 | border-radius: 0; 78 | } 79 | 80 | &.selected, 81 | &[aria-selected='true'], 82 | &:focus, 83 | &:active, 84 | &:hover { 85 | .BtnGroup-item { 86 | // stylelint-disable-next-line primer/borders 87 | border-right-width: $border-width; 88 | } 89 | 90 | + .BtnGroup-item, 91 | + .BtnGroup-parent .BtnGroup-item { 92 | border-left-width: 0; 93 | } 94 | } 95 | } 96 | 97 | // ensure that the focus ring sits above the adjacent buttons 98 | .BtnGroup-item, 99 | .BtnGroup-parent { 100 | &:focus, 101 | &:active { 102 | z-index: 1; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/utilities/details.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type 2 | 3 | .details-overlay[open] > summary::before { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | bottom: 0; 8 | left: 0; 9 | z-index: 80; 10 | display: block; 11 | cursor: default; 12 | content: ' '; 13 | background: transparent; 14 | } 15 | 16 | .details-overlay-dark[open] > summary::before { 17 | z-index: 111; 18 | background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop)); 19 | } 20 | 21 | .details-reset { 22 | // Remove marker added by the display: list-item browser default 23 | > summary { 24 | list-style: none; 25 | transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); 26 | transition-property: color, background-color, box-shadow, border-color; 27 | // fallback :focus state 28 | &:focus { 29 | @include focusOutline; 30 | 31 | // remove fallback :focus if :focus-visible is supported 32 | &:not(:focus-visible) { 33 | outline: solid 1px transparent; 34 | } 35 | } 36 | 37 | // default focus state 38 | &:focus-visible { 39 | @include focusOutline; 40 | } 41 | 42 | &.btn-primary { 43 | // fallback :focus state 44 | &:focus { 45 | @include focusOutlineOnEmphasis; 46 | 47 | // remove fallback :focus if :focus-visible is supported 48 | &:not(:focus-visible) { 49 | outline: solid 1px transparent; 50 | box-shadow: none; 51 | } 52 | } 53 | 54 | // default focus state 55 | &:focus-visible { 56 | @include focusOutlineOnEmphasis; 57 | } 58 | } 59 | } 60 | // Remove marker added by details polyfill 61 | > summary::before { 62 | display: none; 63 | } 64 | // Remove marker added by Chrome 65 | > summary::-webkit-details-marker { 66 | display: none; 67 | } 68 | } 69 | 70 | .details-overlay > summary { 71 | transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); 72 | transition-property: color, background-color, box-shadow, border-color; 73 | // fallback :focus state 74 | &:focus { 75 | @include focusOutline; 76 | 77 | // remove fallback :focus if :focus-visible is supported 78 | &:not(:focus-visible) { 79 | outline: solid 1px transparent; 80 | } 81 | } 82 | 83 | // default focus state 84 | &:focus-visible { 85 | @include focusOutline; 86 | } 87 | 88 | &.btn-primary { 89 | // fallback :focus state 90 | &:focus { 91 | @include focusOutlineOnEmphasis; 92 | 93 | // remove fallback :focus if :focus-visible is supported 94 | &:not(:focus-visible) { 95 | outline: solid 1px transparent; 96 | box-shadow: none; 97 | } 98 | } 99 | 100 | // default focus state 101 | &:focus-visible { 102 | @include focusOutlineOnEmphasis; 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/utilities/flexbox.scss: -------------------------------------------------------------------------------- 1 | // Flex utility classes 2 | @each $breakpoint, $variant in $responsive-variants { 3 | @include breakpoint($breakpoint) { 4 | // Flexbox classes 5 | // Container 6 | .flex#{$variant}-row { flex-direction: row !important; } 7 | .flex#{$variant}-row-reverse { flex-direction: row-reverse !important; } 8 | .flex#{$variant}-column { flex-direction: column !important; } 9 | .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; } 10 | 11 | .flex#{$variant}-wrap { flex-wrap: wrap !important; } 12 | .flex#{$variant}-nowrap { flex-wrap: nowrap !important; } 13 | .flex#{$variant}-wrap-reverse { flex-wrap: wrap-reverse !important; } 14 | 15 | .flex#{$variant}-justify-start { justify-content: flex-start !important; } 16 | .flex#{$variant}-justify-end { justify-content: flex-end !important; } 17 | .flex#{$variant}-justify-center { justify-content: center !important; } 18 | .flex#{$variant}-justify-between { justify-content: space-between !important; } 19 | .flex#{$variant}-justify-around { justify-content: space-around !important; } 20 | 21 | .flex#{$variant}-items-start { align-items: flex-start !important; } 22 | .flex#{$variant}-items-end { align-items: flex-end !important; } 23 | .flex#{$variant}-items-center { align-items: center !important; } 24 | .flex#{$variant}-items-baseline { align-items: baseline !important; } 25 | .flex#{$variant}-items-stretch { align-items: stretch !important; } 26 | 27 | .flex#{$variant}-content-start { align-content: flex-start !important; } 28 | .flex#{$variant}-content-end { align-content: flex-end !important; } 29 | .flex#{$variant}-content-center { align-content: center !important; } 30 | .flex#{$variant}-content-between { align-content: space-between !important; } 31 | .flex#{$variant}-content-around { align-content: space-around !important; } 32 | .flex#{$variant}-content-stretch { align-content: stretch !important; } 33 | 34 | // Item 35 | .flex#{$variant}-1 { flex: 1 !important; } 36 | .flex#{$variant}-auto { flex: auto !important; } 37 | .flex#{$variant}-grow-0 { flex-grow: 0 !important; } 38 | .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } 39 | 40 | .flex#{$variant}-self-auto { align-self: auto !important; } 41 | .flex#{$variant}-self-start { align-self: flex-start !important; } 42 | .flex#{$variant}-self-end { align-self: flex-end !important; } 43 | .flex#{$variant}-self-center { align-self: center !important; } 44 | .flex#{$variant}-self-baseline { align-self: baseline !important; } 45 | .flex#{$variant}-self-stretch { align-self: stretch !important; } 46 | 47 | .flex#{$variant}-order-1 { order: 1 !important; } 48 | .flex#{$variant}-order-2 { order: 2 !important; } 49 | .flex#{$variant}-order-none { order: inherit !important; } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /docs/stories/utilities/Border.stories.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Utilities/Border' 3 | } 4 | 5 | export const Default = ({}) => .border 6 | 7 | export const Direction = ({}) => ( 8 | 9 | .border-left 10 | .border-top 11 | .border-bottom 12 | .border-right 13 | .border-x 14 | .border-y 15 | 16 | ) 17 | 18 | export const Hide = ({}) => .border-top-0 19 | 20 | export const Style = ({}) => .border-dashed 21 | 22 | export const Rounded = ({}) => ( 23 | 24 | .rounded-0 25 | .rounded-1 26 | .rounded-2 27 | .rounded-3 28 | 32 | .circle 33 | 34 | 35 | ) 36 | 37 | export const RoundedDirection = ({}) => ( 38 | 39 | .rounded-top-2 40 | .rounded-right-2 41 | .rounded-bottom-2 42 | .rounded-left-2 43 | 44 | ) 45 | 46 | export const RoundedResponsive = ({}) => ( 47 | 51 | .border-left 52 | .rounded-sm-1 53 | .rounded-md-2 54 | .rounded-lg-3 55 | 56 | ) 57 | 58 | export const Responsive = ({}) => ( 59 | 63 | .border-left 64 | .border-sm-top 65 | .border-md-right 66 | .border-lg-bottom 67 | 68 | ) 69 | -------------------------------------------------------------------------------- /src/markdown/markdown-body.scss: -------------------------------------------------------------------------------- 1 | // All of our block level items should have the same margin 2 | // stylelint-disable selector-max-type 3 | 4 | // This is styling for generic markdownized text. Anything you put in a 5 | // container with .markdown-body on it should render generally well. It also 6 | // includes some GitHub Flavored Markdown specific styling (like @mentions) 7 | .markdown-body { 8 | // stylelint-disable-next-line primer/typography 9 | font-family: $body-font; 10 | // stylelint-disable-next-line primer/typography 11 | font-size: $h4-size; 12 | // stylelint-disable-next-line primer/typography 13 | line-height: $body-line-height; 14 | word-wrap: break-word; 15 | 16 | // Clearfix on the markdown body 17 | &::before { 18 | display: table; 19 | content: ''; 20 | } 21 | 22 | &::after { 23 | display: table; 24 | clear: both; 25 | content: ''; 26 | } 27 | 28 | > *:first-child { 29 | margin-top: 0 !important; 30 | } 31 | 32 | > *:last-child { 33 | margin-bottom: 0 !important; 34 | } 35 | 36 | // Anchors like . These sometimes end up wrapped around 37 | // text when users mistakenly forget to close the tag or use self-closing tag 38 | // syntax. We don't want them to appear like links. 39 | // FIXME: a:not(:link):not(:visited) would be a little clearer here (and 40 | // possibly faster to match), but it breaks styling of elements due 41 | // to https://bugs.webkit.org/show_bug.cgi?id=142737. 42 | a:not([href]) { 43 | color: inherit; 44 | text-decoration: none; 45 | } 46 | 47 | // Link Colors 48 | .absent { 49 | color: var(--fgColor-danger, var(--color-danger-fg)); 50 | } 51 | 52 | .anchor { 53 | float: left; 54 | padding-right: var(--base-size-4); 55 | // stylelint-disable-next-line primer/spacing 56 | margin-left: -20px; 57 | // stylelint-disable-next-line primer/typography 58 | line-height: $lh-condensed-ultra; 59 | 60 | &:focus { 61 | outline: none; 62 | } 63 | } 64 | 65 | p, 66 | blockquote, 67 | ul, 68 | ol, 69 | dl, 70 | table, 71 | pre, 72 | details { 73 | margin-top: 0; 74 | margin-bottom: var(--base-size-16); 75 | } 76 | 77 | hr { 78 | height: $em-spacer-3; 79 | padding: 0; 80 | margin: var(--base-size-24) 0; 81 | // stylelint-disable-next-line primer/colors 82 | background-color: var(--borderColor-default, var(--color-border-default)); 83 | border: 0; 84 | } 85 | 86 | blockquote { 87 | // stylelint-disable-next-line primer/spacing 88 | padding: 0 1em; 89 | color: var(--fgColor-muted, var(--color-fg-muted)); 90 | // stylelint-disable-next-line primer/borders, primer/colors, declaration-property-value-no-unknown 91 | border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default)); 92 | 93 | > :first-child { 94 | margin-top: 0; 95 | } 96 | 97 | > :last-child { 98 | margin-bottom: 0; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /docs/stories/utilities/Shadow.stories.jsx: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Utilities/Shadow' 3 | } 4 | 5 | export const Small = ({}) => ( 6 | 7 | .color-shadow-small 8 | 9 | ) 10 | 11 | export const SmallExample = ({}) => ( 12 | 13 | 14 | Organization 15 | 16 | 17 | 18 | Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled 19 | church-key thundercats. Brooklyn bicycle rights tousled, marfa actually. 20 | 21 | 22 | 23 | 24 | Create an organization 25 | 26 | 27 | 28 | ) 29 | 30 | export const Medium = ({}) => ( 31 | 32 | .color-shadow-medium 33 | 34 | ) 35 | 36 | export const MediumExample = ({}) => ( 37 | 38 | Serverless architecture 39 | 40 | Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks. 41 | 42 | 43 | 44 | 45 | 12 Repositories 46 | 47 | 48 | 49 | 5 Languages 50 | 51 | 52 | 53 | ) 54 | 55 | export const Large = ({}) => ( 56 | 57 | .color-shadow-large 58 | 59 | ) 60 | 61 | export const LargeExample = ({}) => ( 62 | 63 | 64 | 65 | ) 66 | 67 | export const ExtraLarge = ({}) => ( 68 | 69 | .color-shadow-extra-large 70 | 71 | ) 72 | 73 | export const None = ({}) => ( 74 | 75 | .box-shadow-none 76 | 77 | ) 78 | 79 | -------------------------------------------------------------------------------- /src/navigation/sidenav.scss: -------------------------------------------------------------------------------- 1 | // Side Nav 2 | // 3 | // A vertical list of navigational links, typically used on the left side of a page. 4 | 5 | .SideNav { 6 | background-color: var(--bgColor-muted, var(--color-canvas-subtle)); 7 | } 8 | 9 | .SideNav-item { 10 | position: relative; 11 | display: block; 12 | width: 100%; 13 | // stylelint-disable-next-line primer/spacing 14 | padding: 12px var(--base-size-16); 15 | color: var(--fgColor-default, var(--color-fg-default)); 16 | text-align: left; 17 | background-color: transparent; 18 | border: 0; 19 | // stylelint-disable-next-line primer/borders, primer/colors 20 | border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); 21 | 22 | &:first-child { 23 | border-top: 0; 24 | } 25 | 26 | &:last-child { 27 | // makes sure there is a "bottom border" in case the list is not long enough 28 | // stylelint-disable-next-line primer/box-shadow, declaration-property-value-no-unknown 29 | box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default)); 30 | } 31 | 32 | // Bar on the left 33 | &::before { 34 | position: absolute; 35 | top: 0; 36 | bottom: 0; 37 | left: 0; 38 | z-index: 1; 39 | width: 2px; 40 | pointer-events: none; 41 | content: ''; 42 | } 43 | } 44 | 45 | // States 46 | 47 | .SideNav-item:hover { 48 | text-decoration: none; 49 | background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle)); 50 | } 51 | 52 | .SideNav-item:active { 53 | background-color: var(--bgColor-muted, var(--color-canvas-subtle)); 54 | } 55 | 56 | .SideNav-item[aria-current]:not([aria-current='false']), 57 | .SideNav-item[aria-selected='true'] { 58 | background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg)); 59 | 60 | // Bar on the left 61 | &::before { 62 | // stylelint-disable-next-line primer/colors 63 | background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active)); 64 | } 65 | } 66 | 67 | // Icon 68 | // 69 | // Makes sure multiple icons are vertically aligned 70 | 71 | .SideNav-icon { 72 | width: 16px; 73 | margin-right: var(--base-size-8); 74 | color: var(--fgColor-muted, var(--color-fg-muted)); 75 | } 76 | 77 | // Sub Nav 78 | // 79 | // A more lightweight version, suited as a sub nav 80 | 81 | .SideNav-subItem { 82 | position: relative; 83 | display: block; 84 | width: 100%; 85 | padding: var(--base-size-4) 0; 86 | color: var(--fgColor-accent, var(--color-accent-fg)); 87 | text-align: left; 88 | background-color: transparent; 89 | border: 0; 90 | } 91 | 92 | .SideNav-subItem:hover { 93 | color: var(--fgColor-default, var(--color-fg-default)); 94 | text-decoration: none; 95 | } 96 | 97 | .SideNav-subItem[aria-current]:not([aria-current='false']), 98 | .SideNav-subItem[aria-selected='true'] { 99 | // stylelint-disable-next-line primer/typography 100 | font-weight: $font-weight-semibold; 101 | color: var(--fgColor-default, var(--color-fg-default)); 102 | } 103 | -------------------------------------------------------------------------------- /src/utilities/visibility-display.scss: -------------------------------------------------------------------------------- 1 | // Visibility and display utilities 2 | 3 | // Responsive display utilities 4 | @each $breakpoint, $variant in $responsive-variants { 5 | @include breakpoint($breakpoint) { 6 | @each $display in $display-values { 7 | .d#{$variant}-#{$display} { display: $display !important; } 8 | } 9 | } 10 | } 11 | 12 | .v-hidden { visibility: hidden !important; } 13 | .v-visible { visibility: visible !important; } 14 | 15 | // Hide utilities for each breakpoint 16 | // Each hide utility only applies to one breakpoint range. 17 | @media (max-width: $width-sm - 0.02px) { 18 | .hide-sm { 19 | display: none !important; 20 | } 21 | } 22 | 23 | @media (min-width: $width-sm) and (max-width: $width-md - 0.02px) { 24 | .hide-md { 25 | display: none !important; 26 | } 27 | } 28 | 29 | @media (min-width: $width-md) and (max-width: $width-lg - 0.02px) { 30 | .hide-lg { 31 | display: none !important; 32 | } 33 | } 34 | 35 | @media (min-width: $width-lg) { 36 | .hide-xl { 37 | display: none !important; 38 | } 39 | } 40 | 41 | // Show/Hide Viewport range utilities 42 | 43 | .show-whenNarrow, 44 | .show-whenRegular, 45 | .show-whenWide, 46 | .show-whenRegular.hide-whenWide { 47 | display: none !important; 48 | } 49 | 50 | .hide-whenNarrow, 51 | .hide-whenRegular, 52 | .hide-whenWide { 53 | display: block !important; 54 | } 55 | 56 | @media (max-width: $width-md - 0.02px) { 57 | .show-whenNarrow { 58 | display: block !important; 59 | } 60 | 61 | .hide-whenNarrow { 62 | display: none !important; 63 | } 64 | } 65 | 66 | @media (min-width: $width-md) { 67 | .show-whenRegular, 68 | .show-whenRegular.hide-whenWide { 69 | display: block !important; 70 | } 71 | 72 | .hide-whenRegular { 73 | display: none !important; 74 | } 75 | } 76 | 77 | // The width of a `wide` viewport range may change as we're finalizing 78 | // the Primer primitives viewport ranges proposal 79 | @media (min-width: $width-xl) { 80 | .show-whenWide { 81 | display: block !important; 82 | } 83 | 84 | .hide-whenWide, 85 | .show-whenRegular.hide-whenWide { 86 | display: none !important; 87 | } 88 | } 89 | 90 | /* Set the table-layout to fixed */ 91 | .table-fixed { table-layout: fixed !important; } 92 | 93 | // Only display content to screen readers 94 | // 95 | // See: http://a11yproject.com/posts/how-to-hide-content/ 96 | .sr-only { 97 | position: absolute; 98 | width: 1px; 99 | height: 1px; 100 | padding: 0; 101 | overflow: hidden; 102 | clip-path: rect(0 0 0 0); 103 | // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631 104 | overflow-wrap: normal; 105 | border: 0; 106 | } 107 | 108 | // Only display content on focus 109 | .show-on-focus { 110 | position: absolute !important; 111 | 112 | &:not(:focus) { 113 | width: 1px !important; 114 | height: 1px !important; 115 | padding: 0 !important; 116 | overflow: hidden !important; 117 | clip: rect(1px, 1px, 1px, 1px) !important; 118 | border: 0 !important; 119 | } 120 | 121 | &:focus { 122 | z-index: 999; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /script/analyze-variables.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import postcss from 'postcss' 3 | import {join} from 'path' 4 | import fs from 'fs' 5 | import atImport from 'postcss-import' 6 | import syntax from 'postcss-scss' 7 | import calc from 'postcss-calc' 8 | import simpleVars from 'postcss-simple-vars' 9 | 10 | import { dirname } from 'path'; 11 | import { fileURLToPath } from 'url'; 12 | 13 | const __dirname = dirname(fileURLToPath(import.meta.url)); 14 | 15 | const processor = postcss([ 16 | atImport({path: ['src']}), 17 | collectVariables(), 18 | simpleVars({includePaths: [join(__dirname, '../src/support/variables')]}) 19 | ]) 20 | 21 | async function analyzeVariables(fileName) { 22 | const contents = fs.readFileSync(fileName, 'utf8') 23 | 24 | const result = await processor.process(contents, {from: fileName, map: false, syntax}) 25 | for (const message of result.messages) { 26 | if (message.plugin === 'postcss-simple-vars' && message.type === 'variable') { 27 | if (!result.variables[`$${message.name}`].values.includes(message.value)) { 28 | result.variables[`$${message.name}`].values.push(message.value) 29 | } 30 | let computed = message.value 31 | try { 32 | const c = `--temp-property: calc(${message.value})`.replace('round(', '(') 33 | computed = postcss().use(calc()).process(c).css 34 | computed = computed.replace('--temp-property: ', '') 35 | } catch (e) { 36 | // Couldn't calculate because value might not be a number 37 | } 38 | result.variables[`$${message.name}`].computed = computed 39 | } 40 | } 41 | return result.variables 42 | } 43 | 44 | function checkNode(node) { 45 | const allowedFuncts = ['var', 'round', 'cubic-bezier'] 46 | const funcMatch = node.value.match(/([^\s]*)\(/) 47 | let approvedMatch = true 48 | if (funcMatch && !allowedFuncts.includes(funcMatch[1])) { 49 | approvedMatch = false 50 | } 51 | return node.variable && approvedMatch 52 | } 53 | 54 | function collectVariables() { 55 | return { 56 | postcssPlugin: 'prepare-contents', 57 | prepare(result) { 58 | const variables = {} 59 | return { 60 | AtRule(atRule) { 61 | atRule.remove() 62 | }, 63 | Comment(comment) { 64 | comment.remove() 65 | }, 66 | Declaration(node) { 67 | if (checkNode(node)) { 68 | node.value = node.value.replace(' !default', '') 69 | const fileName = node.source.input.file.replace(`${process.cwd()}/`, '') 70 | variables[node.prop] = { 71 | // computed: value, 72 | values: [node.value], 73 | source: { 74 | path: fileName, 75 | line: node.source.start.line 76 | } 77 | } 78 | } else { 79 | node.remove() 80 | } 81 | }, 82 | OnceExit() { 83 | result.variables = variables 84 | } 85 | } 86 | } 87 | } 88 | } 89 | 90 | export default analyzeVariables 91 | 92 | ;(async () => { 93 | const args = process.argv.slice(2) 94 | const file = args.length ? args.shift() : 'src/support/index.scss' 95 | const variables = await analyzeVariables(file) 96 | JSON.stringify(variables, null, 2) 97 | })() 98 | -------------------------------------------------------------------------------- /src/autocomplete/suggester.scss: -------------------------------------------------------------------------------- 1 | // Needs refactoring 2 | // stylelint-disable selector-max-type, selector-no-qualifying-type 3 | 4 | .suggester { 5 | position: relative; 6 | top: 0; 7 | left: 0; 8 | min-width: 180px; 9 | padding: 0; 10 | margin: 0; 11 | margin-top: var(--base-size-24); 12 | list-style: none; 13 | cursor: pointer; 14 | background: var(--overlay-bgColor, var(--color-canvas-overlay)); 15 | // stylelint-disable-next-line primer/borders, primer/colors 16 | border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); 17 | // stylelint-disable-next-line primer/borders 18 | border-radius: $border-radius; 19 | box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); 20 | 21 | li { 22 | display: block; 23 | padding: var(--base-size-4) var(--base-size-8); 24 | // stylelint-disable-next-line primer/typography 25 | font-weight: $font-weight-semibold; 26 | // stylelint-disable-next-line primer/borders, primer/colors 27 | border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); 28 | 29 | small { 30 | // stylelint-disable-next-line primer/typography 31 | font-weight: $font-weight-normal; 32 | color: var(--fgColor-muted, var(--color-fg-muted)); 33 | } 34 | 35 | &:last-child { 36 | border-bottom: 0; 37 | // stylelint-disable-next-line primer/borders 38 | border-bottom-right-radius: $border-radius; 39 | // stylelint-disable-next-line primer/borders 40 | border-bottom-left-radius: $border-radius; 41 | } 42 | 43 | &:first-child { 44 | // stylelint-disable-next-line primer/borders 45 | border-top-left-radius: $border-radius; 46 | // stylelint-disable-next-line primer/borders 47 | border-top-right-radius: $border-radius; 48 | } 49 | 50 | &:hover { 51 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 52 | text-decoration: none; 53 | background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); 54 | 55 | small { 56 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 57 | } 58 | 59 | .octicon { 60 | color: inherit !important; 61 | } 62 | } 63 | 64 | &[aria-selected='true'], 65 | &.navigation-focus { 66 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 67 | text-decoration: none; 68 | background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); 69 | 70 | small { 71 | color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); 72 | } 73 | 74 | .octicon { 75 | color: inherit !important; 76 | } 77 | } 78 | } 79 | } 80 | 81 | .suggester-container { 82 | position: absolute; 83 | top: 0; 84 | left: 0; 85 | z-index: 30; 86 | } 87 | 88 | // Responsive 89 | 90 | .page-responsive { 91 | @media (max-width: $width-sm) { 92 | .suggester-container { 93 | right: var(--base-size-8) !important; 94 | left: var(--base-size-8) !important; 95 | } 96 | 97 | .suggester li { 98 | padding: var(--base-size-8) var(--base-size-16); 99 | } 100 | } 101 | } 102 | --------------------------------------------------------------------------------
18 | Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled 19 | church-key thundercats. Brooklyn bicycle rights tousled, marfa actually. 20 |
40 | Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks. 41 |
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/src/markdown/index.scss:
--------------------------------------------------------------------------------
1 | @import '../support/index.scss';
2 | @import './markdown-body.scss';
3 | @import './headings.scss';
4 | @import './lists.scss';
5 | @import './tables.scss';
6 | @import './images.scss';
7 | @import './code.scss';
8 | @import './blob-csv.scss';
9 | @import './footnotes.scss';
10 |
--------------------------------------------------------------------------------
/src/support/index.scss:
--------------------------------------------------------------------------------
1 | // variables
2 | @import './variables/typography.scss';
3 | @import './variables/layout.scss';
4 | @import './variables/misc.scss';
5 |
6 | // mixins
7 | @import './mixins/color-modes.scss';
8 | @import './mixins/typography.scss';
9 | @import './mixins/layout.scss';
10 | @import './mixins/misc.scss';
11 |
--------------------------------------------------------------------------------
/script/build-docs:
--------------------------------------------------------------------------------
1 | #!/bin/bash -e
2 |
3 | # Build the base project so we can pull out the JSON data
4 | npm run dist
5 | cp -rf dist docs
6 |
7 | # Now build the docs site using that data
8 | cd docs
9 |
10 | if [ -n "$1" ]; then
11 | CI=true npm run build:storybook preview
12 | else
13 | CI=true npm run build:storybook
14 | fi
15 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
3 | "changelog": ["@changesets/changelog-github", {"repo": "primer/css"}],
4 | "commit": false,
5 | "linked": [],
6 | "access": "public",
7 | "baseBranch": "main",
8 | "updateInternalDependencies": "patch",
9 | "ignore": []
10 | }
11 |
--------------------------------------------------------------------------------
/.github/release_template.md:
--------------------------------------------------------------------------------
1 | Preparing for a release.
2 |
3 | ### Checklist
4 |
5 | Make sure these items are checked before merging.
6 |
7 | - [ ] Preview the docs change.
8 | - [ ] Preview npm release candidate.
9 | - [ ] CI passes on the release PR.
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/script/primer-css-compiler.js:
--------------------------------------------------------------------------------
1 | import postcss from 'postcss'
2 | import postCssConfig from '../postcss.config.cjs'
3 |
4 | export default async function compiler(css, options) {
5 | const { plugins, ...config } = postCssConfig
6 |
7 | const result = await postcss(plugins).process(css, {
8 | ...config,
9 | ...options
10 | })
11 | return result
12 | }
13 |
--------------------------------------------------------------------------------
/docs/stories/deprecated-components/BranchName/BranchName.mdx:
--------------------------------------------------------------------------------
1 | import {Canvas, Meta, Story} from '@storybook/blocks'
2 |
3 | import * as BranchNameStories from './BranchName.stories'
4 |
5 |
6 |
7 | # BranchName
8 |
9 | Branch names can be a link, span, and include an octicon before the branch name.
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/docs.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Primer CSS
3 | * https://primer.style
4 | *
5 | * Released under MIT license.
6 | */
7 |
8 | // Docs styles
9 | // Only meant for the docs at https://primer.style/css
10 |
11 | // CSS color variables
12 | @import './color-modes/index.scss';
13 |
14 | // Global requirements
15 | @import './core/index.scss';
16 | @import './product/index.scss';
17 | @import './marketing/index.scss';
18 |
--------------------------------------------------------------------------------
/src/marketing/index.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * @primer/css/marketing
3 | * http://primer.style/css
4 | *
5 | * Released under MIT license. Copyright (c) 2019 GitHub Inc.
6 | */
7 |
8 | // Global requirements
9 | @import './support/index.scss';
10 |
11 | // marketing specific css modules
12 | @import './type/index.scss';
13 | @import './buttons/index.scss';
14 | @import './links/index.scss';
15 | @import './utilities/index.scss';
16 |
--------------------------------------------------------------------------------
/src/color-modes/index.scss:
--------------------------------------------------------------------------------
1 | // All themes
2 |
3 | @import './themes/light.scss';
4 | @import './themes/light_colorblind.scss';
5 | @import './themes/light_high_contrast.scss';
6 | @import './themes/light_tritanopia.scss';
7 | @import './themes/dark.scss';
8 | @import './themes/dark_dimmed.scss';
9 | @import './themes/dark_high_contrast.scss';
10 | @import './themes/dark_colorblind.scss';
11 | @import './themes/dark_tritanopia.scss';
12 |
--------------------------------------------------------------------------------
/docs/stories/deprecated-components/FilterList/FilterList.mdx:
--------------------------------------------------------------------------------
1 | import {Canvas, Meta, Story} from '@storybook/blocks'
2 |
3 | import * as FilterListStories from './FilterList.stories'
4 |
5 |
6 |
7 | # FilterList
8 |
9 | A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/loaders/loaders.scss:
--------------------------------------------------------------------------------
1 | // Loaders
2 |
3 | // Animated Ellipsis
4 |
5 | .AnimatedEllipsis {
6 | display: inline-block;
7 | overflow: hidden;
8 | vertical-align: bottom;
9 |
10 | &::after {
11 | display: inline-block;
12 | content: '...';
13 | animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
14 | }
15 |
16 | @keyframes AnimatedEllipsis-keyframes {
17 | 0% { transform: translateX(-100%); }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | // This config file is necessary to get postcss-loader to work in
2 | // ./src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js.
3 | const path = require('path')
4 |
5 | module.exports = {
6 | parser: 'postcss-scss',
7 | plugins: [
8 | require('postcss-node-sass')({
9 | includePaths: [path.join(__dirname, 'node_modules')],
10 | outputStyle: 'compressed'
11 | }),
12 | require('autoprefixer')
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/docs/stories/deprecated-components/Loaders/Loaders.mdx:
--------------------------------------------------------------------------------
1 | import {Canvas, Meta, Story} from '@storybook/blocks'
2 |
3 | import * as LoaderStories from './Loaders.stories'
4 |
5 |
6 |
7 | # Loaders
8 |
9 | Loaders inform users that an action is still in progress and might take a while to complete.
10 |
11 | Add an animated ellipsis at the end of text with ``.
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.github/workflows/release_tracking.yml:
--------------------------------------------------------------------------------
1 | name: Release Event Tracking
2 | # Measure a datadog event every time a release occurs
3 |
4 | on:
5 | pull_request:
6 | types:
7 | - closed
8 | - opened
9 | - reopened
10 |
11 | release:
12 | types: [published]
13 |
14 | jobs:
15 | release-tracking:
16 | name: Release Tracking
17 | uses: primer/.github/.github/workflows/release_tracking.yml@v2.4.0
18 | secrets:
19 | datadog_api_key: ${{ secrets.DATADOG_API_KEY }}
20 |
--------------------------------------------------------------------------------
/docs/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "plugin:react/recommended",
4 | "plugin:jsx-a11y/recommended",
5 | "plugin:storybook/recommended"
6 | ],
7 | "rules": {
8 | "import/no-namespace": 0,
9 | "no-unused-vars": [
10 | "error",
11 | {
12 | "ignoreRestSiblings": true
13 | }
14 | ]
15 | },
16 | "settings": {
17 | "react": {
18 | "version": "detect"
19 | }
20 | },
21 | "globals": {
22 | "__DEV__": "readonly"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/docs/script/build-storybook:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | # Add base url to be able to serve static files
4 | if [ -n "$1" ]; then
5 | echo '