diff --git a/.github/workflows/azure-preview-env-deploy.yml b/.github/workflows/azure-preview-env-deploy.yml index 416ae13ca6c7..514cd6fe7054 100644 --- a/.github/workflows/azure-preview-env-deploy.yml +++ b/.github/workflows/azure-preview-env-deploy.yml @@ -202,7 +202,6 @@ jobs: rsync -rptovR --ignore-missing-args ./user-code/lib/./**/*.{js,ts} ./lib rsync -rptovR --ignore-missing-args ./user-code/middleware/./**/*.{js,ts} ./middleware rsync -rptovR ./user-code/src/./**/*.tsx ./src - rsync -rptovR ./user-code/stylesheets/./**/*.scss ./stylesheets - uses: ./.github/actions/warmup-remotejson-cache with: diff --git a/Dockerfile b/Dockerfile index 28a024c94fad..7fb99efcb1c6 100644 --- a/Dockerfile +++ b/Dockerfile @@ -44,7 +44,6 @@ RUN npm prune --production # --------------- FROM all_deps as builder -COPY stylesheets ./stylesheets COPY components ./components COPY lib ./lib COPY src ./src diff --git a/components/article/ArticleInlineLayout.module.scss b/components/article/ArticleInlineLayout.module.scss index 47ea26e2fb09..05b340089892 100644 --- a/components/article/ArticleInlineLayout.module.scss +++ b/components/article/ArticleInlineLayout.module.scss @@ -1,6 +1,6 @@ @import "@primer/css/support/variables/layout.scss"; @import "@primer/css/support/mixins/layout.scss"; -@import "stylesheets/breakpoint-xxl.scss"; +@import "src/frame/stylesheets/breakpoint-xxl.scss"; .containerBox { max-width: 720px; diff --git a/components/ui/MarkdownContent/stylesheets/table.scss b/components/ui/MarkdownContent/stylesheets/table.scss index 166fd3cf1134..794fcf59a990 100644 --- a/components/ui/MarkdownContent/stylesheets/table.scss +++ b/components/ui/MarkdownContent/stylesheets/table.scss @@ -1,4 +1,4 @@ -@import "stylesheets/breakpoint-xxl.scss"; +@import "src/frame/stylesheets/breakpoint-xxl.scss"; .markdownBody { table { diff --git a/content/contributing/setting-up-your-environment-to-work-on-github-docs/creating-a-local-environment.md b/content/contributing/setting-up-your-environment-to-work-on-github-docs/creating-a-local-environment.md index 7bfcb177569c..6642333cc997 100644 --- a/content/contributing/setting-up-your-environment-to-work-on-github-docs/creating-a-local-environment.md +++ b/content/contributing/setting-up-your-environment-to-work-on-github-docs/creating-a-local-environment.md @@ -96,5 +96,4 @@ For more information about using a codespace for working on {% data variables.pr - [Data](https://github.com/github/docs/blob/main/data/README.md) - [Middleware](https://github.com/github/docs/blob/main/middleware/README.md) - [Scripts](https://github.com/github/docs/blob/main/script/README.md) -- [Styles](https://github.com/github/docs/blob/main/stylesheets/README.md) - [Tests](https://github.com/github/docs/blob/main/tests/README.md) diff --git a/contributing/development.md b/contributing/development.md index 839aeb1508fd..e797aa3ed496 100644 --- a/contributing/development.md +++ b/contributing/development.md @@ -73,8 +73,6 @@ For more info about working with this site, check out these READMEs: - [includes/README.md](../includes/README.md) - [components/README.md](../components/README.md) -- [lib/liquid-tags/README.md](../lib/liquid-tags/README.md) - [middleware/README.md](../middleware/README.md) - [script/README.md](../script/README.md) -- [stylesheets/README.md](../stylesheets/README.md) - [tests/README.md](../tests/README.md) diff --git a/nodemon.json b/nodemon.json index a2b2f74b669e..5844b25b5018 100644 --- a/nodemon.json +++ b/nodemon.json @@ -3,7 +3,6 @@ "ignore": [ "assets", "script", - "stylesheets", "tests", "content", "translations", diff --git a/src/assets/scripts/find-orphaned-assets.js b/src/assets/scripts/find-orphaned-assets.js index 8cc6f5eb6432..37ba7c0b8939 100755 --- a/src/assets/scripts/find-orphaned-assets.js +++ b/src/assets/scripts/find-orphaned-assets.js @@ -95,7 +95,7 @@ async function main(opts) { } } - const roots = ['tests', 'components', 'script', 'stylesheets', 'contributing', 'src', 'assets'] + const roots = ['tests', 'components', 'script', 'contributing', 'src', 'assets'] for (const root of roots) { sourceFiles.push( diff --git a/stylesheets/annotate.scss b/src/content-render/stylesheets/annotate.scss similarity index 97% rename from stylesheets/annotate.scss rename to src/content-render/stylesheets/annotate.scss index 451cb749690e..dffe1cfb9070 100644 --- a/stylesheets/annotate.scss +++ b/src/content-render/stylesheets/annotate.scss @@ -1,4 +1,4 @@ -@import "stylesheets/breakpoint-xxl.scss"; +@import "src/frame/stylesheets/breakpoint-xxl.scss"; /* Code annotations ----------------------------------------------------------------------------*/ diff --git a/stylesheets/heading-links.scss b/src/content-render/stylesheets/heading-links.scss similarity index 100% rename from stylesheets/heading-links.scss rename to src/content-render/stylesheets/heading-links.scss diff --git a/stylesheets/images.scss b/src/content-render/stylesheets/images.scss similarity index 100% rename from stylesheets/images.scss rename to src/content-render/stylesheets/images.scss diff --git a/src/content-render/stylesheets/index.scss b/src/content-render/stylesheets/index.scss new file mode 100644 index 000000000000..9a2f5b29bc5f --- /dev/null +++ b/src/content-render/stylesheets/index.scss @@ -0,0 +1,6 @@ +@import "annotate.scss"; +@import "heading-links.scss"; +@import "images.scss"; +@import "markdown-overrides.scss"; +@import "spotlight.scss"; +@import "syntax-highlighting.scss"; diff --git a/stylesheets/markdown-overrides.scss b/src/content-render/stylesheets/markdown-overrides.scss similarity index 100% rename from stylesheets/markdown-overrides.scss rename to src/content-render/stylesheets/markdown-overrides.scss diff --git a/stylesheets/spotlight.scss b/src/content-render/stylesheets/spotlight.scss similarity index 100% rename from stylesheets/spotlight.scss rename to src/content-render/stylesheets/spotlight.scss diff --git a/stylesheets/syntax-highlighting.scss b/src/content-render/stylesheets/syntax-highlighting.scss similarity index 100% rename from stylesheets/syntax-highlighting.scss rename to src/content-render/stylesheets/syntax-highlighting.scss diff --git a/stylesheets/README.md b/src/frame/stylesheets/README.md similarity index 100% rename from stylesheets/README.md rename to src/frame/stylesheets/README.md diff --git a/stylesheets/breakpoint-xxl.scss b/src/frame/stylesheets/breakpoint-xxl.scss similarity index 100% rename from stylesheets/breakpoint-xxl.scss rename to src/frame/stylesheets/breakpoint-xxl.scss diff --git a/stylesheets/headings.scss b/src/frame/stylesheets/headings.scss similarity index 100% rename from stylesheets/headings.scss rename to src/frame/stylesheets/headings.scss diff --git a/stylesheets/index.scss b/src/frame/stylesheets/index.scss similarity index 66% rename from stylesheets/index.scss rename to src/frame/stylesheets/index.scss index 4b941124d360..9d57a2665a8b 100644 --- a/stylesheets/index.scss +++ b/src/frame/stylesheets/index.scss @@ -10,19 +10,11 @@ @import "@primer/css/alerts/index.scss"; @import "@primer/css/popover/index.scss"; -// Primer and native tag overrides @import "headings.scss"; -@import "markdown-overrides.scss"; -@import "images.scss"; +@import "scroll-button.scss"; @import "scroll-top.scss"; - -// Components -@import "heading-links.scss"; -@import "syntax-highlighting.scss"; -@import "spotlight.scss"; -@import "annotate.scss"; -@import "hover-card.scss"; - -// Utility classes -@import "utilities.scss"; @import "shadows.scss"; +@import "utilities.scss"; + +@import "src/content-render/stylesheets/index.scss"; +@import "src/links/stylesheets/hover-card.scss"; diff --git a/src/frame/stylesheets/scroll-button.scss b/src/frame/stylesheets/scroll-button.scss new file mode 100644 index 000000000000..d2ac8669ded9 --- /dev/null +++ b/src/frame/stylesheets/scroll-button.scss @@ -0,0 +1,11 @@ +.transition-200 { + transition: 200ms; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} diff --git a/stylesheets/scroll-top.scss b/src/frame/stylesheets/scroll-top.scss similarity index 81% rename from stylesheets/scroll-top.scss rename to src/frame/stylesheets/scroll-top.scss index 068a6ca9241e..fa85910e9e78 100644 --- a/stylesheets/scroll-top.scss +++ b/src/frame/stylesheets/scroll-top.scss @@ -1,4 +1,4 @@ -@import "stylesheets/breakpoint-xxl.scss"; +@import "src/frame/stylesheets/breakpoint-xxl.scss"; // https://tetralogical.com/blog/2023/06/08/focus-in-view/ diff --git a/stylesheets/shadows.scss b/src/frame/stylesheets/shadows.scss similarity index 100% rename from stylesheets/shadows.scss rename to src/frame/stylesheets/shadows.scss diff --git a/src/frame/stylesheets/utilities.scss b/src/frame/stylesheets/utilities.scss new file mode 100644 index 000000000000..38d550bc3949 --- /dev/null +++ b/src/frame/stylesheets/utilities.scss @@ -0,0 +1,70 @@ +@import "src/frame/stylesheets/breakpoint-xxl.scss"; // for d-xxl-block and d-xxl-none + +@media print { + .no-print { + display: none; + } +} + +.z-1 { + z-index: 1; +} + +.z-2 { + z-index: 2; +} + +.z-3 { + z-index: 3; +} + +.max-w-xs { + max-width: 20rem; +} + +.min-h-screen { + min-height: 100vh; +} + +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; +} + +// For the screenreader +.skip-button { + width: auto; + height: auto; + clip: auto; + overflow: hidden; + z-index: 101; + padding: 16px; + + &:not(:focus) { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: -1px; + padding: 0px; + } +} + +// used to help prevent overlapping main content and the minitoc sidebar +.d-xxl-block { + @include breakpoint-xxl { + display: block !important; + } +} + +.d-xxl-none { + @include breakpoint-xxl { + display: none !important; + } +} diff --git a/src/landings/components/ProductArticlesList.tsx b/src/landings/components/ProductArticlesList.tsx index 188abe9fb367..594837222b44 100644 --- a/src/landings/components/ProductArticlesList.tsx +++ b/src/landings/components/ProductArticlesList.tsx @@ -27,7 +27,7 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => { return (

- + {treeNode.title}

diff --git a/stylesheets/hover-card.scss b/src/links/stylesheets/hover-card.scss similarity index 100% rename from stylesheets/hover-card.scss rename to src/links/stylesheets/hover-card.scss diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index dfa7a6f79628..b06968126740 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,3 +1,3 @@ -import 'stylesheets/index.scss' +import 'src/frame/stylesheets/index.scss' export { default } from 'src/frame/pages/app' diff --git a/src/release-notes/components/PatchNotes.module.scss b/src/release-notes/components/PatchNotes.module.scss index 47d81ef5376c..753442dfefe0 100644 --- a/src/release-notes/components/PatchNotes.module.scss +++ b/src/release-notes/components/PatchNotes.module.scss @@ -1,6 +1,6 @@ @import "@primer/css/support/variables/layout.scss"; @import "@primer/css/support/mixins/layout.scss"; -@import "stylesheets/breakpoint-xxl.scss"; +@import "src/frame/stylesheets/breakpoint-xxl.scss"; .aside { @include breakpoint(md) { diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss deleted file mode 100644 index d3e6ed356a90..000000000000 --- a/stylesheets/utilities.scss +++ /dev/null @@ -1,141 +0,0 @@ -@import "stylesheets/breakpoint-xxl.scss"; - -.color-unset { - color: unset; -} - -.line-break-anywhere { - line-break: anywhere; -} - -.transition-200 { - transition: 200ms; -} - -.rotate-180 { - transform: rotateX(180deg); -} - -.outline-none { - outline: none; -} - -/* Print utilities -------------------------------------------------------------------------------*/ -@media print { - .no-print { - display: none; - } -} - -/* Opacity utilities -------------------------------------------------------------------------------*/ -.opacity-0 { - opacity: 0; -} -.opacity-60 { - opacity: 0.6; -} -.opacity-70 { - opacity: 0.7; -} -.opacity-100 { - opacity: 1; -} - -/* List utilities -------------------------------------------------------------------------------*/ -.list-style-inside { - list-style: inside; -} - -/* Hover utilities -------------------------------------------------------------------------------*/ -.hover\:color-bg-accent:hover { - background: var(--color-accent-subtle); -} - -/* Z-Index utilities -------------------------------------------------------------------------------*/ -.-z-1 { - z-index: -1; -} -.z-1 { - z-index: 1; -} -.z-2 { - z-index: 2; -} -.z-3 { - z-index: 3; -} - -/* Border colors -------------------------------------------------------------------------------*/ -.color-border-transparent { - border-color: transparent !important; -} - -/* Background colors -------------------------------------------------------------------------------*/ -.background-transparent { - background-color: transparent; -} - -/* Widths / Heights -------------------------------------------------------------------------------*/ -.max-w-xs { - max-width: 20rem; -} - -.min-h-screen { - min-height: 100vh; -} - -.visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px; -} - -/* Screen Reader Only -------------------------------------------------------------------------------*/ -.skip-button { - width: auto; - height: auto; - clip: auto; - overflow: hidden; - z-index: 101; - padding: 16px; - - &:not(:focus) { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - width: 1px; - margin: -1px; - padding: 0px; - } -} - -/* Responsive display utilities -------------------------------------------------------------------------------*/ - -// used to help prevent overlapping main content and the minitoc sidebar - -.d-xxl-block { - @include breakpoint-xxl { - display: block !important; - } -} - -.d-xxl-none { - @include breakpoint-xxl { - display: none !important; - } -}