From 5c96b0d71bb907a46efd0f579b3b9c297f4978ab Mon Sep 17 00:00:00 2001 From: Daniel Rosenwasser Date: Tue, 3 Mar 2026 06:54:45 +0000 Subject: [PATCH 1/2] Add some JSDoc types to get rid of errors. --- .../typescriptlang-org/scripts/cacheBustPlayground.mjs | 4 ++++ .../scripts/downloadPlaygroundAssets.js | 8 ++++++-- .../typescriptlang-org/scripts/downloadSearchAssets.js | 7 ++++++- .../scripts/getTypeScriptNPMVersions.js | 8 +++++++- 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/packages/typescriptlang-org/scripts/cacheBustPlayground.mjs b/packages/typescriptlang-org/scripts/cacheBustPlayground.mjs index 3fe7ab120069..07f0779ac0f9 100644 --- a/packages/typescriptlang-org/scripts/cacheBustPlayground.mjs +++ b/packages/typescriptlang-org/scripts/cacheBustPlayground.mjs @@ -17,6 +17,10 @@ if (!content.includes(gitSha)) throw new Error("Could not run cache busting") fs.writeFileSync(toChange, content) // https://stackoverflow.com/posts/52338335/revisions +/** + * @param {string} from + * @param {string} to + */ function copyFolderSync(from, to) { fs.mkdirSync(to, { recursive: true }) fs.readdirSync(from).forEach(element => { diff --git a/packages/typescriptlang-org/scripts/downloadPlaygroundAssets.js b/packages/typescriptlang-org/scripts/downloadPlaygroundAssets.js index 44aa1ac35558..e9c80e662907 100644 --- a/packages/typescriptlang-org/scripts/downloadPlaygroundAssets.js +++ b/packages/typescriptlang-org/scripts/downloadPlaygroundAssets.js @@ -5,6 +5,10 @@ const { writeFileSync, readFileSync } = require("fs") const { join } = require("path") +/** + * @param {string} url + * @param {string} path + */ const getFileAndStoreLocally = async (url, path) => { const packageJSON = await fetch(url) const contents = await packageJSON.text() @@ -21,7 +25,7 @@ const go = async () => { "//# sourceMappingURL=../../min-maps/vs/loader.js.map", "//# sourceMappingURL=vs.loader.js.map" ) - new writeFileSync("static/js/vs.loader.js", newLoader) + writeFileSync("static/js/vs.loader.js", newLoader) await getFileAndStoreLocally( "https://unpkg.com/monaco-editor@0.19.0/min-maps/vs/loader.js.map", @@ -33,7 +37,7 @@ const go = async () => { "utf8" ).replace('"sources":["vs/vs/loader.js"]', '"sources":["vs.loader.js"]') - new writeFileSync("static/js/vs.loader.js.map", newLoaderMap) + writeFileSync("static/js/vs.loader.js.map", newLoaderMap) } go() diff --git a/packages/typescriptlang-org/scripts/downloadSearchAssets.js b/packages/typescriptlang-org/scripts/downloadSearchAssets.js index 87696e53cee7..da8fce73a4c4 100644 --- a/packages/typescriptlang-org/scripts/downloadSearchAssets.js +++ b/packages/typescriptlang-org/scripts/downloadSearchAssets.js @@ -5,8 +5,13 @@ const { writeFileSync } = require("fs") const { join } = require("path") +/** + * @param {string} url + * @param {string} path + * @param {(text: string) => string} [editFunc] + */ const getFileAndStoreLocally = async (url, path, editFunc) => { - const editingFunc = editFunc ? editFunc : text => text + const editingFunc = editFunc ?? (text => text) const packageJSON = await fetch(url) const contents = await packageJSON.text() writeFileSync(join(__dirname, "..", path), editingFunc(contents), "utf8") diff --git a/packages/typescriptlang-org/scripts/getTypeScriptNPMVersions.js b/packages/typescriptlang-org/scripts/getTypeScriptNPMVersions.js index 03537e5093ef..4e2d739687b9 100644 --- a/packages/typescriptlang-org/scripts/getTypeScriptNPMVersions.js +++ b/packages/typescriptlang-org/scripts/getTypeScriptNPMVersions.js @@ -16,6 +16,8 @@ const get = async url => { /** * Queries the VS marketplace for typescript extensions, returns * only official extensions + * + * @param {string} latest */ const getLatestVSExtensions = async latest => { const headers = { @@ -56,7 +58,11 @@ const getLatestVSExtensions = async latest => { return officialExtensions } -/** Gets VS Marketplace info for a particular semver */ +/** + * Gets VS Marketplace info for a particular semver + * + * @param {string} semver + */ const getVSInfo = async semver => { // console.log( // `Grabbing the VS TypeScript extension for ${semver} from the marketplace` From 78792d98b834222b5f206578c851000305f47a54 Mon Sep 17 00:00:00 2001 From: Daniel Rosenwasser Date: Tue, 3 Mar 2026 07:03:15 +0000 Subject: [PATCH 2/2] Migrate away from `@import` in scss files. --- .../src/components/ShowExamples.scss | 12 ++-- .../src/components/layout/Sidebar.scss | 16 +++--- .../src/components/layout/SiteFooter.scss | 22 ++++---- .../src/components/layout/TopNav.scss | 24 ++++---- .../src/components/layout/main.scss | 40 ++++++------- .../typescriptlang-org/src/pages/dev/dev.scss | 12 ++-- .../src/templates/documentation.scss | 12 ++-- .../src/templates/glossary.scss | 2 +- .../src/templates/markdown-twoslash.scss | 2 +- .../src/templates/markdown.scss | 10 ++-- .../src/templates/pages/css/cheatsheets.scss | 6 +- .../src/templates/pages/css/community.scss | 8 ++- .../templates/pages/css/documentation.scss | 8 +-- .../src/templates/pages/css/grid.scss | 4 +- .../src/templates/pages/css/index.scss | 56 +++++++++---------- .../src/templates/pages/css/tools.scss | 4 +- .../src/templates/play.scss | 36 ++++++------ .../src/templates/tsconfig.scss | 20 +++---- 18 files changed, 148 insertions(+), 146 deletions(-) diff --git a/packages/typescriptlang-org/src/components/ShowExamples.scss b/packages/typescriptlang-org/src/components/ShowExamples.scss index 5127a2485e88..b34b2db182c9 100644 --- a/packages/typescriptlang-org/src/components/ShowExamples.scss +++ b/packages/typescriptlang-org/src/components/ShowExamples.scss @@ -1,4 +1,4 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; // This is the visual aspect of the popover ( the white bit ) // the non-visible layout is above in #playground-samples-popover @@ -31,7 +31,7 @@ } button.section-name.selected { - border-bottom: $ts-main-blue-color 2px solid; + border-bottom: globals.$ts-main-blue-color 2px solid; } // The titles of the sections @@ -62,7 +62,7 @@ >p>a { display: inline-block; - color: $ts-main-blue-color; + color: globals.$ts-main-blue-color; padding: 0; } @@ -101,7 +101,7 @@ } &.highlight { - border-left: $ts-main-blue-darker-color 2px solid; + border-left: globals.$ts-main-blue-darker-color 2px solid; padding-left: 8px; } } @@ -116,11 +116,11 @@ margin-top: 0.3rem; &.done { - background-color: $ts-main-blue-darker-color; + background-color: globals.$ts-main-blue-darker-color; } &.changed { - border: $ts-main-blue-darker-color 1px solid; + border: globals.$ts-main-blue-darker-color 1px solid; } } } diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.scss b/packages/typescriptlang-org/src/components/layout/Sidebar.scss index 0f1eaa478be9..18a2b90e6a0a 100644 --- a/packages/typescriptlang-org/src/components/layout/Sidebar.scss +++ b/packages/typescriptlang-org/src/components/layout/Sidebar.scss @@ -1,4 +1,4 @@ -@import "../../style/globals.scss"; +@use "../../style/globals.scss"; #small-device-button-sidebar { display: none; @@ -72,7 +72,7 @@ nav#sidebar { background-color: var(--sidebar-list-active-background-color); svg path { - stroke: $ts-main-blue-color; + stroke: globals.$ts-main-blue-color; } } @@ -143,8 +143,8 @@ nav#sidebar { } &.highlight a { - color: $ts-sidebar-link; - border-left: 2px solid $ts-main-blue-color; + color: globals.$ts-sidebar-link; + border-left: 2px solid globals.$ts-main-blue-color; margin-left: 0.5rem; margin-right: -0.5rem; font-weight: 500; @@ -154,7 +154,7 @@ nav#sidebar { // Only set max-height and overflow rules for direct ul children to prevent scrolling in subnav uls & > ul { - @media (min-width: $screen-sm) { + @media (min-width: globals.$screen-sm) { max-height: calc(100vh - 10px); overflow-y: auto; overflow-x: hidden; @@ -162,7 +162,7 @@ nav#sidebar { } } -@media (max-width: $screen-sm) { +@media (max-width: globals.$screen-sm) { // This is a button which will scroll off and on with the nav button#small-device-button-sidebar { display: flex; @@ -186,7 +186,7 @@ nav#sidebar { background-color: #c4c4c4; border-radius: 6px; - z-index: $z-index-for-handbook-nav-button; + z-index: globals.$z-index-for-handbook-nav-button; // Reset the button -webkit-appearance: none; @@ -206,7 +206,7 @@ nav#sidebar { -webkit-overflow-scrolling: touch; - z-index: $z-index-for-handbook-nav; + z-index: globals.$z-index-for-handbook-nav; margin-left: -800px; width: 90%; diff --git a/packages/typescriptlang-org/src/components/layout/SiteFooter.scss b/packages/typescriptlang-org/src/components/layout/SiteFooter.scss index 480eef819e35..c5604043a2da 100644 --- a/packages/typescriptlang-org/src/components/layout/SiteFooter.scss +++ b/packages/typescriptlang-org/src/components/layout/SiteFooter.scss @@ -1,12 +1,12 @@ -@import "../../style/globals.scss"; +@use "../../style/globals.scss"; #site-footer { - background-color: $ts-main-blue-color; + background-color: globals.$ts-main-blue-color; color: white; padding-top: 1rem; padding-bottom: 3rem; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { padding-bottom: 9rem; } @@ -57,7 +57,7 @@ } } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { li { margin-left: 10px; @@ -80,7 +80,7 @@ display: flex; flex-direction: row; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column; margin-bottom: 1rem; @@ -109,7 +109,7 @@ margin-right: 1rem; select { - background-color: $ts-main-blue-darkest-color; + background-color: globals.$ts-main-blue-darkest-color; color: white; } } @@ -120,7 +120,7 @@ padding-top: 2rem; display: flex; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column-reverse; article#logos { @@ -135,7 +135,7 @@ flex-wrap: wrap; >li { - @media (min-width: $screen-sm) { + @media (min-width: globals.$screen-sm) { width: 50%; } @@ -185,7 +185,7 @@ } } -@media (max-width: $screen-sm) { +@media (max-width: globals.$screen-sm) { // This was sneakily making site wider than // the viewport because it uses opacity which affects layout @@ -278,12 +278,12 @@ width: 320px; } - border-bottom: 1px solid $ts-main-blue-darker-color; + border-bottom: 1px solid globals.$ts-main-blue-darker-color; border-radius: 0; } a { - color: $ts-main-blue-color; + color: globals.$ts-main-blue-color; text-decoration: none; } } \ No newline at end of file diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.scss b/packages/typescriptlang-org/src/components/layout/TopNav.scss index 8122362b483b..3da7b020f757 100644 --- a/packages/typescriptlang-org/src/components/layout/TopNav.scss +++ b/packages/typescriptlang-org/src/components/layout/TopNav.scss @@ -1,4 +1,4 @@ -@import "../../style/globals.scss"; +@use "../../style/globals.scss"; #site-wrapper { display: flex; @@ -6,7 +6,7 @@ } #top-menu { - background-color: $ts-main-blue-color; + background-color: globals.$ts-main-blue-color; user-select: none; clear: both; @@ -93,7 +93,7 @@ #beta-notification-menu, .gatsby-noscript { - background-color: $ts-muted-red; + background-color: globals.$ts-muted-red; text-align: center; color: white; padding: 0.4rem 0; @@ -108,7 +108,7 @@ form.search { height: 3rem; - background-color: $ts-main-blue-darker-color; + background-color: globals.$ts-main-blue-darker-color; border-radius: 3px 0px 0px 3px; padding-left: 1rem; @@ -127,7 +127,7 @@ form.search { } &:focus-within { - background-color: $ts-main-blue-lighter-color; + background-color: globals.$ts-main-blue-lighter-color; @media screen and (-ms-high-contrast: black-on-white) { border: 2px solid white; } @@ -140,10 +140,10 @@ form.search { width: 150px; &:focus-within { - background-color: $ts-main-blue-lighter-color; + background-color: globals.$ts-main-blue-lighter-color; } -webkit-appearance: none; - background-color: $ts-main-blue-darker-color; + background-color: globals.$ts-main-blue-darker-color; border-color: #152740; border-radius: 0; @@ -190,7 +190,7 @@ form.search { button { flex: 1; flex-grow: 1; - background-color: $ts-main-blue-darker-color; + background-color: globals.$ts-main-blue-darker-color; color: white; border: none; border-radius: 0; @@ -230,7 +230,7 @@ form.search { display: none; } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { .show-only-small { display: block !important; } @@ -245,7 +245,7 @@ form.search { } } - @media (min-width: 767px) and (max-width: $screen-md) { + @media (min-width: 767px) and (max-width: globals.$screen-md) { .show-only-medium { display: inline !important; } @@ -255,7 +255,7 @@ form.search { } } - @media (min-width: $screen-md) { + @media (min-width: globals.$screen-md) { .show-only-large { display: inline-block !important; } @@ -396,7 +396,7 @@ form.search { overflow: auto; position: absolute; width: 100%; - background-color: $ts-light-bg-sandy-color; + background-color: globals.$ts-light-bg-sandy-color; color: black; text-align: center; padding: 20px; diff --git a/packages/typescriptlang-org/src/components/layout/main.scss b/packages/typescriptlang-org/src/components/layout/main.scss index 94849528c886..7dd9daefb978 100644 --- a/packages/typescriptlang-org/src/components/layout/main.scss +++ b/packages/typescriptlang-org/src/components/layout/main.scss @@ -1,30 +1,30 @@ -@import "../../style/globals.scss"; -@import "./fonts.scss"; +@use "../../style/globals.scss"; +@use "fonts.scss"; .dark-theme { - --background-color: #{$ts-dark-bg-color}; + --background-color: #{globals.$ts-dark-bg-color}; --text-color: #fff; --border-color: #444; --background-minor-highlight-color: #343434; --inline-code-background-color: rgb(58, 58, 92, 0.7); - --link-color: #{$ts-main-blue-lightest-color}; + --link-color: #{globals.$ts-main-blue-lightest-color}; --pure-background: black; - --raised-background-color: #{$ts-dark-bg-for-foreground-color}; + --raised-background-color: #{globals.$ts-dark-bg-for-foreground-color}; --alt-text-color: #fff; --raised-box-shadow: 0 1.6px 3.6px 0 rgba(255, 255, 255, 0.132), 0 0.3px 0.9px 0 rgba(255, 255, 255, 0.108); - --sidebar-background-color: #{$ts-dark-bg-secondary}; - --sidebar-list-active-background-color: #{$ts-dark-barely-blue-highlight}; + --sidebar-background-color: #{globals.$ts-dark-bg-secondary}; + --sidebar-list-active-background-color: #{globals.$ts-dark-barely-blue-highlight}; --sidebar-list-background-color: rgb(53, 52, 52); --sidebar-link-border-color: #fff; --sidebar-item-border-color: #3e3e3e; - --sidebar-active-button-background-color: #{$ts-bg-selection-grey}; - --playground-divider: #{$ts-light-bg-grey-highlight-color}; - --playground-dropdown-bg: #{$ts-dark-bg-for-foreground-color}; + --sidebar-active-button-background-color: #{globals.$ts-bg-selection-grey}; + --playground-divider: #{globals.$ts-light-bg-grey-highlight-color}; + --playground-dropdown-bg: #{globals.$ts-dark-bg-for-foreground-color}; --playground-dropdown-shadow: 0 6px 12px rgba(148, 148, 148, 0.175); --playground-dropdown-border: black; - --playground-toolbar-hover-bg: #{$ts-dark-bg-color}; - --playground-dragbar-bg: #{$ts-dark-barely-blue-highlight}; + --playground-toolbar-hover-bg: #{globals.$ts-dark-bg-color}; + --playground-dragbar-bg: #{globals.$ts-dark-barely-blue-highlight}; --playground-dragbar-border: white; --playground-pre-color: white; --table-border-color: #545454; @@ -42,28 +42,28 @@ html, html.light-theme { // light theme - --background-color: #{$ts-light-bg-sandy-color}; + --background-color: #{globals.$ts-light-bg-sandy-color}; --pure-background: white; --text-color: #333; --border-color: #eee; --background-minor-highlight-color: #fcfcfc; --inline-code-background-color: rgb(241, 241, 254); - --link-color: #{$ts-main-blue-darker-color}; + --link-color: #{globals.$ts-main-blue-darker-color}; --raised-background-color: #fff; --alt-text-color: #000; --raised-box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); - --sidebar-background-color: #{$ts-light-bg-grey}; - --sidebar-list-active-background-color: #{$ts-barely-blue-highlight}; + --sidebar-background-color: #{globals.$ts-light-bg-grey}; + --sidebar-list-active-background-color: #{globals.$ts-barely-blue-highlight}; --sidebar-list-background-color: #e4e4e4; --sidebar-link-border-color: #000; --sidebar-item-border-color: #dfdfdf; --sidebar-active-button-background-color: #dfdfdf; - --playground-divider: #{$ts-bg-selection-grey}; + --playground-divider: #{globals.$ts-bg-selection-grey}; --playground-dropdown-bg: white; --playground-dropdown-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - --playground-dropdown-border: #{$ts-light-bg-grey-highlight-color}; - --playground-toolbar-hover-bg: #{$ts-light-bg-grey-highlight-color}; + --playground-dropdown-border: #{globals.$ts-light-bg-grey-highlight-color}; + --playground-toolbar-hover-bg: #{globals.$ts-light-bg-grey-highlight-color}; --playground-dragbar-bg: white; --playground-dragbar-border: #c4c4c4; --playground-pre-color: black; @@ -173,7 +173,7 @@ html.font-open-dyslexic { p > code, li > code { background-color: var(--inline-code-background-color); - font-family: $font-code; + font-family: globals.$font-code; font-size: 0.9rem; padding: 2px 4px; } diff --git a/packages/typescriptlang-org/src/pages/dev/dev.scss b/packages/typescriptlang-org/src/pages/dev/dev.scss index d9111e25c4b7..0403f4d68f84 100644 --- a/packages/typescriptlang-org/src/pages/dev/dev.scss +++ b/packages/typescriptlang-org/src/pages/dev/dev.scss @@ -1,4 +1,4 @@ -@import "../../style/globals.scss"; +@use "../../style/globals.scss"; #dev { .navbar-sub .active { @@ -7,7 +7,7 @@ .content { display: flex; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column; } } @@ -28,7 +28,7 @@ flex-direction: row; width: 100%; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column; } @@ -40,7 +40,7 @@ .split-fivehundred { width: calc(100% - 500px); - @media (max-width: $screen-md) { + @media (max-width: globals.$screen-md) { width: 100%; } } @@ -48,7 +48,7 @@ width: 500px; margin-left: 20px; - @media (max-width: $screen-md) { + @media (max-width: globals.$screen-md) { width: 100%; margin-left: 0px; padding-left: 20px; @@ -76,7 +76,7 @@ div.button { display: inline-block; padding: 8px 12px; - background-color: $ts-light-bg-sandy-color; + background-color: globals.$ts-light-bg-sandy-color; margin: 10px; text-decoration: none; color: black; diff --git a/packages/typescriptlang-org/src/templates/documentation.scss b/packages/typescriptlang-org/src/templates/documentation.scss index f7e32428d820..1594732e165a 100644 --- a/packages/typescriptlang-org/src/templates/documentation.scss +++ b/packages/typescriptlang-org/src/templates/documentation.scss @@ -1,4 +1,4 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; #beta { background: repeating-linear-gradient(45deg, @@ -25,7 +25,7 @@ max-width: 1200px; min-width: 0; - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { padding: 0; } @@ -36,7 +36,7 @@ font-weight: 400; letter-spacing: 0rem; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { margin-left: 1rem; margin-right: 1rem; font-size: 2.5rem; @@ -49,7 +49,7 @@ width: 100%; aside.handbook-toc { - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { padding: 0 0.5rem; box-sizing: border-box; } @@ -294,7 +294,7 @@ margin-top: -110px; } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { margin: 0 0 0 0; padding: 1rem; flex-direction: column; @@ -424,7 +424,7 @@ } .small-columns { - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { flex-direction: column !important; } } diff --git a/packages/typescriptlang-org/src/templates/glossary.scss b/packages/typescriptlang-org/src/templates/glossary.scss index 5f5b41c8ecf7..2d8a185b63c3 100644 --- a/packages/typescriptlang-org/src/templates/glossary.scss +++ b/packages/typescriptlang-org/src/templates/glossary.scss @@ -1,4 +1,4 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; #glossary { ul.filterable-quicklinks { diff --git a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss index ded15593547c..54d9c8ffa9b7 100644 --- a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss +++ b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss @@ -1,4 +1,4 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; /* Start of Shiki Twoslash CSS: Code blocks structurally look like: diff --git a/packages/typescriptlang-org/src/templates/markdown.scss b/packages/typescriptlang-org/src/templates/markdown.scss index d9bed16ca84e..187aa69eb2a4 100644 --- a/packages/typescriptlang-org/src/templates/markdown.scss +++ b/packages/typescriptlang-org/src/templates/markdown.scss @@ -1,5 +1,5 @@ -@import "../style/globals.scss"; -@import "./markdown-twoslash.scss"; +@use "../style/globals.scss"; +@use "markdown-twoslash.scss"; .markdown { scroll-behavior: smooth; @@ -127,18 +127,18 @@ } .blue-tick { - color: $ts-main-blue-color; + color: globals.$ts-main-blue-color; font-weight: bold; font-size: 1.2rem; } .black-tick { - color: $ts-muted-green; + color: globals.$ts-muted-green; font-size: 1.2rem; } .red-cross { - color: $ts-muted-red; + color: globals.$ts-muted-red; font-size: 1.2rem; } } diff --git a/packages/typescriptlang-org/src/templates/pages/css/cheatsheets.scss b/packages/typescriptlang-org/src/templates/pages/css/cheatsheets.scss index bb705a83c868..8467238e75cb 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/cheatsheets.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/cheatsheets.scss @@ -1,4 +1,4 @@ -@import "../../../style/globals.scss"; +@use "../../../style/globals.scss"; .cheatsheets { .row { @@ -33,7 +33,7 @@ img { margin: -2px; z-index: 100; - border-color: $ts-main-blue-color; + border-color: globals.$ts-main-blue-color; box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.25); } .description { @@ -82,7 +82,7 @@ color: black; } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { // The single column needs this to make all of the pages fold under each other .cs-2 { margin-top: -40px; diff --git a/packages/typescriptlang-org/src/templates/pages/css/community.scss b/packages/typescriptlang-org/src/templates/pages/css/community.scss index 3692a97edde2..e2fd6f0b18e4 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/community.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/community.scss @@ -1,4 +1,6 @@ -@import "./grid.scss"; +@use "sass:color"; +@use "grid.scss"; +@use "../../../style/globals"; .community { padding: 0; @@ -28,7 +30,7 @@ flex-wrap: wrap; .callout { - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { width: 90%; } margin-top: 20px; @@ -102,7 +104,7 @@ &.bug { background-image: url("../../../assets/community/connect-github-icon.png"); - background-color: lighten(black, 30%); + background-color: color.adjust(black, $lightness: 30%); } } } diff --git a/packages/typescriptlang-org/src/templates/pages/css/documentation.scss b/packages/typescriptlang-org/src/templates/pages/css/documentation.scss index 4e8f3d765e63..dc33672774c0 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/documentation.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/documentation.scss @@ -1,4 +1,4 @@ -@import "../../../style/globals.scss"; +@use "../../../style/globals.scss"; .flow-links { display: flex; @@ -26,11 +26,11 @@ border: 1px black solid; &:hover { - background-color: $ts-light-bg-grey; + background-color: globals.$ts-light-bg-grey; } &:active { - background-color: $ts-light-bg-grey-highlight-color; + background-color: globals.$ts-light-bg-grey-highlight-color; margin-bottom: 19px; } } @@ -133,7 +133,7 @@ } } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column; margin: 0; } diff --git a/packages/typescriptlang-org/src/templates/pages/css/grid.scss b/packages/typescriptlang-org/src/templates/pages/css/grid.scss index c2ff1cfaccce..17a53f468917 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/grid.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/grid.scss @@ -1,4 +1,4 @@ -@import "../../../style/globals.scss"; +@use "../../../style/globals.scss"; .row, .split-row { @@ -37,7 +37,7 @@ } } -@media (max-width: $screen-sm) { +@media (max-width: globals.$screen-sm) { // from left to right -> top to down .container > .row { flex-direction: column; diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss index 929591f5e180..395eb7d803c6 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/index.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss @@ -1,11 +1,11 @@ -@import "../../../style/globals.scss"; -@import "./grid.scss"; +@use "../../../style/globals.scss"; +@use "grid.scss"; -$headline-background-bg: $ts-main-blue-color; +$headline-background-bg: globals.$ts-main-blue-color; $headline-foreground-bg: white; .version-bar { - background-color: $ts-dark-bg-color; + background-color: globals.$ts-dark-bg-color; text-align: center; color: white; padding: 0.7rem 2rem; @@ -14,7 +14,7 @@ $headline-foreground-bg: white; p { margin: 0; a { - color: $ts-main-blue-lightest-color; + color: globals.$ts-main-blue-lightest-color; } } } @@ -69,7 +69,7 @@ $headline-foreground-bg: white; } } -@media (max-width: $screen-sm) { +@media (max-width: globals.$screen-sm) { main #index-2 { h2 { font-size: 1.8rem; @@ -168,7 +168,7 @@ $headline-foreground-bg: white; } } -@media (max-width: $screen-md) { +@media (max-width: globals.$screen-md) { .tag-container { .twoslash-annotation.left { position: static; @@ -190,7 +190,7 @@ $headline-foreground-bg: white; display: none; } -@media (max-width: $screen-xs) { +@media (max-width: globals.$screen-xs) { .show-only-small { display: block !important; } @@ -242,17 +242,17 @@ $headline-foreground-bg: white; } .darkblue { - background-color: $ts-main-blue-darkest-color; + background-color: globals.$ts-main-blue-darkest-color; color: white; } .blue { - background-color: $ts-main-blue-color; + background-color: globals.$ts-main-blue-color; color: white; } .purple { - background-color: $ts-muted-purple; + background-color: globals.$ts-muted-purple; color: white; } @@ -275,7 +275,7 @@ $headline-foreground-bg: white; } .light-grey { - background-color: $ts-light-bg-sandy-color; + background-color: globals.$ts-light-bg-sandy-color; color: black; } @@ -406,7 +406,7 @@ $headline-foreground-bg: white; left: 0; height: 20px; width: 22px; - background-color: $ts-muted-red; + background-color: globals.$ts-muted-red; } .underline-error { @@ -418,7 +418,7 @@ $headline-foreground-bg: white; .error-message { color: #444d80; font-size: 0.8rem; - font-family: $font-code; + font-family: globals.$font-code; } .error-behind { @@ -435,7 +435,7 @@ $headline-foreground-bg: white; background-color: white; color: grey; - font-family: $font-code; + font-family: globals.$font-code; font-size: 0.8rem; margin: 0; padding: 0; @@ -492,7 +492,7 @@ $headline-foreground-bg: white; .text { border-top: 1px solid #7fa2c9; - font-family: $font-code; + font-family: globals.$font-code; font-size: 0.8rem; line-height: 0.95rem; height: 260px; @@ -573,7 +573,7 @@ $headline-foreground-bg: white; // One of these has to be set &.short { - background: $ts-main-blue-color; + background: globals.$ts-main-blue-color; background-position-y: bottom -180px; height: 260px; outline: 1px solid white; @@ -612,14 +612,14 @@ $headline-foreground-bg: white; &:focus-visible, &:hover { - outline-color: $ts-main-blue-color; + outline-color: globals.$ts-main-blue-color; outline-width: 2px; - color: $ts-main-blue-color; + color: globals.$ts-main-blue-color; box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.25); margin-bottom: 0px; svg path { - stroke: $ts-main-blue-color; + stroke: globals.$ts-main-blue-color; } } &:active { @@ -792,13 +792,13 @@ $headline-foreground-bg: white; .beta { width: 28%; .bar { - background-color: $ts-main-blue-color; + background-color: globals.$ts-main-blue-color; } } .rc { width: 17%; .bar { - background-color: $ts-main-blue-darker-color; + background-color: globals.$ts-main-blue-darker-color; } } @@ -853,11 +853,11 @@ $headline-foreground-bg: white; } .copy { - background: $ts-light-bg-sandy-color; + background: globals.$ts-light-bg-sandy-color; background: linear-gradient( 90deg, - $ts-light-bg-sandy-color 48%, - $ts-light-bg-sandy-color-20 100% + globals.$ts-light-bg-sandy-color 48%, + globals.$ts-light-bg-sandy-color-20 100% ); p { font-size: 1rem; @@ -1048,7 +1048,7 @@ $headline-foreground-bg: white; text-align: center; padding: 5px 8px; border-radius: 2px; - font-family: $font-code; + font-family: globals.$font-code; font-size: 14px; white-space: pre-wrap; border-radius: 2px; @@ -1159,7 +1159,7 @@ $headline-foreground-bg: white; width: 20%; left: 0; height: 13px; - background-color: $ts-main-blue-color; + background-color: globals.$ts-main-blue-color; } &.yellow-lot-blue:after { @@ -1219,7 +1219,7 @@ $headline-foreground-bg: white; .dt-background { font-size: 1.2rem; - font-family: $font-code; + font-family: globals.$font-code; opacity: 0.2; position: absolute; top: 20px; diff --git a/packages/typescriptlang-org/src/templates/pages/css/tools.scss b/packages/typescriptlang-org/src/templates/pages/css/tools.scss index 92aae155b119..9597164782c6 100644 --- a/packages/typescriptlang-org/src/templates/pages/css/tools.scss +++ b/packages/typescriptlang-org/src/templates/pages/css/tools.scss @@ -1,4 +1,4 @@ -@import "../../../style/globals.scss"; +@use "../../../style/globals.scss"; .cropper { overflow: hidden; @@ -37,7 +37,7 @@ margin-left: 1rem; } -@media (max-width: $screen-sm) { +@media (max-width: globals.$screen-sm) { .navbar-sub.dev-tools { height: auto; diff --git a/packages/typescriptlang-org/src/templates/play.scss b/packages/typescriptlang-org/src/templates/play.scss index 4e0d1a51956b..9bf2bffa793f 100644 --- a/packages/typescriptlang-org/src/templates/play.scss +++ b/packages/typescriptlang-org/src/templates/play.scss @@ -1,4 +1,4 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; // The subnav beginning with "Playground" .navbar-sub { @@ -100,12 +100,12 @@ margin-left: 0; &.beta { - color: $ts-main-blue-color; - border-bottom: 1px solid $ts-light-bg-grey-highlight-color; + color: globals.$ts-main-blue-color; + border-bottom: 1px solid globals.$ts-light-bg-grey-highlight-color; } &.nightly { - border-top: 1px solid $ts-light-bg-grey-highlight-color; + border-top: 1px solid globals.$ts-light-bg-grey-highlight-color; } } @@ -192,7 +192,7 @@ } >span { - font-family: $font-code; + font-family: globals.$font-code; margin-left: 4px; } } @@ -206,7 +206,7 @@ label { margin-right: 0.5rem; width: 33%; - font-family: $font-code; + font-family: globals.$font-code; select { margin-left: 1rem; @@ -608,7 +608,7 @@ main #editor-toolbar { z-index: 1; background-color: var(--playground-dropdown-bg); - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-basis: 300px; width: 300px; max-width: 300px; @@ -634,7 +634,7 @@ main #editor-toolbar { #restart-required { text-align: center; - border: 1px solid $ts-main-blue-color; + border: 1px solid globals.$ts-main-blue-color; padding: 5px 10px; position: absolute; right: 0; @@ -651,7 +651,7 @@ main #editor-toolbar { padding: 0 10px; code { - font-family: $font-code; + font-family: globals.$font-code; font-size: 14px; line-height: 19px; } @@ -663,7 +663,7 @@ main #editor-toolbar { align-items: center; justify-content: center; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { justify-content: flex-start; } @@ -691,7 +691,7 @@ main #editor-toolbar { position: absolute; top: -8px; right: -10px; - background-color: $ts-muted-red; + background-color: globals.$ts-muted-red; color: white; padding: 0 4px; height: 20px; @@ -742,7 +742,7 @@ main #editor-toolbar { #log-container { overflow: auto; - font-family: $font-code; + font-family: globals.$font-code; line-height: 1.5rem; white-space: pre-wrap; height: 95%; @@ -784,7 +784,7 @@ main #editor-toolbar { } div.ast { - font-family: $font-code; + font-family: globals.$font-code; font-size: 0.8rem; line-height: 0.3rem; @@ -893,7 +893,7 @@ main #editor-toolbar { } ul.compiler-diagnostics { - font-family: $font-code; + font-family: globals.$font-code; margin: 0; padding: 0; @@ -977,7 +977,7 @@ input[type="url"] { } input.good { - border-color: $ts-muted-green; + border-color: globals.$ts-muted-green; } #playground-container .playground-plugins { @@ -1084,7 +1084,7 @@ input.good { flex-direction: column; textarea { - font-family: $font-code; + font-family: globals.$font-code; padding: 8px; } @@ -1101,7 +1101,7 @@ input.good { .window-title { text-align: center; - background-color: $ts-light-bg-grey; + background-color: globals.$ts-light-bg-grey; font-size: 32px; &.warning { @@ -1138,7 +1138,7 @@ input.good { width: 16px; height: 16px; border-radius: 50%; - background: $ts-main-blue-color; + background: globals.$ts-main-blue-color; animation: lds-grid 1.2s linear infinite; &:nth-child(1) { diff --git a/packages/typescriptlang-org/src/templates/tsconfig.scss b/packages/typescriptlang-org/src/templates/tsconfig.scss index 229fd10d9cfe..9e1b8318b4f8 100644 --- a/packages/typescriptlang-org/src/templates/tsconfig.scss +++ b/packages/typescriptlang-org/src/templates/tsconfig.scss @@ -1,10 +1,10 @@ -@import "../style/globals.scss"; +@use "../style/globals.scss"; .tsconfig { margin-bottom: 6rem; // Drastically reduce the padding and margins to make it fit phones &.raised { - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { margin: 0; padding: 2rem; @@ -64,7 +64,7 @@ display: flex; align-items: flex-start; - @media (max-width: $screen-md) { + @media (max-width: globals.$screen-md) { flex-direction: column; } h5 { @@ -120,7 +120,7 @@ margin: 0 8px 8px 0; /* Some gutter */ width: 30%; - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { width: 46%; h5 { overflow-x: hidden; @@ -139,7 +139,7 @@ padding: 0; } li { - font-family: $font-code; + font-family: globals.$font-code; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -164,7 +164,7 @@ margin: 0; } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { position: static; ul { flex-wrap: wrap; @@ -186,7 +186,7 @@ text-decoration: none; &.current { - border-bottom: 1px solid $ts-main-blue-color; + border-bottom: 1px solid globals.$ts-main-blue-color; } } @@ -219,7 +219,7 @@ overflow-x: hidden; offset-anchor: -30px; - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { display: block; overflow-y: hidden; } @@ -245,7 +245,7 @@ padding-right: 20px; word-wrap: break-word; - @media (max-width: $screen-xs) { + @media (max-width: globals.$screen-xs) { border-right: none; padding-right: 0; } @@ -286,7 +286,7 @@ } } - @media (max-width: $screen-sm) { + @media (max-width: globals.$screen-sm) { flex-direction: column; .markdown {