primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-10-03 20:07:58 +03:00
Code Issues Projects Releases Wiki Activity

Upgrade to @primer/primtives@8.2.0 and @primer/stylelint-config@13.0.0-rc (#2634)

Browse Source 
* Upgrade primer/primitives to latest

* Change theme imports

* Remove empty css imports

* upgrade

* Replacing $spacing variables

* Replace a few direct values

* Fix stylelint add disables script

* Add stylelint disables to exisiting files

* Fix ci run

* Create young-foxes-battle.md

* Updates from suggestions

* Fix theme in storybook
This commit is contained in:
Jon Rohan 2024-06-03 12:57:42 -07:00 committed by GitHub
parent baf0cdcda7
commit af3ab76454
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
51 changed files with 1293 additions and 671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/young-foxes-battle.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Upgrade to @primer/primtives@8.2.0 and @primer/stylelint-config@13.0.0-rc

4
.github/workflows/ci.yml vendored
View File

@ -16,9 +16,7 @@ jobs:
- run: npm ci
- run: npm run dist
- name: Lint source files
run: npx stylelint --fix
- name: Look for unused stylelint:disable lines
run: npm run stylelint -- --report-needless-disables
run: npm run stylelint:fix
- name: Push up any fixes
if: ${{ github.event_name == 'pull_request' }}
uses: stefanzweifel/git-auto-commit-action@v5

15
docs/.storybook/preview.js
View File

@ -70,15 +70,12 @@ export const decorators = [
const {parameters} = context
const defaultStoryType = 'banner'
const storyType = parameters.storyType || defaultStoryType
document.body.setAttribute('data-color-mode', context.globals.theme.startsWith('light') ? 'light' : 'dark')
document.body.setAttribute(
'data-light-theme',
context.globals.theme.startsWith('light') ? context.globals.theme : undefined,
)
document.body.setAttribute(
'data-dark-theme',
context.globals.theme.startsWith('dark') ? context.globals.theme : undefined,
)
const colorMode = context.globals.theme === '' ? 'light' : (context.globals.theme.startsWith('light') ? 'light' : 'dark')
const lightTheme = context.globals.theme === '' ? 'light' : (colorMode === 'light' ? context.globals.theme : undefined)
const darkTheme = context.globals.theme === '' ? 'dark' : (colorMode === 'dark' ? context.globals.theme : undefined)
document.body.setAttribute('data-color-mode', colorMode)
document.body.setAttribute('data-light-theme', lightTheme)
document.body.setAttribute('data-dark-theme', darkTheme)
return (
<>
{context.globals.theme === 'all' ? (

1561
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -41,7 +41,7 @@
"build:storybook": "cd docs && npm i && npm run build:storybook"
},
"dependencies": {
"@primer/primitives": "^7.15.12",
"@primer/primitives": "^8.2.0",
"@primer/view-components": "^0.22.0"
},
"devDependencies": {
@ -49,7 +49,7 @@
"@changesets/cli": "^2.27.1",
"@csstools/postcss-sass": "^5.1.1",
"@github/prettier-config": "^0.0.6",
"@primer/stylelint-config": "^12.9.1",
"@primer/stylelint-config": "^13.0.0-rc.af5663d",
"autoprefixer": "^10.4.18",
"chokidar-cli": "^3.0.0",
"cssstats": "^4.0.5",
@ -71,7 +71,7 @@
"postcss-simple-vars": "^7.0.1",
"prettier": "^3.2.5",
"semver": "^7.6.0",
"stylelint": "^15.11.0",
"stylelint": "^16.6.1",
"table": "^6.8.1"
},
"jest": {

6
script/stylelint-add-disables.js
View File

@ -1,4 +1,4 @@
#!/usr/bin/env node
#!/usr/bin/env -S NODE_NO_WARNINGS=1 node
// Disables stylelint rules in SASS/CSS files with next-line comments. This is
// useful when introducing a new rule that causes many failures. The comments
// can be fixed and removed at while updating the file later.
@ -10,8 +10,8 @@
import fs from 'fs'
import {execFile} from 'child_process'
execFile('stylelint', ['--quiet', '--formatter', 'json', process.argv[2]], (error, stdout) => {
for (const result of JSON.parse(stdout)) {
execFile('stylelint', ['--quiet', '--formatter', 'json', process.argv[2]], (error, stdout, stderr) => {
for (const result of JSON.parse(stdout || stderr || '[]')) {
const filename = result.source
const jsLines = fs.readFileSync(filename, 'utf8').split('\n')
const offensesByLine = {}

10
src/autocomplete/suggester.scss
View File

@ -8,7 +8,7 @@
min-width: 180px;
padding: 0;
margin: 0;
margin-top: $spacer-4;
margin-top: var(--base-size-24);
list-style: none;
cursor: pointer;
background: var(--overlay-bgColor, var(--color-canvas-overlay));
@ -18,7 +18,7 @@
li {
display: block;
padding: $spacer-1 $spacer-2;
padding: var(--base-size-4) var(--base-size-8);
font-weight: $font-weight-semibold;
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@ -81,12 +81,12 @@
.page-responsive {
@media (max-width: $width-sm) {
.suggester-container {
right: $spacer-2 !important;
left: $spacer-2 !important;
right: var(--base-size-8) !important;
left: var(--base-size-8) !important;
}
.suggester li {
padding: $spacer-2 $spacer-3;
padding: var(--base-size-8) var(--base-size-16);
}
}
}

2
src/base/kbd.scss
View File

@ -3,7 +3,7 @@
kbd {
display: inline-block;
padding: ($spacer-1 - 1) ($spacer-1 + 1);
padding: calc(var(--base-size-4) - 1) calc(var(--base-size-4) + 1);
font: 11px $mono-font;
// stylelint-disable-next-line primer/typography
line-height: 10px;

2
src/base/normalize.scss vendored
View File

@ -226,7 +226,7 @@ samp {
*/
figure {
margin: 1em $spacer-6;
margin: 1em var(--base-size-40);
}
/**

2
src/box/box-overlay.scss
View File

@ -34,7 +34,7 @@
}
.help {
padding-top: $spacer-2;
padding-top: var(--base-size-8);
margin: 0;
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;

2
src/buttons/button-group.scss
View File

@ -12,7 +12,7 @@
// Proper spacing for multiple button groups (a la, gollum editor)
+ .BtnGroup,
+ .btn {
margin-left: $spacer-1;
margin-left: var(--base-size-4);
}
}

6
src/buttons/button.scss
View File

@ -5,7 +5,7 @@
position: relative;
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 5px $spacer-3;
padding: 5px var(--base-size-16);
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
@ -35,7 +35,7 @@
}
.octicon {
margin-right: $spacer-1;
margin-right: var(--base-size-4);
color: var(--fgColor-muted, var(--color-fg-muted));
vertical-align: text-bottom;
@ -54,7 +54,7 @@
}
.dropdown-caret {
margin-left: $spacer-1;
margin-left: var(--base-size-4);
opacity: 0.8;
}
}

1
src/buttons/misc.scss
View File

@ -147,6 +147,7 @@
&.inline {
position: relative;
// stylelint-disable-next-line primer/spacing
top: -1px;
display: inline-block;
// stylelint-disable-next-line primer/spacing

7
src/color-modes/themes/dark.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_dark.scss';
@include color-mode-theme(dark) {
@include primer-colors-dark;
}
@import '@primer/primitives/dist/css/functional/themes/dark.css';

7
src/color-modes/themes/dark_colorblind.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
@include color-mode-theme(dark_colorblind) {
@include primer-colors-dark_colorblind;
}
@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';

7
src/color-modes/themes/dark_dimmed.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
@include color-mode-theme(dark_dimmed) {
@include primer-colors-dark_dimmed;
}
@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';

7
src/color-modes/themes/dark_high_contrast.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
@include color-mode-theme(dark_high_contrast) {
@include primer-colors-dark_high_contrast;
}
@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';

7
src/color-modes/themes/dark_tritanopia.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
@include color-mode-theme(dark_tritanopia) {
@include primer-colors-dark_tritanopia;
}
@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';

7
src/color-modes/themes/light.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_light.scss';
@include color-mode-theme(light, true) {
@include primer-colors-light;
}
@import '@primer/primitives/dist/css/functional/themes/light.css';

7
src/color-modes/themes/light_colorblind.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_light_colorblind.scss';
@include color-mode-theme(light_colorblind) {
@include primer-colors-light_colorblind;
}
@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';

7
src/color-modes/themes/light_high_contrast.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
@include color-mode-theme(light_high_contrast) {
@include primer-colors-light_high_contrast;
}
@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';

7
src/color-modes/themes/light_tritanopia.scss
View File

@ -1,6 +1 @@
@import '../../support/index.scss';
@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
@include color-mode-theme(light_tritanopia) {
@include primer-colors-light_tritanopia;
}
@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';

11
src/forms/form-control.scss
View File

@ -72,8 +72,8 @@
// Textarea
textarea.form-control {
padding-top: $spacer-2;
padding-bottom: $spacer-2;
padding-top: var(--base-size-8);
padding-bottom: var(--base-size-8);
line-height: $lh-default;
}
@ -138,9 +138,9 @@ textarea.form-control {
label {
em.highlight {
position: relative;
left: -$spacer-1;
left: calc(var(--base-size-4) * -1);
// stylelint-disable-next-line primer/spacing
padding: 2px $spacer-1;
padding: 2px var(--base-size-4);
font-style: normal;
background: var(--bgColor-attention-muted, var(--color-attention-subtle));
border-radius: $border-radius;
@ -204,6 +204,7 @@ textarea.form-control {
img {
position: relative;
// stylelint-disable-next-line primer/spacing
top: -2px;
}
}
@ -247,7 +248,7 @@ input::-webkit-inner-spin-button {
.form-warning {
// stylelint-disable-next-line primer/spacing
padding: $spacer-2 10px;
padding: var(--base-size-8) 10px;
// stylelint-disable-next-line primer/spacing
margin: 10px 0;
font-size: $h5-size;

9
src/forms/form-group.scss
View File

@ -95,7 +95,7 @@
dd, // TODO: Deprecate
.form-group-body {
h4 {
margin: $spacer-1 0 0;
margin: var(--base-size-4) 0 0;
&.is-error {
color: var(--fgColor-danger, var(--color-danger-fg));
@ -172,8 +172,8 @@
z-index: 10;
display: block; // Show up in errored/warn state
max-width: 450px; // Keep our long errors readable
padding: $spacer-1 $spacer-2;
margin: $spacer-2 0 0;
padding: var(--base-size-4) var(--base-size-8);
margin: var(--base-size-8) 0 0;
font-size: $font-size-small;
font-weight: $font-weight-normal;
border-style: $border-style;
@ -184,6 +184,7 @@
&::before {
position: absolute;
bottom: 100%;
// stylelint-disable-next-line primer/spacing
left: 10px;
z-index: 15;
width: 0;
@ -276,7 +277,7 @@
.note {
min-height: 17px;
// stylelint-disable-next-line primer/spacing
margin: $spacer-1 0 2px;
margin: var(--base-size-4) 0 2px;
font-size: $font-size-small;
color: var(--fgColor-muted, var(--color-fg-muted));

2
src/forms/form-select.scss
View File

@ -5,7 +5,7 @@
display: inline-block;
max-width: 100%;
height: $size-5;
padding-right: $spacer-4;
padding-right: var(--base-size-24);
background-color: var(--bgColor-default, var(--color-canvas-default));
// SVG with fill: #586069 (--color-icon-secondary)
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');

2
src/forms/input-group.scss
View File

@ -30,7 +30,7 @@
// Autocomplete with embedded icon
.form-control.autocomplete-embedded-icon-wrap {
display: inline-flex;
padding: $spacer-1 * 1.25 $spacer-2;
padding: calc(var(--base-size-4) * 1.25) var(--base-size-8);
}
}

6
src/forms/radio-group.scss
View File

@ -7,7 +7,7 @@
.radio-label {
float: left;
// stylelint-disable-next-line primer/spacing
padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
padding: 6px var(--base-size-16) 6px clac(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
font-size: $body-font-size;
@ -35,7 +35,7 @@
}
.octicon {
margin-left: $spacer-1;
margin-left: var(--base-size-4);
color: var(--fgColor-muted, var(--color-fg-subtle));
}
}
@ -44,7 +44,7 @@
z-index: 3;
float: left;
// stylelint-disable-next-line primer/spacing
margin: 10px (-$spacer-5) 0 $spacer-3;
margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16);
&:disabled {
position: relative; // enables z-index

4
src/header/header.scss
View File

@ -1,7 +1,7 @@
.Header {
z-index: 32; // TODO: Figure out z-index system
display: flex;
padding: $spacer-3;
padding: var(--base-size-16);
font-size: $h5-size;
line-height: $lh-default;
color: var(--header-fgColor-default, var(--color-header-text));
@ -12,7 +12,7 @@
.Header-item {
display: flex;
margin-right: $spacer-3;
margin-right: var(--base-size-16);
align-self: stretch;
align-items: center;
flex-wrap: nowrap;

1
src/labels/issue-labels.scss
View File

@ -7,6 +7,7 @@
.g-emoji {
position: relative;
// stylelint-disable-next-line primer/spacing
top: -0.05em;
display: inline-block;
font-size: 1em;

1
src/layout/grid-offset.scss
View File

@ -2,7 +2,6 @@
// Offset Columns
// stylelint-disable primer/spacing
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }

18
src/layout/grid.scss
View File

@ -34,9 +34,9 @@
// Gutters
// Apply padding and a negative margin to the outside of the container
// stylelint-disable primer/spacing
@mixin gutters ($gutter-width: $spacer-3) {
margin-right: -$gutter-width;
margin-left: -$gutter-width;
@mixin gutters ($gutter-width: var(--base-size-16)) {
margin-right: calc($gutter-width * -1);
margin-left: calc($gutter-width * -1);
> [class*='col-'] {
padding-right: $gutter-width !important;
@ -45,21 +45,21 @@
}
.gutter {
@include gutters($spacer-3);
@include gutters(var(--base-size-16));
}
.gutter-condensed {
@include gutters($spacer-2);
@include gutters(var(--base-size-8));
}
.gutter-spacious {
@include gutters($spacer-4);
@include gutters(var(--base-size-24));
}
@each $breakpoint in map-keys($breakpoints) {
@include breakpoint($breakpoint) {
.gutter-#{$breakpoint} { @include gutters($spacer-3); }
.gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); }
.gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); }
.gutter-#{$breakpoint} { @include gutters(var(--base-size-16)); }
.gutter-#{$breakpoint}-condensed { @include gutters(var(--base-size-8)); }
.gutter-#{$breakpoint}-spacious { @include gutters(var(--base-size-24)); }
}
}

56
src/layout/page-layout.scss
View File

@ -10,8 +10,8 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
--Layout-content-width: 100%;
--Layout-template-columns: 1fr var(--Layout-pane-width);
--Layout-template-areas: 'content pane';
--Layout-column-gap: #{$spacer-3};
--Layout-row-gap: #{$spacer-3};
--Layout-column-gap: var(--base-size-16);
--Layout-row-gap: var(--base-size-16);
// the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
--Layout-outer-spacing-x: 0px; // wrapper margin x
@ -26,6 +26,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
@mixin Layout-line-divider {
position: absolute;
// stylelint-disable-next-line primer/spacing
left: calc(var(--Layout-outer-spacing-x) * -1);
display: block;
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
@ -36,11 +37,12 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
@mixin Layout-filled-divider {
position: absolute;
bottom: calc(#{$spacer-2} * -1); // -8px
bottom: calc(var(--base-size-8) * -1);
// stylelint-disable-next-line primer/spacing
left: calc(var(--Layout-outer-spacing-x) * -1);
display: block;
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
height: #{$spacer-2}; // 8px
height: var(--base-size-8);
content: '';
background-color: var(--bgColor-inset, var(--color-canvas-inset));
box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
@ -255,6 +257,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
&::before {
@include Layout-line-divider;
// stylelint-disable-next-line primer/spacing
top: calc(#{$border-width * -1} - var(--Layout-row-gap));
}
}
@ -267,6 +270,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
&::after {
@include Layout-line-divider;
// stylelint-disable-next-line primer/spacing
bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
}
}
@ -274,24 +278,26 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
.PageLayout-region--dividerNarrow-filled-before {
position: relative;
// stylelint-disable-next-line primer/spacing
margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
margin-top: calc(var(--base-size-8) + var(--Layout-row-gap));
&::after {
@include Layout-filled-divider;
top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
// stylelint-disable-next-line primer/spacing
top: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
}
}
.PageLayout-region--dividerNarrow-filled-after {
position: relative;
// stylelint-disable-next-line primer/spacing
margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
margin-bottom: calc(var(--base-size-8) + var(--Layout-row-gap));
&::before {
@include Layout-filled-divider;
bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
// stylelint-disable-next-line primer/spacing
bottom: calc(calc(var(--base-size-8) * -1) - var(--Layout-row-gap));
}
}
}
@ -330,48 +336,48 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
// outer spacing
.PageLayout--outerSpacing-normal {
--Layout-outer-spacing-x: #{$spacer-3};
--Layout-outer-spacing-y: #{$spacer-3};
--Layout-outer-spacing-x: var(--base-size-16);
--Layout-outer-spacing-y: var(--base-size-16);
@include breakpoint(lg) {
--Layout-outer-spacing-x: #{$spacer-4};
--Layout-outer-spacing-y: #{$spacer-4};
--Layout-outer-spacing-x: var(--base-size-24);
--Layout-outer-spacing-y: var(--base-size-24);
}
}
.PageLayout--outerSpacing-condensed {
--Layout-outer-spacing-x: #{$spacer-3};
--Layout-outer-spacing-y: #{$spacer-3};
--Layout-outer-spacing-x: var(--base-size-16);
--Layout-outer-spacing-y: var(--base-size-16);
}
// inner spacing
.PageLayout--innerSpacing-normal {
--Layout-inner-spacing-min: #{$spacer-3};
--Layout-inner-spacing-max: #{$spacer-3};
--Layout-inner-spacing-min: var(--base-size-16);
--Layout-inner-spacing-max: var(--base-size-16);
@include breakpoint(lg) {
--Layout-inner-spacing-max: #{$spacer-4};
--Layout-inner-spacing-max: var(--base-size-24);
}
}
.PageLayout--innerSpacing-condensed {
--Layout-inner-spacing-min: #{$spacer-3};
--Layout-inner-spacing-max: #{$spacer-3};
--Layout-inner-spacing-min: var(--base-size-16);
--Layout-inner-spacing-max: var(--base-size-16);
}
// column gap
.PageLayout--columnGap-normal {
--Layout-column-gap: #{$spacer-3};
--Layout-column-gap: var(--base-size-16);
@include breakpoint(lg) {
--Layout-column-gap: #{$spacer-4};
--Layout-column-gap: var(--base-size-24);
}
}
.PageLayout--columnGap-condensed {
--Layout-column-gap: #{$spacer-3};
--Layout-column-gap: var(--base-size-16);
}
.PageLayout--columnGap-none {
@ -382,10 +388,10 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
// row gap
.PageLayout--rowGap-normal {
--Layout-row-gap: #{$spacer-3};
--Layout-row-gap: var(--base-size-16);
@include breakpoint(lg) {
--Layout-row-gap: #{$spacer-4};
--Layout-row-gap: var(--base-size-24);
}
}
@ -395,7 +401,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
}
.PageLayout--rowGap-condensed {
--Layout-row-gap: #{$spacer-3};
--Layout-row-gap: var(--base-size-16);
}
// regions

2
src/markdown/blob-csv.scss
View File

@ -13,7 +13,7 @@
.blob-num {
// stylelint-disable-next-line primer/spacing
padding: 10px $spacer-2 9px;
padding: 10px var(--base-size-8) 9px;
text-align: right;
background: var(--bgColor-default, var(--color-canvas-default));
border: 0;

4
src/markdown/code.scss
View File

@ -42,7 +42,7 @@
}
.highlight {
margin-bottom: $spacer-3;
margin-bottom: var(--base-size-16);
pre {
margin-bottom: 0;
@ -52,7 +52,7 @@
.highlight pre,
pre {
padding: $spacer-3;
padding: var(--base-size-16);
overflow: auto;
// stylelint-disable-next-line primer/typography
font-size: 85%;

14
src/markdown/footnotes.scss
View File

@ -18,12 +18,12 @@
border-top: $border;
ol {
padding-left: $spacer-3;
padding-left: var(--base-size-16);
ul {
display: inline-block;
padding-left: $spacer-3;
margin-top: $spacer-3;
padding-left: var(--base-size-16);
margin-top: var(--base-size-16);
}
}
@ -33,10 +33,10 @@
li:target::before {
position: absolute;
top: -$spacer-2;
right: -$spacer-2;
bottom: -$spacer-2;
left: -$spacer-4;
top: calc(var(--base-size-8) * -1);
right: calc(var(--base-size-8) * -1);
bottom: calc(var(--base-size-8) * -1);
left: calc(var(--base-size-24) * -1);
pointer-events: none;
content: '';
// stylelint-disable-next-line primer/borders

4
src/markdown/headings.scss
View File

@ -9,8 +9,8 @@
h4,
h5,
h6 {
margin-top: $spacer-4;
margin-bottom: $spacer-3;
margin-top: var(--base-size-24);
margin-bottom: var(--base-size-16);
font-weight: $font-weight-bold;
line-height: $lh-condensed;

9
src/markdown/lists.scss
View File

@ -72,10 +72,11 @@
}
li > p {
margin-top: $spacer-3;
margin-top: var(--base-size-16);
}
li + li {
// stylelint-disable-next-line primer/spacing
margin-top: $em-spacer-3;
}
@ -84,15 +85,15 @@
dt {
padding: 0;
margin-top: $spacer-3;
margin-top: var(--base-size-16);
font-size: 1em;
font-style: italic;
font-weight: $font-weight-bold;
}
dd {
padding: 0 $spacer-3;
margin-bottom: $spacer-3;
padding: 0 var(--base-size-16);
margin-bottom: var(--base-size-16);
}
}
}

6
src/markdown/markdown-body.scss
View File

@ -48,7 +48,7 @@
.anchor {
float: left;
padding-right: $spacer-1;
padding-right: var(--base-size-4);
// stylelint-disable-next-line primer/spacing
margin-left: -20px;
line-height: $lh-condensed-ultra;
@ -67,13 +67,13 @@
pre,
details {
margin-top: 0;
margin-bottom: $spacer-3;
margin-bottom: var(--base-size-16);
}
hr {
height: $em-spacer-3;
padding: 0;
margin: $spacer-4 0;
margin: var(--base-size-24) 0;
background-color: var(--borderColor-default, var(--color-border-default));
border: 0;
}

2
src/marketing/links/link.scss
View File

@ -9,6 +9,7 @@
&::after,
&.link-emphasis-mktg::before {
position: absolute;
// stylelint-disable-next-line primer/spacing
bottom: -0.15em;
left: 0;
width: calc(100% - 1em);
@ -44,6 +45,7 @@
&.arrow-target-mktg {
.arrow-symbol-mktg {
// stylelint-disable-next-line primer/spacing
margin-left: -$em-spacer-3;
}
}

8
src/marketing/utilities/layout.scss
View File

@ -6,16 +6,24 @@
@include breakpoint($breakpoint) {
@each $scale, $size in $spacer-map-extended {
@if ($size != 0 or $variant != '') {
// stylelint-disable-next-line primer/spacing
.top#{$variant}-#{$scale} { top: $size !important; }
// stylelint-disable-next-line primer/spacing
.right#{$variant}-#{$scale} { right: $size !important; }
// stylelint-disable-next-line primer/spacing
.bottom#{$variant}-#{$scale} { bottom: $size !important; }
// stylelint-disable-next-line primer/spacing
.left#{$variant}-#{$scale} { left: $size !important; }
}
@if ($size != 0) {
// stylelint-disable-next-line primer/spacing
.top#{$variant}-n#{$scale} { top: -$size !important; }
// stylelint-disable-next-line primer/spacing
.right#{$variant}-n#{$scale} { right: -$size !important; }
// stylelint-disable-next-line primer/spacing
.bottom#{$variant}-n#{$scale} { bottom: -$size !important; }
// stylelint-disable-next-line primer/spacing
.left#{$variant}-n#{$scale} { left: -$size !important; }
}
}

8
src/navigation/filter-list.scss
View File

@ -26,8 +26,8 @@
.filter-item {
position: relative;
display: block;
padding: $spacer-2 $spacer-3;
margin-bottom: $spacer-1;
padding: var(--base-size-8) var(--base-size-16);
margin-bottom: var(--base-size-4);
overflow: hidden;
font-size: $h5-size;
color: var(--fgColor-muted, var(--color-fg-muted));
@ -72,9 +72,9 @@
.bar {
position: absolute;
top: 2px;
top: var(--base-size-2);
right: 0;
bottom: 2px;
bottom: var(--base-size-2);
z-index: -1;
display: inline-block;
background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));

6
src/navigation/sidenav.scss
View File

@ -11,7 +11,7 @@
display: block;
width: 100%;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3;
padding: 12px var(--base-size-16);
color: var(--fgColor-default, var(--color-fg-default));
text-align: left;
background-color: transparent;
@ -68,7 +68,7 @@
.SideNav-icon {
width: 16px;
margin-right: $spacer-2;
margin-right: var(--base-size-8);
color: var(--fgColor-muted, var(--color-fg-muted));
}
@ -80,7 +80,7 @@
position: relative;
display: block;
width: 100%;
padding: $spacer-1 0;
padding: var(--base-size-4) 0;
color: var(--fgColor-accent, var(--color-accent-fg));
text-align: left;
background-color: transparent;

7
src/navigation/subnav.scss
View File

@ -23,7 +23,7 @@
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 5px $spacer-3;
padding: 5px var(--base-size-16);
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
@ -85,7 +85,7 @@
.subnav-search-input {
width: 320px;
padding-left: $spacer-5;
padding-left: var(--base-size-32);
color: var(--fgColor-muted, var(--color-fg-muted));
}
@ -96,8 +96,9 @@
.subnav-search-icon {
position: absolute;
// stylelint-disable-next-line primer/spacing
top: 9px;
left: 8px;
left: var(--base-size-8);
display: block;
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;

8
src/pagination/pagination.scss
View File

@ -72,7 +72,7 @@
// chevron-left
.previous_page::before {
margin-right: $spacer-1;
margin-right: var(--base-size-4);
clip-path:
polygon(
9.8px 12.8px,
@ -89,7 +89,7 @@
// chevron-right
.next_page::after {
margin-left: $spacer-1;
margin-left: var(--base-size-4);
clip-path:
polygon(
6.2px 3.2px,
@ -146,8 +146,8 @@
// Unified centered pagination across the site
.paginate-container {
margin-top: $spacer-3;
margin-bottom: $spacer-3;
margin-top: var(--base-size-16);
margin-bottom: var(--base-size-16);
text-align: center;
.pagination {

2
src/primitives/index.scss
View File

@ -2,8 +2,6 @@
@import '@primer/primitives/dist/css/base/typography/typography';
@import '@primer/primitives/dist/css/functional/size/border';
@import '@primer/primitives/dist/css/functional/size/breakpoints';
@import '@primer/primitives/dist/css/functional/size/size-coarse';
@import '@primer/primitives/dist/css/functional/size/size-fine';
@import '@primer/primitives/dist/css/functional/size/size';
@import '@primer/primitives/dist/css/functional/size/viewport';
@import '@primer/primitives/dist/css/functional/typography/typography';

46
src/select-menu/select-menu.scss
View File

@ -15,7 +15,7 @@ $SelectMenu-max-height: 480px !default;
left: 0;
z-index: 99;
display: flex;
padding: $spacer-3;
padding: var(--base-size-16);
pointer-events: none;
flex-direction: column;
@ -78,7 +78,7 @@ $SelectMenu-max-height: 480px !default;
@keyframes SelectMenu-modal-animation--sm {
0% {
opacity: 0;
transform: translateY(-$spacer-3);
transform: translateY(calc(var(--base-size-16) * -1));
}
}
@ -86,7 +86,7 @@ $SelectMenu-max-height: 480px !default;
width: 300px;
height: auto;
max-height: $SelectMenu-max-height;
margin: $spacer-2 0 $spacer-3 0;
margin: var(--base-size-8) 0 var(--base-size-16) 0;
font-size: $font-size-small;
border-color: var(--borderColor-default, var(--color-border-default));
border-radius: $border-radius;
@ -101,14 +101,14 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-header {
display: flex;
padding: $spacer-3;
padding: var(--base-size-16);
flex: none; // fixes header from getting squeezed in Safari iOS
align-items: center;
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing
padding: 7px 7px 7px $spacer-3;
padding: 7px 7px 7px var(--base-size-16);
}
}
@ -123,17 +123,17 @@ $SelectMenu-max-height: 480px !default;
}
.SelectMenu-closeButton {
padding: $spacer-3;
margin: -$spacer-3;
padding: var(--base-size-16);
margin: calc(var(--base-size-16) * -1);
line-height: 1;
color: var(--fgColor-muted, var(--color-fg-muted));
background-color: transparent;
border: 0;
@include breakpoint(sm) {
padding: $spacer-2;
padding: var(--base-size-8);
// stylelint-disable-next-line primer/spacing
margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch
margin: calc(var(--base-size-8) * -1) (-7px); // Using -7px fixes a :focus glitch
}
}
@ -142,12 +142,12 @@ $SelectMenu-max-height: 480px !default;
// An input to filter a large list
.SelectMenu-filter {
padding: $spacer-3;
padding: var(--base-size-16);
margin: 0;
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) {
padding: $spacer-2;
padding: var(--base-size-8);
}
}
@ -185,7 +185,7 @@ $SelectMenu-max-height: 480px !default;
display: flex;
align-items: center;
width: 100%;
padding: $spacer-3;
padding: var(--base-size-16);
overflow: hidden;
color: var(--fgColor-default, var(--color-fg-default));
text-align: left;
@ -212,8 +212,8 @@ $SelectMenu-max-height: 480px !default;
// Icon shown on the left of a list item.
.SelectMenu-icon {
width: $spacer-3; // fixed width to make sure following content aligns
margin-right: $spacer-2;
width: var(--base-size-16); // fixed width to make sure following content aligns
margin-right: var(--base-size-8);
flex-shrink: 0;
}
@ -243,13 +243,13 @@ $SelectMenu-max-height: 480px !default;
}
@include breakpoint(sm) {
padding: $spacer-2 $spacer-2 0 $spacer-2;
padding: var(--base-size-8) var(--base-size-8) 0 var(--base-size-8);
}
}
.SelectMenu-tab {
flex: 1;
padding: $spacer-2 $spacer-3;
padding: var(--base-size-8) var(--base-size-16);
font-size: $font-size-small;
font-weight: $font-weight-semibold;
color: var(--fgColor-muted, var(--color-fg-muted));
@ -261,7 +261,7 @@ $SelectMenu-max-height: 480px !default;
@include breakpoint(sm) {
flex: none;
padding: $spacer-1 $spacer-3;
padding: var(--base-size-4) var(--base-size-16);
border: $border-width $border-style transparent;
border-bottom-width: 0;
border-top-left-radius: $border-radius;
@ -289,7 +289,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-message {
// stylelint-disable-next-line primer/spacing
padding: 7px $spacer-3;
padding: 7px var(--base-size-16);
text-align: center;
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@ -301,7 +301,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-blankslate,
.SelectMenu-loading {
padding: $spacer-4 $spacer-3;
padding: var(--base-size-24) var(--base-size-16);
text-align: center;
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
}
@ -311,7 +311,7 @@ $SelectMenu-max-height: 480px !default;
// Can be used to divide the list into multiple groups
.SelectMenu-divider {
padding: $spacer-1 $spacer-3;
padding: var(--base-size-4) var(--base-size-16);
margin: 0;
font-size: $font-size-small;
font-weight: $font-weight-semibold;
@ -336,7 +336,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-footer {
z-index: 0; // Avoid top border from getting covered by the negative margin of the list
padding: $spacer-2 $spacer-3;
padding: var(--base-size-8) var(--base-size-16);
font-size: $font-size-small;
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;
@ -344,7 +344,7 @@ $SelectMenu-max-height: 480px !default;
@include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing
padding: 7px $spacer-3;
padding: 7px var(--base-size-16);
}
}
@ -361,7 +361,7 @@ $SelectMenu-max-height: 480px !default;
@include breakpoint(sm) {
height: auto;
max-height: $SelectMenu-max-height;
margin-top: $spacer-2;
margin-top: var(--base-size-8);
}
}
}

3
src/support/mixins/misc.scss
View File

@ -3,9 +3,10 @@
&::after,
&::before {
position: absolute;
// stylelint-disable-next-line primer/spacing
top: 11px;
right: 100%;
left: -8px;
left: calc(var(--base-size-8) * -1);
display: block;
width: 8px;
height: 16px;

10
src/toasts/toasts.scss
View File

@ -2,7 +2,7 @@
.Toast {
display: flex;
margin: $spacer-2;
margin: var(--base-size-8);
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-default, var(--color-canvas-default));
border-radius: $border-radius;
@ -11,7 +11,7 @@
@include breakpoint(sm) {
width: max-content;
max-width: 450px;
margin: $spacer-3;
margin: var(--base-size-16);
}
}
@ -19,7 +19,7 @@
display: flex;
align-items: center;
justify-content: center;
width: $spacer-3 * 3;
width: calc(var(--base-size-16) * 3);
flex-shrink: 0;
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
@ -30,12 +30,12 @@
}
.Toast-content {
padding: $spacer-3;
padding: var(--base-size-16);
}
.Toast-dismissButton {
max-height: 54px; // keeps button aligned to the top
padding: $spacer-3;
padding: var(--base-size-16);
color: inherit;
background-color: transparent;
border: 0;

8
src/tooltips/tooltips.scss
View File

@ -86,12 +86,12 @@
&::after {
right: auto;
left: 50%;
margin-left: -$spacer-3;
margin-left: calc(var(--base-size-16) * -1);
}
}
.tooltipped-sw::after {
margin-right: -$spacer-3;
margin-right: calc(var(--base-size-16) * -1);
}
// Tooltips above the object
@ -109,12 +109,12 @@
&::after {
right: auto;
left: 50%;
margin-left: -$spacer-3;
margin-left: calc(var(--base-size-16) * -1);
}
}
.tooltipped-nw::after {
margin-right: -$spacer-3;
margin-right: calc(var(--base-size-16) * -1);
}
// Move the tooltip body to the center of the object.

12
src/utilities/padding.scss
View File

@ -40,16 +40,16 @@
// responsive padding for containers
.p-responsive {
padding-right: var(--base-size-16, $spacer-3) !important;
padding-left: var(--base-size-16, $spacer-3) !important;
padding-right: var(--base-size-16) !important;
padding-left: var(--base-size-16) !important;
@include breakpoint(sm) {
padding-right: var(--base-size-40, $spacer-6) !important;
padding-left: var(--base-size-40, $spacer-6) !important;
padding-right: var(--base-size-40) !important;
padding-left: var(--base-size-40) !important;
}
@include breakpoint(lg) {
padding-right: var(--base-size-16, $spacer-3) !important;
padding-left: var(--base-size-16, $spacer-3) !important;
padding-right: var(--base-size-16) !important;
padding-left: var(--base-size-16) !important;
}
}

10
stylelint.config.cjs
View File

@ -1,13 +1,5 @@
module.exports = {
extends: ['@primer/stylelint-config'],
ignoreFiles: ['**/*.js', '**/*.cjs'],
rules: {
'primer/no-override': false,
'primer/no-deprecated-colors': [
true,
{
inlineFallback: true,
},
],
},
rules: {}
}