From ba7285685418dfa5f573b2503f3d52274da17945 Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 3 Dec 2024 11:43:33 +0100 Subject: [PATCH 1/3] refactor: Run sass-migrator --- static/sass/_pattern_blog-card.scss | 4 +++- static/sass/_pattern_lists.scss | 4 +++- static/sass/_pattern_navigation-dropdown.scss | 4 +++- static/sass/_settings_colors.scss | 6 ++++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/static/sass/_pattern_blog-card.scss b/static/sass/_pattern_blog-card.scss index 504451a5581..ff5ebc02997 100644 --- a/static/sass/_pattern_blog-card.scss +++ b/static/sass/_pattern_blog-card.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + @mixin blog-p-card { .blog-p-card__category { background: url("#{$assets-path}ed42aefa-icon-resource-hub-icon-document.png") @@ -110,7 +112,7 @@ @extend .p-card; background-color: $color-light; - box-shadow: 0 1px 2px 0 transparentize($color-dark, 0.8); + box-shadow: 0 1px 2px 0 color.adjust($color-dark, $alpha: -0.8); padding: 0; > .blog-p-card__header { diff --git a/static/sass/_pattern_lists.scss b/static/sass/_pattern_lists.scss index 91f36c65d58..f0d2cbc69b9 100644 --- a/static/sass/_pattern_lists.scss +++ b/static/sass/_pattern_lists.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + @mixin ubuntu-p-lists { @include ubuntu-p-inline-list-icons; @include ubuntu-p-is-trisected; @@ -256,7 +258,7 @@ padding-bottom: 0.25rem; &::after { - background-color: transparentize($color-mid-light, 0.5); + background-color: color.adjust($color-mid-light, $alpha: -0.5); } } } diff --git a/static/sass/_pattern_navigation-dropdown.scss b/static/sass/_pattern_navigation-dropdown.scss index 72c18e5c8cc..f79e9c4d40b 100644 --- a/static/sass/_pattern_navigation-dropdown.scss +++ b/static/sass/_pattern_navigation-dropdown.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + @mixin ubuntu-p-navigation-dropdown { $dropdown-border: 1px solid $colors--dark-theme--border-low-contrast; @@ -39,7 +41,7 @@ @include vf-animation(all, brisk, out); background-color: #262626; - box-shadow: 0 1px 32px 1px transparentize($color-dark, 0.8); + box-shadow: 0 1px 32px 1px color.adjust($color-dark, $alpha: -0.8); flex-direction: column; height: auto; max-height: calc(100vh - 3rem); diff --git a/static/sass/_settings_colors.scss b/static/sass/_settings_colors.scss index 798dbb2a5dd..8c4e759e196 100644 --- a/static/sass/_settings_colors.scss +++ b/static/sass/_settings_colors.scss @@ -1,4 +1,6 @@ +@use "sass:color"; + $color-brand: #e95420; $color-accent-background: #2c001e; -$color-brand-light: lighten($color-brand, 10%); -$color-brand-dark: darken($color-brand, 10%); +$color-brand-light: color.adjust($color-brand, $lightness: 10%, $space: hsl); +$color-brand-dark: color.adjust($color-brand, $lightness: -10%, $space: hsl); From 58c8fa09bf65a9b2c96a56ea3a1a727633eec0ec Mon Sep 17 00:00:00 2001 From: Pete Date: Tue, 3 Dec 2024 12:04:36 +0100 Subject: [PATCH 2/3] feat: Add '--quiet-deps' tags to build --- package.json | 4 ++-- static/sass/_pattern_modals.scss | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cf146041956..dab8f1aeca0 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "build-global-nav": "cp node_modules/@canonical/global-nav/dist/global-nav.js static/js/dist/", "build-latest-news": "cp node_modules/@canonical/latest-news/dist/latest-news.js static/js/dist", "build-intl-tel-input-utils": "cp node_modules/intl-tel-input/build/js/utils.js static/js/dist", - "build-css": "sass static/sass:static/css --load-path=node_modules --style=compressed && postcss --use autoprefixer --replace 'static/css/**/*.css' --no-map", + "build-css": "sass static/sass:static/css --load-path=node_modules --style=compressed --quiet-deps && postcss --use autoprefixer --replace 'static/css/**/*.css' --no-map", "build-js": "node build.js && yarn run build-global-nav && yarn run build-cookie-policy && yarn run build-latest-news && yarn run build-intl-tel-input-utils && yarn run build-flickity", "build": "yarn run build-css && yarn run build-js && yarn build-global-nav", "watch": "concurrently --kill-others --raw 'yarn run watch-css' 'yarn run watch-js'", @@ -157,4 +157,4 @@ "node" ] } -} +} \ No newline at end of file diff --git a/static/sass/_pattern_modals.scss b/static/sass/_pattern_modals.scss index 5d2446ce066..639c24d38b4 100644 --- a/static/sass/_pattern_modals.scss +++ b/static/sass/_pattern_modals.scss @@ -1,15 +1,15 @@ +@use "sass:map"; .is-wide-modal { // stylelint-disable function-calc-no-unspaced-operator -- allow spaces around operators max-width: calc( - $grid-max-width + 2 * $spv--large - 2 * map-get($grid-margin-widths, small) + $grid-max-width + 2 * $spv--large - 2 * map.get($grid-margin-widths, small) ) !important; + overflow-x: hidden; @media (min-width: $threshold-4-6-col) { max-width: calc( $grid-max-width + 2 * $spv--large - 2 * - map-get($grid-margin-widths, default) + map.get($grid-margin-widths, default) ) !important; } - - overflow-x: hidden; } From c661530bd557219b67875f363d8b7f131d2b5a47 Mon Sep 17 00:00:00 2001 From: Pete Date: Wed, 4 Dec 2024 15:29:39 +0100 Subject: [PATCH 3/3] chore: Bump sass version --- package.json | 2 +- yarn.lock | 124 ++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 120 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index dab8f1aeca0..04adf50862b 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "react-google-recaptcha": "3.1.0", "react-router-dom": "^6.24.1", "react-useportal": "1.0.19", - "sass": "1.79.0", + "sass": "1.81.0", "smartquotes": "2.3.2", "typescript": "5.5.4", "url-polyfill": "1.1.12", diff --git a/yarn.lock b/yarn.lock index a1e65a1957c..af1f053a1f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1724,6 +1724,95 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@parcel/watcher-android-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz#e32d3dda6647791ee930556aee206fcd5ea0fb7a" + integrity sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ== + +"@parcel/watcher-darwin-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz#0d9e680b7e9ec1c8f54944f1b945aa8755afb12f" + integrity sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw== + +"@parcel/watcher-darwin-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz#f9f1d5ce9d5878d344f14ef1856b7a830c59d1bb" + integrity sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA== + +"@parcel/watcher-freebsd-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz#2b77f0c82d19e84ff4c21de6da7f7d096b1a7e82" + integrity sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw== + +"@parcel/watcher-linux-arm-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz#92ed322c56dbafa3d2545dcf2803334aee131e42" + integrity sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA== + +"@parcel/watcher-linux-arm-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz#cd48e9bfde0cdbbd2ecd9accfc52967e22f849a4" + integrity sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA== + +"@parcel/watcher-linux-arm64-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz#7b81f6d5a442bb89fbabaf6c13573e94a46feb03" + integrity sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA== + +"@parcel/watcher-linux-arm64-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz#dcb8ff01077cdf59a18d9e0a4dff7a0cfe5fd732" + integrity sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q== + +"@parcel/watcher-linux-x64-glibc@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz#2e254600fda4e32d83942384d1106e1eed84494d" + integrity sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw== + +"@parcel/watcher-linux-x64-musl@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz#01fcea60fedbb3225af808d3f0a7b11229792eef" + integrity sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA== + +"@parcel/watcher-win32-arm64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz#87cdb16e0783e770197e52fb1dc027bb0c847154" + integrity sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig== + +"@parcel/watcher-win32-ia32@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz#778c39b56da33e045ba21c678c31a9f9d7c6b220" + integrity sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA== + +"@parcel/watcher-win32-x64@2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz#33873876d0bbc588aacce38e90d1d7480ce81cb7" + integrity sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw== + +"@parcel/watcher@^2.4.1": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.0.tgz#5c88818b12b8de4307a9d3e6dc3e28eba0dfbd10" + integrity sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ== + dependencies: + detect-libc "^1.0.3" + is-glob "^4.0.3" + micromatch "^4.0.5" + node-addon-api "^7.0.0" + optionalDependencies: + "@parcel/watcher-android-arm64" "2.5.0" + "@parcel/watcher-darwin-arm64" "2.5.0" + "@parcel/watcher-darwin-x64" "2.5.0" + "@parcel/watcher-freebsd-x64" "2.5.0" + "@parcel/watcher-linux-arm-glibc" "2.5.0" + "@parcel/watcher-linux-arm-musl" "2.5.0" + "@parcel/watcher-linux-arm64-glibc" "2.5.0" + "@parcel/watcher-linux-arm64-musl" "2.5.0" + "@parcel/watcher-linux-x64-glibc" "2.5.0" + "@parcel/watcher-linux-x64-musl" "2.5.0" + "@parcel/watcher-win32-arm64" "2.5.0" + "@parcel/watcher-win32-ia32" "2.5.0" + "@parcel/watcher-win32-x64" "2.5.0" + "@playwright/test@^1.40.0": version "1.40.0" resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.0.tgz#d06c506977dd7863aa16e07f2136351ecc1be6ed" @@ -3286,6 +3375,11 @@ dequal@^2.0.3: resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== +detect-libc@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" + integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== + detect-newline@^3.0.0: version "3.1.0" resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz" @@ -4537,6 +4631,11 @@ immutable@^4.0.0: resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be" integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg== +immutable@^5.0.2: + version "5.0.3" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.0.3.tgz#aa037e2313ea7b5d400cd9298fa14e404c933db1" + integrity sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw== + import-fresh@^3.2.1, import-fresh@^3.3.0: version "3.3.0" resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz" @@ -5632,6 +5731,14 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" +micromatch@^4.0.5: + version "4.0.8" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" + integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== + dependencies: + braces "^3.0.3" + picomatch "^2.3.1" + micromatch@^4.0.7: version "4.0.7" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5" @@ -5704,6 +5811,11 @@ nearley@^2.7.10: railroad-diagrams "^1.0.0" randexp "0.4.6" +node-addon-api@^7.0.0: + version "7.1.1" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558" + integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ== + node-fetch@2.6.7: version "2.6.7" resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz" @@ -6613,14 +6725,16 @@ safe-regex-test@^1.0.3: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== -sass@1.79.0: - version "1.79.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.0.tgz#4a58442b6c094ac57a0805519bff6133d70590c9" - integrity sha512-9Q1xXsm9XT54yYkmQAoH3vCMEIavwWWQGJ3cZ0WJAgecR4edDDTdtiPyEeFDNWO/hLCy3qZKvwjK4ulPR5Yzow== +sass@1.81.0: + version "1.81.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.81.0.tgz#a9010c0599867909dfdbad057e4a6fbdd5eec941" + integrity sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA== dependencies: chokidar "^4.0.0" - immutable "^4.0.0" + immutable "^5.0.2" source-map-js ">=0.6.2 <2.0.0" + optionalDependencies: + "@parcel/watcher" "^2.4.1" sass@^1.71.1: version "1.77.8"